Phi / Resource List

<ResourceListPage
  title="KV Namespaces"
  description="Store key-value data globally with low-latency access"
>
  <template #icon>
    <DatabaseIcon />
  </template>
  <template #usage>...</template>
  <template #additionalContent>...</template>

  <ResourceList />
</ResourceListPage>

Installation

ResourceListPage is a source block: the Phi CLI copies its source into your app so you own and can customize the code.

pnpm dlx @dicehub/phi@beta add ResourceListPage

The command writes the block into the blocksDir from your phi.json, for examplesrc/components/phi/resource-list-page/ResourceListPage.vue. Import it from there:

import ResourceListPage from "./components/phi/resource-list-page/ResourceListPage.vue";

Run pnpm dlx @dicehub/phi@beta init once before the first block. See the CLI reference for every command.

Why blocks? Blocks give you full ownership of the code, allowing you to customize layouts to fit page-specific needs.

Usage

<script setup lang="ts">
import ResourceListPage from "./components/phi/resource-list-page/ResourceListPage.vue";
</script>

<template>
  <ResourceListPage
    title="Databases"
    description="Manage your database instances and configurations"
  >
    <template #icon>
      <DatabaseIcon />
    </template>

    <section>
      Your resource list content
    </section>
  </ResourceListPage>
</template>

Examples

Basic

A minimal resource list page with title, description, and icon.

<ResourceListPage
  title="Databases"
  description="Manage your database instances and configurations"
>
  <template #icon>
    <DatabaseIcon />
  </template>

  <ResourceList />
</ResourceListPage>

Minimal

Without a title, description, or icon the heading block is omitted and the page renders the list alone.

<ResourceListPage>
  <ResourceList />
</ResourceListPage>

Include a sidebar with usage examples or quick start guides.

<ResourceListPage
  title="API Keys"
  description="Create and manage API keys for your applications"
>
  <template #usage>
    <QuickStartCard />
  </template>

  <ResourceList />
</ResourceListPage>

API Reference

Property	Type	Description
`title`	`string`	Page title displayed at the top.
`description`	`string`	Page description below the title.
`icon`	`slot`	Icon displayed next to the title.
`usage`	`slot`	Sidebar content for usage examples or quick start guides.
`additionalContent`	`slot`	Additional sidebar content such as resources or links.
`default slot`	`slot`	Main content area for the resource list. Rendered before the sidebar in the DOM.
`class`	`string`	Additional class for the root element.