Configuration & Theming
Configuration & Theming
Customize the appearance and behavior of your admin panel.
Module Options
All configuration goes in the autoAdmin key of your nuxt.config.ts:
export default defineNuxtConfig({
autoAdmin: {
prefix: '/admin',
branding: { /* ... */ },
permissions: { /* ... */ },
features: { /* ... */ },
resources: { /* ... */ },
customPages: [ /* ... */ ],
dashboard: { /* ... */ },
},
})
Branding
Customize the admin panel's visual identity:
autoAdmin: {
branding: {
// Admin panel title (shown in sidebar and browser tab)
title: 'My Admin Panel',
// Logo URL or path (shown in sidebar)
logo: '/admin-logo.svg',
// Favicon (optional)
favicon: '/admin-favicon.ico',
},
}
Logo Guidelines
- Size: Recommended 28x28px for best appearance
- Format: SVG, PNG, or any web-compatible image
- Path: Relative to
public/directory or absolute URL - Fallback: If no logo is provided, a default icon is shown
Prefix
Set the base URL for all admin routes:
autoAdmin: {
prefix: '/admin', // Default
}
All admin pages will be available under this prefix:
/admin- Dashboard/admin/users- Users list/admin/users/new- Create user/admin/users/1- User detail/admin/users/1/edit- Edit user
Features
Enable or disable specific features:
autoAdmin: {
features: {
// Bulk operations (select multiple items)
bulkActions: true, // Default: true
// Search functionality
search: true, // Default: true
// Advanced filters
filters: true, // Default: true
// Export data (CSV, JSON, etc.)
export: true, // Default: true
// Import data
import: false, // Default: false
// Audit log / history
auditLog: false, // Default: false
},
}
Note: Some features are not yet fully implemented and serve as placeholders for future development.
Permission Behavior
Control how the UI responds to permission restrictions:
autoAdmin: {
permissions: {
// How to handle buttons when user lacks permission
// 'disable' = show buttons but disable them (default)
// 'hide' = completely hide buttons
unauthorizedButtons: 'disable',
// How to handle sidebar items when user lacks permission
// 'hide' = completely hide items from sidebar (default)
// 'disable' = show items but in disabled state
unauthorizedSidebarItems: 'hide',
},
}
Button Behavior Options
unauthorizedButtons: 'disable' (default)
- Buttons are visible but disabled
- Forms show with all fields disabled
- User sees what they could do with proper permissions
- Better for internal users who might request access
unauthorizedButtons: 'hide'
- Buttons are completely hidden
- Forms show permission denied message
- Cleaner UI for external users
- Stricter access control
Sidebar Behavior Options
unauthorizedSidebarItems: 'hide' (default)
- Resources without permissions don't appear in sidebar
- Cleaner navigation
- Users only see what they can access
unauthorizedSidebarItems: 'disable'
- Resources without permissions appear grayed out
- Not clickable
- Shows what exists but is restricted
- Better discoverability
See Permissions for more details.
Access Control
Define who can access the admin panel:
autoAdmin: {
access: async (user) => {
// Only allow users with 'admin' role
return user?.role === 'admin'
},
}
If the function returns false, users are denied access to the entire admin panel.
Note: This is separate from resource-level permissions, which are handled by @websideproject/nuxt-auto-api.
Dashboard
Customize the admin dashboard (work in progress):
autoAdmin: {
dashboard: {
// Custom dashboard component
component: '~/components/CustomDashboard.vue',
// Dashboard widgets (future feature)
widgets: [
{
type: 'stat',
resource: 'users',
label: 'Total Users',
aggregation: 'count',
},
{
type: 'chart',
resource: 'posts',
groupBy: 'createdAt',
},
],
},
}
Theming with Nuxt UI
Since @websideproject/nuxt-auto-admin uses @nuxt/ui, you can customize the appearance using Nuxt UI's theming system:
App Config
// app.config.ts
export default defineAppConfig({
ui: {
primary: 'blue',
gray: 'slate',
},
})
Tailwind Configuration
// tailwind.config.ts
import type { Config } from 'tailwindcss'
export default {
theme: {
extend: {
colors: {
// Your custom colors
},
},
},
} satisfies Config
Color Mode
Dark mode is supported by default through Nuxt UI. Users can toggle between light and dark themes using the color mode switcher.
Custom CSS
Add custom styles to override or extend the default admin styles:
// nuxt.config.ts
export default defineNuxtConfig({
css: [
'~/assets/css/admin-custom.css',
],
})
/* assets/css/admin-custom.css */
.admin-sidebar {
/* Custom sidebar styles */
}
.admin-table {
/* Custom table styles */
}
Complete Example
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui', '@websideproject/nuxt-auto-api', '@websideproject/nuxt-auto-admin'],
autoAdmin: {
prefix: '/admin',
branding: {
title: 'Acme Corp Admin',
logo: '/acme-logo.svg',
favicon: '/admin-favicon.ico',
},
permissions: {
unauthorizedButtons: 'disable',
unauthorizedSidebarItems: 'hide',
},
features: {
bulkActions: true,
search: true,
filters: true,
export: true,
import: false,
auditLog: false,
},
access: async (user) => {
return user?.role === 'admin' || user?.role === 'moderator'
},
},
})
// app.config.ts
export default defineAppConfig({
ui: {
primary: 'indigo',
gray: 'neutral',
},
})
Next Steps
- Resource Configuration - Configure individual resources
- Permissions - Set up detailed permission handling
- Custom Pages - Add custom admin pages
Getting Started
Nuxt Auto Admin automatically generates a beautiful, type-safe admin panel from your Auto API resources with built-in CRUD operations, permissions, and customization options.
Resource Configuration
Configure how each resource appears and behaves in the admin panel.
