Defining Custom Routes in the Vendure Admin UI

Defining Custom Routes in the Vendure Admin UI | Vendure Docs

src/plugins/greeter/ui/components/greeter/greeter.component.ts

import { SharedModule } from '@vendure/admin-ui/core';import { Component } from '@angular/core';@Component({    selector: 'greeter',    template: `        <vdr-page-block>            <h2>{{ greeting }}</h2>        </vdr-page-block>`,    standalone: true,    imports: [SharedModule],})export class GreeterComponent {    greeting = 'Hello!';}

Using registerRouteComponent you can define a new route based on an Angular component.

src/plugins/greeter/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { GreeterComponent } from './components/greeter/greeter.component';export default [    registerRouteComponent({        component: GreeterComponent,        path: '',        title: 'Greeter Page',        breadcrumb: 'Greeter',    }),];

src/plugins/greeter/greeter.plugin.ts

// ...export class GreeterPlugin {    static options: PluginInitOptions;    static init(options: PluginInitOptions): Type<GreeterPlugin> {        this.options = options;        return GreeterPlugin;    }    static ui: AdminUiExtension = { // [!code highlight]        id: 'greeter-ui', // [!code highlight]        extensionPath: path.join(__dirname, 'ui'), // [!code highlight]        routes: [{ route: 'greeter', filePath: 'routes.ts' }], // [!code highlight]        providers: ['providers.ts'], // [!code highlight]    }; // [!code highlight]}

