/node_modules/.cache/vendure-dashboard-temp`. It must
* not be located inside a `"type": "module"` package (such as
* `@vendure/dashboard` itself), because the config is compiled to CommonJS and
* Node would then load it as ESM, failing with
* `exports is not defined in ES module scope`.
*/
tempCompilationDir?: string;
/**
* @description
* Options passed to the underlying TanStack Router Vite plugin (`tanstackRouter()`). These are
* merged on top of the Dashboard's own defaults, letting you override most aspects of the router
* plugin's configuration. The `routesDirectory`, `generatedRouteTree` and `routeFileIgnorePattern`
* settings are managed by the Dashboard and cannot be overridden (attempts are ignored with a warning).
*
* A common use case is setting `tmpDir` when your deployment's default temp directory is on a
* different device than the checked-out code (e.g. `node_modules` on a separate volume), which
* otherwise causes the build to fail with `EXDEV: cross-device link not permitted` during
* route-tree generation.
*
* @example
* ```ts
* vendureDashboardPlugin({
* vendureConfigPath: './vendure-config.ts',
* tanstackRouterPluginOptions: {
* tmpDir: path.join(packageRoot, '.tanstack-tmp'),
* },
* })
* ```
*
* @since 3.7.0
*/
tanstackRouterPluginOptions?: TanstackRouterPluginOptions;
/**
* @description
* Allows you to customize the location of node_modules & glob patterns used to scan for potential
* Vendure plugins installed as npm packages. If not provided, the compiler will attempt to guess
* the location based on the location of the `@vendure/core` package.
*/
pluginPackageScanner?: PackageScannerConfig;
/**
* @description
* Allows you to specify the module system to use when compiling and loading your Vendure config.
* By default, the compiler will use CommonJS, but you can set it to `esm` if you are using
* ES Modules in your Vendure project.
*
* **Status** Developer preview. If you are using ESM please try this out and provide us with feedback!
*
* @since 3.5.1
* @default 'commonjs'
*/
module?: 'commonjs' | 'esm';
/**
* @description
* Allows you to selectively disable individual plugins.
* @example
* ```ts
* vendureDashboardPlugin({
* vendureConfigPath: './config.ts',
* disablePlugins: {
* react: true,
* lingui: true,
* }
* })
* ```
*/
disablePlugins?: {
tanstackRouter?: boolean;
linguiBabel?: boolean;
react?: boolean;
lingui?: boolean;
themeVariables?: boolean;
tailwindSource?: boolean;
tailwindcss?: boolean;
configLoader?: boolean;
viteConfig?: boolean;
bundleEntry?: boolean;
adminApiSchema?: boolean;
dashboardMetadata?: boolean;
uiConfig?: boolean;
gqlTada?: boolean;
transformIndexHtml?: boolean;
translations?: boolean;
hmr?: boolean;
};
/**
* @description
* **EXPERIMENTAL** — Opt into the pre-bundled dashboard architecture.
*
* When `true`, the dashboard is loaded from a pre-built ESM bundle
* (`@vendure/dashboard/dist/publishable/`) shipped inside the npm package,
* instead of being compiled from TypeScript source by your Vite dev server.
* This dramatically reduces the number of HTTP requests during `vite dev`
* (~3000 raw module fetches → ~40 bundled chunks) which avoids the
* Chromium renderer crash reported in issue #4715.
*
* Trade-offs while this is experimental:
* - Some dashboard internals are now opaque to your `vite dev` (no per-file HMR
* for the dashboard itself; extension HMR still works)
* - Reports of behavioural regressions are very welcome — this flag exists so
* the bundled mode can be tested in real-world projects alongside the stable
* source-shipping mode.
*
* This flag will be removed (and the bundled mode will become the default)
* once it has been validated across enough real-world setups.
*
* @default false
* @since 3.7.0
*/
useExperimentalBundle?: boolean;
/**
* @description
* Customizes the dashboard's appearance. Override design-token colours for
* the `light` and `dark` themes, and/or layer in additional stylesheets via
* `additionalStylesheets`.
*
* @example
* ```ts
* vendureDashboardPlugin({
* theme: {
* light: { brand: '#1a1a1a' },
* additionalStylesheets: [resolve(__dirname, 'src/dashboard.css')],
* },
* })
* ```
*/
theme?: DashboardThemeOptions;
} & UiConfigPluginOptions
````
## PathAdapter
The PathAdapter interface allows customization of how paths are handled
when compiling the Vendure config and its imports.
It enables support for more complex repository structures, such as
monorepos, where the Vendure server configuration file may not
be located in the root directory of the project.
If you get compilation errors like "Error loading Vendure config: Cannot find module",
you probably need to provide a custom `pathAdapter` to resolve the paths correctly.
This can take some trial-and-error. Try logging values from the functions to figure out
the exact settings that you need for your repo setup.
*Example*
```ts
vendureDashboardPlugin({
pathAdapter: {
getCompiledConfigPath: ({ inputRootDir, outputPath, configFileName }) => {
const projectName = inputRootDir.split('/libs/')[1].split('/')[0];
const pathAfterProject = inputRootDir.split(`/libs/${projectName}`)[1];
const compiledConfigFilePath = `${outputPath}/${projectName}${pathAfterProject}`;
return path.join(compiledConfigFilePath, configFileName);
},
transformTsConfigPathMappings: ({ phase, patterns }) => {
// "loading" phase is when the compiled Vendure code is being loaded by
// the plugin, in order to introspect the configuration of your app.
if (phase === 'loading') {
return patterns.map((p) =>
p.replace('libs/', '').replace(/.ts$/, '.js'),
);
}
return patterns;
},
},
// ...
}),
```
```ts title="Signature"
interface PathAdapter {
getCompiledConfigPath?: GetCompiledConfigPathFn;
transformTsConfigPathMappings?: TransformTsConfigPathMappingsFn;
sourceRoot?: string;
}
```
### getCompiledConfigPath
\
A function to determine the path to the compiled Vendure config file.
### transformTsConfigPathMappings
\
### sourceRoot
\
The root directory used to compute relative output paths when compiling
TypeScript files. Compiled files preserve their directory structure
relative to this root.
In monorepos this should typically be set to the workspace root (where
the base `tsconfig.json` lives), so that a config file at
`apps/server/src/vendure-config.ts` outputs to
`{outputPath}/apps/server/src/vendure-config.js`.
Defaults to the directory containing the `vendureConfigPath` file,
which places the compiled config at the output root.
## DashboardThemeOptions
Appearance options for the dashboard. Extends `ThemeVariables` (the
`light`/`dark` colour-token overrides) with the ability to layer in
additional stylesheets.
```ts title="Signature"
interface DashboardThemeOptions extends ThemeVariables {
additionalStylesheets?: string | string[];
}
```
* Extends: ThemeVariables
### additionalStylesheets
\
One or more paths to additional CSS files that should be imported into
the dashboard's main stylesheet. Each path is injected as an `@import`
statement at a dedicated insertion point among the stylesheet's other
imports, so the file participates in Tailwind's build pipeline — you can
use `@source`, `@theme`, `@apply`, `@utility`, custom variants, etc.
inside it.
Paths may be absolute or relative to the current working directory;
relative paths are resolved against `process.cwd()`. Backslashes are
normalized to forward slashes so the resulting `@import` statement is
valid on Windows.
To override design tokens (e.g. brand colors), prefer the `light`/`dark`
theme options — `additionalStylesheets` is for layering custom CSS rules.
*Example*
```ts
vendureDashboardPlugin({
theme: {
additionalStylesheets: [path.resolve(__dirname, 'src/dashboard.css')],
},
})
```
## ApiConfig
Options used by the [vendureDashboardPlugin](/current/core/reference/dashboard/vite-plugin/vendure-dashboard-plugin#venduredashboardplugin) to configure how the Dashboard
connects to the Vendure Admin API
```ts title="Signature"
interface ApiConfig {
host?: string | 'auto';
port?: number | 'auto';
adminApiPath?: string;
tokenMethod?: 'cookie' | 'bearer';
authTokenHeaderKey?: string;
channelTokenKey?: string;
}
```
### host
\
The hostname of the Vendure server which the admin UI will be making API calls
to. If set to "auto", the Admin UI app will determine the hostname from the
current location (i.e. `window.location.hostname`).
### port
\
The port of the Vendure server which the admin UI will be making API calls
to. If set to "auto", the Admin UI app will determine the port from the
current location (i.e. `window.location.port`).
### adminApiPath
\
The path to the GraphQL Admin API.
### tokenMethod
\
Whether to use cookies or bearer tokens to track sessions.
Should match the setting of in the server's `tokenMethod` config
option.
### authTokenHeaderKey
\
The header used when using the 'bearer' auth method. Should match the
setting of the server's `authOptions.authTokenHeaderKey` config option.
### channelTokenKey
\
The name of the header which contains the channel token. Should match the
setting of the server's `apiOptions.channelTokenKey` config option.
## I18nConfig
Options used by the [vendureDashboardPlugin](/current/core/reference/dashboard/vite-plugin/vendure-dashboard-plugin#venduredashboardplugin) to configure aspects of the
Dashboard UI behaviour.
```ts title="Signature"
interface I18nConfig {
defaultLanguage?: LanguageCode;
defaultLocale?: string;
availableLanguages?: LanguageCode[];
availableLocales?: string[];
}
```
### defaultLanguage
\
LanguageCode`} default={`LanguageCode.en`} />
The default language for the Admin UI. Must be one of the
items specified in the `availableLanguages` property.
### defaultLocale
\
The default locale for the Admin UI. The locale affects the formatting of
currencies & dates. Must be one of the items specified
in the `availableLocales` property.
If not set, the browser default locale will be used.
### availableLanguages
\LanguageCode[]`} />
An array of languages for which translations exist for the Admin UI.
### availableLocales
\
An array of locales to be used on Admin UI.
### refundReasons
\`} />
An array of refund reasons to display in the refund order dialog.
Each reason has a `value` (used as the identifier) and a `label` (displayed to the user).
If not provided, default reasons will be used.
## UiConfigPluginOptions
Options used by the [vendureDashboardPlugin](/current/core/reference/dashboard/vite-plugin/vendure-dashboard-plugin#venduredashboardplugin) to configure aspects of the
Dashboard UI behaviour.
```ts title="Signature"
interface UiConfigPluginOptions {
api?: ApiConfig;
i18n?: I18nConfig;
orders?: OrdersConfig;
}
```
### api
\ApiConfig`} />
Configuration for API connection settings
### i18n
\I18nConfig`} />
Configuration for internationalization settings
### orders
\OrdersConfig`} />
Configuration for order-related settings