Page Blocks

In the Dashboard, all pages are built from blocks. Every block has a pageId and a blockId which uniquely locates it in the app (see Dev Mode section).

You can also define your own blocks, which can be added to any page and can even replace the default blocks.

Info

All available options are documented in the DashboardPageBlockDefinition reference

Basic Page Block Example

Here's an example of how to define a custom page block:

src/plugins/my-plugin/dashboard/index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';defineDashboardExtension({    pageBlocks: [        {            id: 'related-articles',            title: 'Related Articles',            location: {                // This is the pageId of the page where this block will be                pageId: 'product-detail',                // can be "main", "side" or "full"                column: 'side',                position: {                    // Blocks are positioned relative to existing blocks on                    // the page.                    blockId: 'facet-values',                    // Can be "before", "after" or "replace"                    // Here we'll place it after the `facet-values` block.                    order: 'after',                },            },            component: ({ context }) => {                // In the component, you can use the `context` prop to                // access the entity and the form instance.                return <div className="text-sm">Articles related to {context.entity.name}</div>;            },        },    ],});

This will add a "Related Articles" block to the product detail page:

Block Positioning

Page blocks can be positioned in three ways relative to existing blocks:

Page Blocks

In the Dashboard, all pages are built from blocks. Every block has a pageId and a blockId which uniquely locates it in the app (see Dev Mode section).

You can also define your own blocks, which can be added to any page and can even replace the default blocks.

Info

All available options are documented in the DashboardPageBlockDefinition reference

Basic Page Block Example

Here's an example of how to define a custom page block:

src/plugins/my-plugin/dashboard/index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';defineDashboardExtension({    pageBlocks: [        {            id: 'related-articles',            title: 'Related Articles',            location: {                // This is the pageId of the page where this block will be                pageId: 'product-detail',                // can be "main", "side" or "full"                column: 'side',                position: {                    // Blocks are positioned relative to existing blocks on                    // the page.                    blockId: 'facet-values',                    // Can be "before", "after" or "replace"                    // Here we'll place it after the `facet-values` block.                    order: 'after',                },            },            component: ({ context }) => {                // In the component, you can use the `context` prop to                // access the entity and the form instance.                return <div className="text-sm">Articles related to {context.entity.name}</div>;            },        },    ],});

This will add a "Related Articles" block to the product detail page:

Block Positioning

Page blocks can be positioned in three ways relative to existing blocks:

import { defineDashboardExtension, Button } from '@vendure/dashboard';import { useState } from 'react';defineDashboardExtension({ pageBlocks: [ // Analytics block for product page { id: 'product-analytics', title: 'Product Analytics', location: { pageId: 'product-detail', column: 'side', position: { blockId: 'product-assets', order: 'after', }, }, component: ({ context }) => { const product = context.entity; return ( <div className="space-y-2"> <div className="text-sm text-muted-foreground">Last 30 days</div> <div className="grid grid-cols-2 gap-4"> <div> <div className="text-2xl font-bold">142</div> <div className="text-xs text-muted-foreground">Views</div> </div> <div> <div className="text-2xl font-bold">23</div> <div className="text-xs text-muted-foreground">Orders</div> </div> </div> </div> ); }, }, // Quick actions block { id: 'quick-actions', title: 'Quick Actions', location: { pageId: 'product-detail', column: 'main', position: { blockId: 'product-variants', order: 'after', }, }, component: ({ context }) => { const [isProcessing, setIsProcessing] = useState(false); const handleSync = async () => { setIsProcessing(true); // Simulate API call await new Promise(resolve => setTimeout(resolve, 2000)); setIsProcessing(false); }; return ( <div className="flex gap-2"> <Button variant="outline" onClick={handleSync} disabled={isProcessing}> {isProcessing ? 'Syncing...' : 'Sync to External System'} </Button> <Button variant="outline">Generate QR Code</Button> </div> ); }, }, ],});

Page Blocks

Basic Page Block Example

Block Positioning

Page Blocks

Basic Page Block Example

Block Positioning

Before

After

Replace

Block Columns

Context Data

Block Visibility

Advanced Example

Finding Block IDs