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

Once set up, you run npx vite build to build the production version of 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',
    }),
  ],
};

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) =>