From Vendure v3.5.0, the @vendure/dashboard package and configuration comes as standard with new projects that are started with
the npx @vendure/create command.
This guide serves mainly for those adding the Dashboard to existing project set up prior to v3.5.0.
This guide assumes an existing project based on the @vendure/create folder structure.
If you have a different setup (e.g. an Nx monorepo), you may need to adapt the instructions accordingly.
First install the @vendure/dashboard package:
Then create a vite.config.mts file in the root of your project (on the same level as your package.json) with the following content:
You should also add the following to your existing tsconfig.json file to exclude the dashboard extensions and Vite config
from your build, and reference a new tsconfig.dashboard.json that will have compiler settings for the Dashboard code.
Now create a new tsconfig.dashboard.json to allow your IDE
to correctly resolve imports of GraphQL types & interpret JSX in your dashboard extensions:
If your project uses a monorepo structure, such as with Nx or Turborepo, then you'll need to make some adjustments to the paths given above:
If each Vendure plugin is its own "package", outside the main Vendure server app, then it would need its own tsconfig for each plugin package. You might run into errors like:
Error loading Vendure config: Cannot find module
In this case, you'll need to configure a PathAdapter.
You should also put your vite.config.mts file into the Vendure app directory rather than the root.
In your vendure-config.ts file, you should also import and configure the DashboardPlugin.
The DashboardPlugin adds the following features that enhance the use of the Dashboard:
/dashboard route (by default), meaning you do not
need to set up a separate web server.Once the above is set up, you can run npm run dev to start your Vendure server, and then visit
http://localhost:3000/dashboard
which will display a developer placeholder until you start the Vite dev server using
To stop the running dashboard, type q and hit enter.
If you still need to run the legacy Angular-based Admin UI in parallel with the Dashboard, this is totally possible. Both plugins can now be used simultaneously without any special configuration.
Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team