Skip to main content

Page Blocks

DashboardPageBlockDefinition​

@vendure/dashboardlayout.ts
v3.3.0

This allows you to insert a custom component into a specific location on any page in the dashboard.

Signature
interface DashboardPageBlockDefinition {
    id: string;
    title?: React.ReactNode;
    location: PageBlockLocation;
    component: React.FunctionComponent<{ context: PageContextValue }>;
    requiresPermission?: string | string[];
}

id​

property
string

title​

property
React.ReactNode

location​

property
PageBlockLocation

component​

property
React.FunctionComponent<{ context: PageContextValue }>

requiresPermission​

property
string | string[]

PageBlockPosition​

@vendure/dashboardlayout.ts
v3.3.0

The relative position of a PageBlock. This is determined by finding an existing block, and then specifying whether your custom block should come before, after, or completely replace that block.

Signature
type PageBlockPosition = {
    blockId: string;
    order: 'before' | 'after' | 'replace'
}

blockId​

property
string

order​

property
'before' | 'after' | 'replace'

PageBlockLocation​

@vendure/dashboardlayout.ts
v3.3.0

The location of a page block in the dashboard. The location can be found by turning on "developer mode" in the dashboard user menu (bottom left corner) and then clicking the < /> icon when hovering over a page block.

Signature
type PageBlockLocation = {
    pageId: string;
    position: PageBlockPosition;
    column: 'main' | 'side';
}

pageId​

property
string

position​

property
PageBlockPosition

column​

property
'main' | 'side'