Skip to main content

DashboardPlugin

DashboardPlugin​

@vendure/dashboarddashboard.plugin.ts

This plugin serves the static files of the Vendure Dashboard and provides the GraphQL extensions needed for the order metrics on the dashboard index page.

Installation​

npm install @vendure/dashboard

Usage​

First you need to set up compilation of the Dashboard, using the Vite configuration described in the Dashboard Getting Started Guide

Development vs Production​

When developing, you can run npx vite (or npm run dev) to start the Vite development server. The plugin will automatically detect if Vite is running on the default port (5173) and proxy requests to it instead of serving static files. This enables hot module replacement and faster development iterations.

For production, run npx vite build to build the dashboard app. The built app files will be output to the location specified by build.outDir in your Vite config file. This should then be passed to the appDir init option, as in the example below:

Example

import { DashboardPlugin } from '@vendure/dashboard/plugin';

const config: VendureConfig = {
  // Add an instance of the plugin to the plugins array
  plugins: [
    DashboardPlugin.init({
      route: 'dashboard',
      appDir: './dist/dashboard',
      // Optional: customize Vite dev server port (defaults to 5173)
      viteDevServerPort: 3000,
    }),
  ],
};

Metrics​

This plugin defines a metricSummary query which is used by the Dashboard UI to display the order metrics on the dashboard.

If you are building a stand-alone version of the Dashboard UI app, and therefore don't need this plugin to serve the Dashboard UI, you can still use the metricSummary query by adding the DashboardPlugin to the plugins array, but without calling the init() method:

Example

import { DashboardPlugin } from '@vendure/dashboard-plugin';

const config: VendureConfig = {
  plugins: [
    DashboardPlugin, // <-- no call to .init()
  ],
  // ...
};
Signature
class DashboardPlugin implements NestModule {
    constructor(processContext: ProcessContext)
    init(options: DashboardPluginOptions) => Type<DashboardPlugin>;
    configure(consumer: MiddlewareConsumer) => ;
}
  • Implements: NestModule

constructor​

method
(processContext: ProcessContext) => DashboardPlugin

init​

method
(options: DashboardPluginOptions) => Type<DashboardPlugin>

Set the plugin options

configure​

method
(consumer: MiddlewareConsumer) =>