Getting Started

npm install @vendure/dashboard

import { vendureDashboardPlugin } from '@vendure/dashboard/vite';import { join, resolve } from 'path';import { pathToFileURL } from 'url';import { defineConfig } from 'vite';export default defineConfig({    base: '/dashboard',    build: {        outDir: join(__dirname, 'dist/dashboard'),    },    plugins: [        vendureDashboardPlugin({            // The vendureDashboardPlugin will scan your configuration in order            // to find any plugins which have dashboard extensions, as well as            // to introspect the GraphQL schema based on any API extensions            // and custom fields that are configured.            vendureConfigPath: pathToFileURL('./src/vendure-config.ts'),            // Points to the location of your Vendure server.            api: { host: 'http://localhost', port: 3000 },            // When you start the Vite server, your Admin API schema will            // be introspected and the types will be generated in this location.            // These types can be used in your dashboard extensions to provide            // type safety when writing queries and mutations.            gqlOutputPath: './src/gql',        }),    ],    resolve: {        alias: {            // This allows all plugins to reference a shared set of            // GraphQL types.            '@/gql': resolve(__dirname, './src/gql/graphql.ts'),        },    },});

{    // ... existing options    "exclude": [        "node_modules",        "migration.ts",        "src/plugins/**/ui/*",        "admin-ui",        "src/plugins/**/dashboard/*",        "src/gql/*",        "vite.*.*ts"    ],    "references": [        {            "path": "./tsconfig.dashboard.json"        }    ]}

{    "compilerOptions": {        "composite": true,        "module": "ESNext",        "moduleResolution": "bundler",        "jsx": "react-jsx",        "paths": {            // Import alias for the GraphQL types            // Please adjust to the location that you have set in your `vite.config.mts`            "@/gql": [                "./src/gql/graphql.ts"            ],            // This line allows TypeScript to properly resolve internal            // Vendure Dashboard imports, which is necessary for            // type safety in your dashboard extensions.            // This path assumes a root-level tsconfig.json file.            // You may need to adjust it if your project structure is different.            "@/vdb/*": [                "./node_modules/@vendure/dashboard/src/lib/*"            ]        }    },    "include": [        "src/plugins/**/dashboard/*",        "src/gql/**/*.ts"    ]}

import { DashboardPlugin } from '@vendure/dashboard/plugin';const config: VendureConfig = {    plugins: [        // ... existing plugins        DashboardPlugin.init({ // [!code highlight]            // The route should correspond to the `base` setting // [!code highlight]            // in the vite.config.mts file // [!code highlight]            route: 'dashboard', // [!code highlight]            // This appDir should correspond to the `build.outDir` // [!code highlight]            // setting in the vite.config.mts file // [!code highlight]            appDir: './dist/dashboard', // [!code highlight]        }), // [!code highlight]      ],};

npx vite