Creating Pages

Page Structure

All pages in the Dashboard follow this structure:

src/plugins/example/dashboard/test-page.tsx

import { Page, PageBlock, PageLayout, PageTitle } from '@vendure/dashboard';export function TestPage() {    return (        <Page pageId="test-page">            <PageTitle>Test Page</PageTitle>            <PageLayout>                <PageBlock column="main" blockId="main-stuff">                    This will display in the main area                </PageBlock>                <PageBlock column="side" blockId="side-stuff">                    This will display in the side area                </PageBlock>            </PageLayout>        </Page>    )}

Page component
- PageTitle component
- PageLayout component
  - PageBlock components

Following this structure ensures that:

Your pages look consistent with the rest of the Dashboard
Your page content is responsive
Your page can be further extended using the pageBlocks API

Info

Note that the ListPage and DetailPage components internally use this same structure, so when using those top-level components you don't need to wrap them in Page etc.

Once you have defined a page component, you'll need to make it accessible to users with:

A route (url) by which it can be accessed
Usually a navigation bar entry in the main side navigation of the Dashboard

Both of these are handled using the DashboardRouteDefinition API:

src/plugins/example/dashboard/index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';import { TestPage } from './test-page';defineDashboardExtension({    routes: [        {            // The TestPage will be available at e.g.             // http://localhost:5173/dashboard/test            path: '/test',            // The loader function is allows us to define breadcrumbs            loader: () => ({ breadcrumb: 'Test Page' }),            // Here we define the nav menu items            navMenuItem: {                // a unique ID                id: 'test',                // the nav menu item label                title: 'Test Page',                // which section it should appear in                sectionId: 'catalog',            },            component: TestPage,        },    ],});

Info

For a complete guide to the navigation options available, see the Navigation guide