Adding Pages

How File-Based Routing Works

Nuxt uses file-based routing — every .vue file you create in the app/pages/ directory automatically becomes a route. There is no manual router configuration. The file path determines the URL:

Creating a New Dashboard Page

Create a new file at app/pages/dashboard/reports.vue. The page will immediately be available at /dashboard/reports and will automatically receive the default layout (sidebar + header):

That is all you need. The SharedPageHeader and SharedGlassCard components are auto-imported — no import statements required.

Dynamic Routes

Use square brackets in filenames for dynamic route segments. The parameter is accessible via useRoute().params:

For nested dynamic routes like /orders/123/edit, create the file at pages/orders/[id]/edit.vue.

Page Meta & Layout Assignment

All pages use the default layout (sidebar + header) unless you specify otherwise. Use definePageMeta to assign a different layout or add middleware:

Available Layouts

Adding to Sidebar Navigation

To show your new page in the sidebar, open app/utils/navigation.ts and add an entry to the appropriate navigation group:

// app/utils/navigation.ts
export const navigation: NavGroup[] = [
  {
    label: 'Dashboards',
    items: [
      { label: 'Overview', icon: 'i-lucide-layout-dashboard', to: '/dashboard' },
      { label: 'Analytics', icon: 'i-lucide-bar-chart-3', to: '/dashboard/analytics' },
      // Add your new page here:
      { label: 'Reports', icon: 'i-lucide-file-bar-chart', to: '/dashboard/reports' },
    ],
  },
  // ... other groups
]

Icons use the i-lucide-* prefix from the Lucide icon set. The sidebar renders all groups and items automatically.

Fetching Data

Use Nuxt's useFetch composable to load data from server API routes. This works during both SSR and client-side navigation:

The mock API routes at /api/* support query parameters for page, per_page, search, status, sort, and order.

Full Example: Adding a Tasks Page

Here is a complete example that creates a tasks page with a data table, fetches from an API, and includes search and status filtering:

Next Steps

Learn how to customize the dashboard's look and feel in the Theming guide, or see all available layouts in the Layouts reference.