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.

Example

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

<template>
  <PruviousBase>
    <div class="scrollbar-thin overflow-auto p-8">
      ...
    </div>
  </PruviousBase>
</template>

Definition

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