src/plugins/my-plugin/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { TestComponent } from './components/test/test.component';export default [    registerRouteComponent({        component: TestComponent,        path: ':id', // [!code highlight]        title: 'Test',        breadcrumb: 'Test',    }),];

src/plugins/my-plugin/ui/components/test/test.component.ts

import { SharedModule } from '@vendure/admin-ui/core';import { Component } from '@angular/core';import { ActivatedRoute } from '@angular/router';@Component({    selector: 'test',    template: `        <vdr-page-block>            <p>id: {{ id }}</p> {/* [!code highlight] */}        </vdr-page-block>`,    standalone: true,    imports: [SharedModule],})export class TestComponent {    id: string;    constructor(private route: ActivatedRoute) {        this.id = this.route.snapshot.paramMap.get('id'); // [!code highlight]    }}

In Angular, we can use either the constructor to inject the service (as shown below), or the inject() function. See the Angular dependency injection guide for more information.

src/plugins/my-plugin/ui/components/test/test.component.ts

import { SharedModule, NotificationService } from '@vendure/admin-ui/core';import { Component } from '@angular/core';@Component({    selector: 'test',    template: `        <vdr-page-block>            <button class="button primary" (click)="showNotification()">Click me</button>        </vdr-page-block>`,    standalone: true,    imports: [SharedModule],})export class TestComponent {    constructor(private notificationService: NotificationService) {} // [!code highlight]        showNotification() {        this.notificationService.success('Hello!'); // [!code highlight]    }}

src/plugins/my-plugin/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { TestComponent } from './components/test/test.component';export default [    registerRouteComponent({        component: TestComponent,        title: 'Test', // [!code highlight]        breadcrumb: 'Test',    }),];

src/plugins/my-plugin/ui/components/test/test.component.ts

import { PageMetadataService, SharedModule } from '@vendure/admin-ui/core';import { Component } from '@angular/core';@Component({    selector: 'test',    template: `        <vdr-page-block>            <vdr-card>                <button class="button primary" (click)="handleClick()">Update title</button> {/* [!code highlight] */}            </vdr-card>        </vdr-page-block>`,    standalone: true,    imports: [SharedModule],})export class TestComponent {    constructor(private pageMetadataService: PageMetadataService) {} // [!code highlight]    handleClick() {        pageMetadataService.setTitle('New title'); // [!code highlight]    }}

src/plugins/my-plugin/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { TestComponent } from './components/test/test.component';export default [    registerRouteComponent({        component: TestComponent,        title: 'Test',        locationId: 'my-location-id'        breadcrumb: 'Test', // [!code highlight]    }),];

src/plugins/my-plugin/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { TestComponent } from './components/test/test.component';export default [    registerRouteComponent({        component: TestComponent,        path: 'test-1',        title: 'Test 1',        breadcrumb: { label: 'Test', link: '/extensions/test' }, // [!code highlight]    }),    registerRouteComponent({        component: TestComponent,        path: 'test-2',        title: 'Test 2',        breadcrumb: [ // [!code highlight]            { label: 'Parent', link: '/extensions/test' }, // [!code highlight]            { label: 'Child', link: '/extensions/test/test-2' }, // [!code highlight]        ], // [!code highlight]    }),];

src/plugins/my-plugin/ui/components/test/test.component.ts

import { PageMetadataService, SharedModule } from '@vendure/admin-ui/core';import { Component } from '@angular/core';@Component({    selector: 'test',    template: `        <vdr-page-block>            <vdr-card>                <button class="button primary" (click)="handleClick()">Update breadcrumb</button> {/* [!code highlight] */}            </vdr-card>        </vdr-page-block>`,    standalone: true,    imports: [SharedModule],})export class TestComponent {    constructor(private pageMetadataService: PageMetadataService) {} // [!code highlight]    handleClick() {        pageMetadataService.setBreadcrumb('New breadcrumb'); // [!code highlight]    }}

/catalog/products/:id

src/vendure-config.ts

import { VendureConfig } from '@vendure/core';import { AdminUiPlugin } from '@vendure/admin-ui-plugin';import { compileUiExtensions } from '@vendure/ui-devkit/compiler';import * as path from 'path';export const config: VendureConfig = {    // ...    plugins: [        AdminUiPlugin.init({            port: 3002,            app: compileUiExtensions({                outputPath: path.join(__dirname, '../admin-ui'),                extensions: [                    {                        id: 'my-plugin',                        extensionPath: path.join(__dirname, 'plugins/my-plugin/ui'),                        routes: [                            {                                // Setting the prefix to '' means that we won't add the                                // default `/extensions/` prefix to the route                                prefix: '',                                // This part matches the built-in route path for the                                 // "catalog" module                                route: 'catalog',                                filePath: 'routes.ts',                            },                        ],                    },                ],            }),        }),    ],};

src/plugins/my-plugin/ui/routes.ts

import { GetProductDetailDocument, registerRouteComponent } from '@vendure/admin-ui/core';import { MyProductDetailComponent } from './components/product-detail/product-detail.component';export default [    registerRouteComponent({        component: MyProductDetailComponent,        // The path must then match the remainder        // of the built-in route path        path: 'products/:id',        // We can re-use the GraphQL query from the core to get        // access to the same data in our component        query: GetProductDetailDocument,        entityKey: 'product',        getBreadcrumbs: entity => [            { label: 'breadcrumb.products', link: ['/catalog/products'] },            { label: entity?.name ?? 'catalog.create-new-product', link: ['.'] },        ],    }),];

src/plugins/my-plugin/ui/routes.ts

import { registerRouteComponent } from '@vendure/admin-ui/core';import { inject } from '@angular/core';import { ActivatedRouteSnapshot } from '@angular/router';import { TestComponent } from './components/test/test.component';import { PermissionsService } from './services';export default [    registerRouteComponent({        component: TestComponent,        path: ':id',        title: 'Test',        breadcrumb: 'Test',        routeConfig: { // [!code highlight]            pathMatch: 'full', // [!code highlight]            canActivate: [(route: ActivatedRouteSnapshot) => { // [!code highlight]                return inject(PermissionsService).canActivate(route.params.id); // [!code highlight]            }], // [!code highlight]        }, // [!code highlight]    }),];

Defining routes

Example: Creating a "Greeter" route

1. Create a plugin

2. Create the route component

Defining routes

Example: Creating a "Greeter" route

1. Create a plugin

2. Create the route component

3. Define the route

4. Add the route to the extension config

5. Test it out

Links

Route parameters

Injecting services

Setting page title

In the route definition

Dynamically from the component

In the route definition

Dynamically from the component

Overriding built-in routes

Advanced configuration

Defining routes

Example: Creating a "Greeter" route

1. Create a plugin

2. Create the route component

Defining routes

Example: Creating a "Greeter" route

1. Create a plugin

2. Create the route component

3. Define the route

4. Add the route to the extension config

5. Test it out

Links

Route parameters

Injecting services

Setting page title

In the route definition

Dynamically from the component

Setting breadcrumbs

In the route definition

Dynamically from the component

Overriding built-in routes

Advanced configuration