Extending the Vendure Dashboard with Plugin UI | Vendure Docs

Extending the Dashboard

The custom functionality you create in your Vendure plugins often needs to be exposed via the Dashboard so that administrators can interact with it.

This guide covers how you can set up your plugins with extensions to the Dashboard.

Plugin Setup

For the purposes of the guides in this section of the docs, we will work with a simple Content Management System (CMS) plugin that allows us to create and manage content articles.

Let's create the plugin:

npx vendure add --plugin cms

Now let's add an entity to the plugin:

npx vendure add --entity Article --selected-plugin CmsPlugin --custom-fields

You now have your CmsPlugin created with a new Article entity. You can find the plugin in the ./src/plugins/cms directory.

Let's edit the entity to add the appropriate fields:

src/plugins/cms/entities/article.entity.ts

import { DeepPartial, HasCustomFields, VendureEntity } from '@vendure/core';import { Column, Entity } from 'typeorm';export class ArticleCustomFields {}@Entity()export class Article extends VendureEntity implements HasCustomFields {    constructor(input?: DeepPartial<Article>) {        super(input);    }    @Column()    slug: string;    @Column()    title: string;    @Column('text')    body: string;    @Column()    isPublished: boolean;    @Column(type => ArticleCustomFields)    customFields: ArticleCustomFields;}

Now let's create a new ArticleService to handle the business logic of our new entity:

npx vendure add --service ArticleService --selected-plugin CmsPlugin --selected-entity Article

The service will be created in the ./src/plugins/cms/services directory.

Finally, we'll extend the GraphQL API to expose those CRUD operations:

npx vendure add --api-extension CmsPlugin --selected-service ArticleService --query-name ArticleQuery

Now the api extensions and resolver has been created in the ./src/plugins/cms/api-extensions directory.

The last step is to create a migration for our newly-created entity:

npx vendure migrate --generate article

Your project should now have the following structure:

src
└── plugins/
    └── cms/
        ├── api/
        │   ├── api-extensions.ts
        │   └── article-admin.resolver.ts
        ├── entities/
        │   └── article.entity.ts
        ├── services/
        │   └── article.service.ts
        ├── cms.plugin.ts
        ├── constants.ts
        └── types.ts

Was this chapter helpful?

Report Issue

Edited Jun 24, 2026·View source

src/plugins/cms/cms.plugin.ts

@VendurePlugin({    // ...    entities: [Article],    adminApiExtensions: {        schema: adminApiExtensions,        resolvers: [ArticleAdminResolver],    },    dashboard: './dashboard/index.tsx', // [!code highlight]})export class CmsPlugin {    // ...}

src/plugins/cms/dashboard/index.tsx

import { Button, defineDashboardExtension, Page, PageBlock, PageLayout, PageTitle } from '@vendure/dashboard';import { useState } from 'react';defineDashboardExtension({    routes: [        // Here's a custom page so you can test that your Dashboard extensions are working.        // You should be able to access this page via the "Catalog > Test Page" nav menu item.        {            path: '/test',            loader: () => ({ breadcrumb: 'Test Page' }),            navMenuItem: {                id: 'test',                title: 'Test Page',                sectionId: 'catalog',            },            component: () => {                const [count, setCount] = useState(0);                return (                    <Page pageId="test-page">                        <PageTitle>Test Page</PageTitle>                        <PageLayout>                            <PageBlock column="main" blockId="counter">                                <p>Congratulations, your Dashboard extension is working!</p>                                <p className="text-muted-foreground mb-4">                                    As is traditional, let's include a counter:                                </p>                                <Button variant="secondary" onClick={() => setCount(c => c + 1)}>                                    Clicked {count} times                                </Button>                            </PageBlock>                        </PageLayout>                    </Page>                );            },        },    ],    // The following extension points are only listed here    // to give you an idea of all the ways that the Dashboard    // can be extended. Feel free to delete any that you don't need.    pageBlocks: [],    navSections: [],    actionBarItems: [],    alerts: [],    widgets: [],    customFormComponents: {},    dataTables: [],    detailForms: [],    login: {},    historyEntries: [],    toolbarItems: [],});

Install the GraphQL plugin for your IDE
Run npx vendure schema --api admin to generate a schema.graphql file in your root directory
Create a graphql.config.yml file in your root directory with the following content:
graphql.config.yml
schema: 'schema.graphql'

Extending the Dashboard

Plugin Setup

Extending the Dashboard

Plugin Setup

Add Dashboard to Plugin

IDE GraphQL Integration

Dev Mode

What's Next?