DashboardPlugin

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()  ],  // ...};

class DashboardPlugin implements NestModule {    constructor(processContext: ProcessContext)    init(options: DashboardPluginOptions) => Type<DashboardPlugin>;    configure(consumer: MiddlewareConsumer) => ;}

• Implements: NestModule