Vendure Admin UI Customization & Deployment Guide

When extensions don't connect, translations don't apply, and after deployment the UI crashes with hydration errors — this is typical pain when customizing the Vendure admin panel. In 6 out of 10 projects we encounter Angular hydration errors due to mismatched server and client state. This is resolved by static build with ahead-of-time compilation. We've dissected dozens of such projects and collected practical production configs. Below — ready solutions for compilation, branding, and adding custom tabs.

Case Study: TTFB Reduced by 2.5x

A client — online store with 15 plugins and 3 custom tabs. Without compilation, the admin panel loaded in 4 seconds. After compilation — 1.2 seconds. Additionally, we configured caching via Nginx with immutable tags for static assets. TTFB dropped from 2.5s to 800ms, CPU usage decreased by 40%. Core Web Vitals (LCP, INP) entered the green zone.

Why Ahead-of-Time Compilation Is Mandatory

In dev mode, the Angular admin panel compiles on the fly — each request rebuilds the application. In production this yields TTFB over 2 seconds and high server load. Ahead-of-time compilation speeds up loading by 2–3x and reduces memory usage. On a test project with 5 plugins, TTFB dropped from 2.1s to 540ms, CPU usage by 40%. Production compilation is 2–3x faster than dev mode in terms of load time. Here's how to do it:

// 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?.(); 

Then specify the path in config and run compilation via npx ts-node compile-admin-ui.ts. Result — admin-ui/dist directory with static files ready for serving via Nginx.

How to Add a Custom Tab to the Menu

To add a custom tab from a plugin, create an extension with routes and menu item registration. Example full extension for a loyalty program:

// loyalty.plugin.ts @VendurePlugin({ /* ... */ }) export class LoyaltyPlugin { static uiExtensions: AdminUiExtension = { id: "loyalty-ui", extensionPath: path.join(__dirname, "loyalty-ui"), routes: [{ route: "loyalty", filePath: "routes.ts" }], providers: ["providers.ts"], }; } // loyalty-ui/routes.ts import { Route } from "@angular/router"; import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker"; export default [ { path: "", component: LoyaltyListComponent, data: { breadcrumb: _("Loyalty Program") } }, { path: ":id", component: LoyaltyDetailComponent, data: { breadcrumb: _("Loyalty Account") } }, ] satisfies Route[]; // loyalty-ui/providers.ts import { addNavMenuItem } from "@vendure/admin-ui/core"; export default [ addNavMenuItem( { id: "loyalty", label: "Loyalty", routerLink: ["/extensions/loyalty"], icon: "star" }, "customers" ), ]; 

According to the official Vendure documentation, this approach guarantees compatibility with future releases.

How to Change Admin Panel Branding

In the AdminUiPlugin config, set adminUiConfig.brand, hideVendureBranding, defaultLanguage. For logo and colors, use an Angular theme: create a theme.ts file with primaryColor, accentColor, and logo. Pass it to compileUiExtensions. Example:

// theme.ts export const theme = { primaryColor: "#1a73e8", accentColor: "#e8f0fe", logo: "/assets/logo.svg", }; 

Then import the theme and pass it to compileUiExtensions({ theme }). Vendure branding takes 2 to 4 hours and does not require deep Angular knowledge.

How to Add Translations for Extensions

Use VENDURE_UI_CONFIG in the extension providers. In the translations field, specify an object with string keys for each language. Set the language via languageCode (e.g., ru). Ensure the key matches the marker in the template. This allows multilingual admin panel without duplicating components.

Why Version Synchronization Is Critical

The versions of @vendure/ui-devkit and @vendure/core must match: the UI Devkit compiles for a specific Vendure version. Incompatibility leads to Angular compilation errors or unpredictable UI behavior. We guarantee version synchronization — standard practice on all our projects.

Common Errors and Solutions

What's Included in the Work

• Audit of current configuration — analysis of plugins, versions, dependencies.
• Extension design — defining structure, routes, components.
• Implementation and build — writing code, theme configuration, UI compilation.
• Testing — verification in dev and production modes, Core Web Vitals measurement for Vendure admin panel.
• Documentation — description of all custom extensions and deployment instructions.
• Access and support — repository handover, CI/CD setup, consultations.

Process and Timelines

1. Analysis — we review current configuration, plugin list, UI requirements. Check Vendure and ui-devkit versions.
2. Design — develop extension structure, define custom components, routes, and entry points.
3. Implementation — write code, configure theme (colors, logo), add translations.
4. Testing — check in dev and production, measure Core Web Vitals, fix issues.
5. Deployment — compile UI, configure server (Nginx), launch.
6. Support — hand over repository, set up CI/CD for automatic rebuild on plugin updates.

Timelines — from 2 to 5 days depending on complexity. Price is determined individually. Contact us for an estimate.

Get a consultation on Vendure Admin UI setup — we'll show how to save up to 30% deployment time and avoid common pitfalls. Our experience — over 50 Vendure projects. Contact us to discuss your store.