Dashboard UI

Brand the dashboard with your Nuxt UI theme, then add your product's name, pages, navigation, and settings. The shared dashboard components are in @nuxtagentic-pro/vue.

Applying Your Brand

Set the product name and icon shown on the sign-in page:

export default defineAppConfig({
  agentic: {
    branding: { name: 'Acme', icon: 'i-lucide-rocket' },
  },
})

createApp(AgenticApp, { branding: { name: 'Acme', icon: 'i-lucide-rocket' } })
  .use(createAgenticRouter())
  .use(ui)
  .mount('#app')

Customizing a Dashboard Page in Nuxt

Every dashboard page is a small file in the layer. Copy one into your app and edit it; Nuxt uses your copy instead of the layer's:

pnpm exec agentic eject                              # list the files you can copy
pnpm exec agentic eject pages/dashboard/agents.vue   # copy into app/pages/dashboard/agents.vue

Ejected files are yours, so upgrades no longer change them. Eject the smallest file that does the job, and compose the exported page components so the page itself keeps receiving fixes:

<script setup lang="ts">
import { AgenticAgentsPage } from '@nuxtagentic-pro/vue/pages'

definePageMeta({ layout: 'agentic' })
</script>

<template>
  <UAlert
    title="Agents run on the Acme plan."
    class="mb-4"
  />
  <AgenticAgentsPage />
</template>

Adding Pages, Navigation, and Settings

A UI feature adds dashboard routes, sidebar items, settings sections, and prompt commands:

import { defineAsyncComponent } from 'vue'
import { defineUiFeature } from '@nuxtagentic-pro/vue'

export const reports = defineUiFeature({
  id: 'reports',
  navigation: [{ label: 'Reports', icon: 'i-lucide-chart-line', to: '/dashboard/reports' }],
  routes: [
    { path: '/dashboard/reports', component: () => import('../components/ReportsPage.vue') },
  ],
  settingsSections: [
    {
      id: 'reports',
      area: 'workspace',
      component: defineAsyncComponent(() => import('../components/ReportSettings.vue')),
    },
  ],
})

Settings sections with area: 'workspace' receive workspace, role, active, and disabled props; sections with area: 'account' receive active and disabled. Register the feature:

import { reports } from '../features/reports'

export default defineNuxtPlugin(() => ({
  provide: { agenticUiFeatures: [reports] },
}))

import { AgenticApp, createAgenticRouter, defaultUiFeatures } from '@nuxtagentic-pro/vue'
import { reports } from './features/reports'

const features = [...defaultUiFeatures(), reports]

createApp(AgenticApp, { features }).use(createAgenticRouter({ features })).use(ui).mount('#app')

In Nuxt, pages come from your app/pages directory, so routes is not needed there: add app/pages/dashboard/reports.vue with definePageMeta({ layout: 'agentic' }) and the feature adds its sidebar item, settings sections, and prompt commands. In Void, createAgenticRouter registers the feature's routes.

To include a custom settings panel in the Done button and navigation guards, register its callbacks during setup:

import { useSettingsPanel } from '@nuxtagentic-pro/vue/settings'

useSettingsPanel({
  save: saveSettings,
  prepareLeave: () => !isBusy.value && !hasUnsavedToken.value,
})

Return true from saveSettings to save the draft; return false to keep the panel open. Either callback may be async. The page waits before saving another panel or navigating. Registration ends when the settings panel unmounts. Use props and emitted events for field changes.

Reusing Dashboard Building Blocks

@nuxtagentic-pro/vue exports the shell (AgenticApp, WorkspacePromptInput), every page under /pages, and settings building blocks such as SettingsSection under /settings. Inside the dashboard, useAgenticContext() gives the typed API client, request helpers, and branding.