On this page

Custom dashboard pages

Pruvious allows you to customize the dashboard by adding new menu pages. You can do this by defining them in the dashboard directory in your project's root.


Here is an example of how to define a custom dashboard page:

# dashboard/analytics.ts

import { defineDashboardPage } from '#pruvious'

export default defineDashboardPage({
  path: 'analytics',
  vueComponent: './components/Dashboard/Analytics.vue',
  icon: 'ChartBar',
  capabilities: ['access-analytics'],

Dashboard pages are simple Vue components. Since the dashboard is a single-page application (SPA), the components will only be rendered in the browser.

Here's a boilerplate for a dashboard component:

# components/Dashboard/Analytics.vue

    <div class="scrollbar-thin overflow-auto p-8">


The defineDashboardPage function allows you to define the following properties (required properties are marked with the symbol R):



The user capabilities required to access this page. Admin users can access all pages regardless of their capabilities.


The icon displayed in the dashboard menu for this page. You can find a list of all available icons here.


The label used for this page in the dashboard menu. When not provided, the label will be generated from the path (e.g., export will become Export).

path R

The Vue route path used to render this page in the dashboard. For example, if you set it to 'export', the page will be rendered at /dashboard/export. You can also utilize dynamic route parameters, such as 'export/:id'.


The priority of this page in the dashboard menu. Here is a list of the default menu priorities:

  • 0 - Pages

  • 1 - Presets

  • 2 - Media

  • 3 - Custom multi-entry collections

  • 4 - Users

  • 5 - Roles

  • 6 - Custom single-entry collections

vueComponent R

The relative path of the Vue component that renders this page in the dashboard. The path should be relative to your Nuxt app directory.

Last updated on January 20, 2024 at 16:33