Vendure Admin UI Setup

Configuring Vendure Admin UI

Vendure Admin UI is an Angular application delivered as a separate package and compiled with plugin extensions. Not webcomponents or iframe approach: extensions are embedded during build via Angular Lazy Modules, providing full access to routing, components, and translations.

Out-of-the-Box Deployment

Fastest option — AdminUiPlugin without customization:

// vendure-config.ts
import { AdminUiPlugin } from "@vendure/admin-ui-plugin";

export const config: VendureConfig = {
  plugins: [
    AdminUiPlugin.init({
      route: "admin",
      port: 3002,
    }),
  ],
};

Admin UI accessible at http://localhost:3002/admin. In production, compile UI beforehand and serve as static via Nginx.

Pre-compilation (Production)

// compile-admin-ui.ts
import { compileUiExtensions } from "@vendure/ui-devkit/compiler";
import path from "path";

compileUiExtensions({
  outputPath: path.join(__dirname, "../admin-ui"),
  extensions: [
    LoyaltyPlugin.uiExtensions,
    B2bPricingPlugin.uiExtensions,
  ],
  devMode: false,
}).compile?.();

npx ts-node compile-admin-ui.ts

Result — admin-ui/dist directory with static files. Point to it:

AdminUiPlugin.init({
  route: "admin",
  port: 3002,
  app: {
    path: path.join(__dirname, "../admin-ui/dist"),
  },
}),

Branding

AdminUiPlugin.init({
  route: "admin",
  port: 3002,
  adminUiConfig: {
    brand: "My Shop Admin",
    hideVendureBranding: true,
    hideVersion: false,
    defaultLanguage: LanguageCode.ru,
    defaultLocale: "ru",
    availableLanguages: [LanguageCode.ru, LanguageCode.en],
  },
}),

Logo and colors via Angular theme extension.

Extending Admin UI from Plugin

Each plugin can add tabs, pages, or fields to existing sections:

// loyalty.plugin.ts
@VendurePlugin({
  // ...
  configuration: (config) => config,
})
export class LoyaltyPlugin {
  static uiExtensions: AdminUiExtension = {
    id: "loyalty-ui",
    extensionPath: path.join(__dirname, "loyalty-ui"),
    routes: [{
      route: "loyalty",
      filePath: "routes.ts",
    }],
    providers: ["providers.ts"],
  };
}

Adding Custom Field to Existing Page

If plugin adds customFields to standard entity, Admin UI auto-renders them. For custom rendering:

addActionBarItem({
  id: "view-loyalty",
  label: "Loyalty Points",
  locationId: "customer-detail",
  routerLink: (data) => ["/extensions/loyalty", data.entity?.id],
  icon: "star",
});

Translations

Vendure Admin UI supports i18n via ngx-translate:

// loyalty-ui/providers.ts
{
  provide: VENDURE_UI_CONFIG,
  useValue: {
    translations: {
      ru: {
        "loyalty.title": "Loyalty Program",
        "loyalty.points": "Points",
        "loyalty.transactions": "Transaction History",
      },
    },
  },
}

Nginx for Admin UI in Production

location /admin/ {
    root /var/www/vendure/admin-ui/dist;
    try_files $uri $uri/ /admin/index.html;

    location ~* \.(js|css|woff2|png|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Common Issues