This is the Vite plugin which powers the Vendure Dashboard, including:
Parameters
VitePluginVendureDashboardOptionsOptions for the vendureDashboardPlugin Vite plugin.
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
GetCompiledConfigPathFnA function to determine the path to the compiled Vendure config file.
TransformTsConfigPathMappingsFnstringv3.6.0The 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.
Appearance options for the dashboard. Extends ThemeVariables (the
light/dark colour-token overrides) with the ability to layer in
additional stylesheets.
string | string[]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
Options used by the vendureDashboardPlugin to configure how the Dashboard connects to the Vendure Admin API
string | 'auto''auto'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).
number | 'auto''auto'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).
string'admin-api'The path to the GraphQL Admin API.
'cookie' | 'bearer''cookie'Whether to use cookies or bearer tokens to track sessions.
Should match the setting of in the server's tokenMethod config
option.
string'vendure-auth-token'The header used when using the 'bearer' auth method. Should match the
setting of the server's authOptions.authTokenHeaderKey config option.
string'vendure-token'The name of the header which contains the channel token. Should match the
setting of the server's apiOptions.channelTokenKey config option.
Options used by the vendureDashboardPlugin to configure aspects of the Dashboard UI behaviour.
LanguageCode<a href='/reference/typescript-api/common/language-code#languagecode'>LanguageCode</a>.enThe default language for the Admin UI. Must be one of the
items specified in the availableLanguages property.
stringv2.2.0The 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.
LanguageCode[]An array of languages for which translations exist for the Admin UI.
string[]v2.2.0An array of locales to be used on Admin UI.
Options used by the vendureDashboardPlugin to configure order-related Dashboard UI behaviour.
Array<{ value: string; label: string }>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.
Options used by the vendureDashboardPlugin to configure aspects of the Dashboard UI behaviour.
ApiConfigConfiguration for API connection settings
I18nConfigConfiguration for internationalization settings
OrdersConfigConfiguration for order-related settings