Configuration
app.config.ts (xDashboard) and runtimeConfig reference for @xenterprises/nuxt-x-app.
Configuration
nuxt-x-app is configured in two places, both optional:
app/app.config.ts— dashboard navigation, sidebar, and header via thexDashboardnamespace.runtimeConfig.public.x.app— runtime values (base API URL, PDF license), typically set via environment variables.
app.config.ts — xDashboard
Navigation and header configuration lives in the consumer's app/app.config.ts. The file must live in app/, not the project root — at the root it is silently ignored and you get only Nuxt UI defaults.
// app/app.config.ts
export default defineAppConfig({
xDashboard: {
navigation: {
mode: 'sidebar',
sidebar: {
collapsible: true,
brand: { title: 'My App', logo: '/logo.svg', collapsedLogo: '/icon.svg' },
items: [
{ label: 'Dashboard', icon: 'i-lucide-layout-dashboard', to: '/' },
{ label: 'Users', icon: 'i-lucide-users', to: '/users' },
{
label: 'Settings',
icon: 'i-lucide-settings',
children: [
{ label: 'Profile', to: '/settings/profile' },
{ label: 'Security', to: '/settings/security' },
],
},
],
footerItems: [
{ label: 'Help', icon: 'i-lucide-help-circle', to: '/help' },
],
},
},
header: {
search: { enabled: true, shortcut: 'meta+k' },
actions: [
{ icon: 'i-lucide-bell', action: 'notifications', badge: 3 },
],
},
},
})
Schema Reference
| Key | Type | Default | Description |
|---|---|---|---|
xDashboard.navigation.mode | string | 'sidebar' | Navigation mode. |
xDashboard.navigation.sidebar.collapsible | boolean | true | Allow collapsing the sidebar. |
xDashboard.navigation.sidebar.collapsed | boolean | false | Start collapsed. |
xDashboard.navigation.sidebar.width / collapsedWidth | string | '256px' / '64px' | Sidebar widths. |
xDashboard.navigation.sidebar.brand | object | undefined | Brand block: title, logo, collapsedLogo. |
xDashboard.navigation.sidebar.items | NavItem[] | [] | Sidebar nav items (label, icon, to, children?, badge?). |
xDashboard.navigation.sidebar.footerItems | NavItem[] | [] | Items pinned to the sidebar footer. |
xDashboard.header.search | object | undefined | Header search: enabled, shortcut. |
xDashboard.header.actions | object[] | [] | Header action buttons (icon, action, badge?). |
These values are consumed at runtime by useXNavigation() and the XALayout* components. The layer ships working defaults, so every key is opt-out.
nuxt.config.ts — runtime values
Runtime values are provided by the layer under runtimeConfig.public.x.app and are normally set via environment variables — no nuxt.config.ts edit is required:
// nuxt.config.ts (only needed to override the env-var wiring)
export default defineNuxtConfig({
extends: ["@xenterprises/nuxt-x-app"],
runtimeConfig: {
public: {
x: {
app: {
apiUrl: process.env.NUXT_PUBLIC_X_APP_API_URL,
pdfLicense: process.env.NUXT_PUBLIC_X_APP_PDF_LICENSE,
},
},
},
},
})
Schema Reference
| Key | Type | Default | Description |
|---|---|---|---|
runtimeConfig.public.x.app.apiUrl | string | '' | Base API URL exposed to the client. |
runtimeConfig.public.x.app.pdfLicense | string | '' | License key for PDF generation features. |
Access these values at runtime via useRuntimeConfig():
const config = useRuntimeConfig()
config.public.x.app.apiUrl // Base API URL
config.public.x.app.pdfLicense // PDF license key
| Variable | Required | Description |
|---|---|---|
NUXT_PUBLIC_X_APP_API_URL | No | Base API URL exposed to the client. Accessed via useRuntimeConfig().public.x.app.apiUrl. |
NUXT_PUBLIC_X_APP_PDF_LICENSE | No | License key for PDF features. Accessed via useRuntimeConfig().public.x.app.pdfLicense. |
AI Context
package: "@xenterprises/nuxt-x-app"
config-keys: [xDashboard, runtimeConfig.public.x.app]
use-when: Configuring dashboard navigation/header (app.config.ts) or the base API URL and PDF license key (runtimeConfig) for the nuxt-x-app layer