nuxt-x-app
Comprehensive Nuxt layer with 149 production-ready admin dashboard components built on Nuxt UI v4.
nuxt-x-app
A comprehensive Nuxt layer providing 149 production-ready admin dashboard components, CRUD operations, and utilities built on Nuxt UI v4.
Installation
npm install @xenterprises/nuxt-x-app
// nuxt.config.ts
export default defineNuxtConfig({
extends: '@xenterprises/nuxt-x-app',
runtimeConfig: {
public: {
x: {
app: {
apiUrl: process.env.NUXT_PUBLIC_X_APP_API_URL,
},
},
},
},
})
Component Categories
All components are auto-imported with the XA prefix.
| Category | Description |
|---|---|
| Activity | Activity log feeds for recording and displaying chronological events |
| Avatar | Avatar, group, and upload variants for user profile display |
| Billing | Stripe-powered pricing pages and payment management |
| Bulk Action | Batch operation toolbar for selected table rows |
| Buttons | Action button components for common dashboard operations |
| Card | Stats, KPIs, progress, quota, revenue, and chart containers |
| Chart | Line, area, bar, donut, bubble, Gantt, and progress charts |
| Command | Keyboard-driven command palette with fuzzy search |
| Data | Numbers, key-value pairs, status badges, timelines, skeletons |
| Detail | Read-only detail panels with automatic type formatting |
| Document | File upload, list, preview, and management components |
| Rich email composer with autocomplete and attachments | |
| Fmt | Display formatters for dates, currency, phone, addresses |
| Forms | File uploads, rich editors, and search inputs |
| Inline | In-place field editing with optimistic updates |
| Kanban | Drag-and-drop Kanban board with configurable columns |
| Layout | App shell with sidebar, header, breadcrumbs, and navigation |
| Modal | General-purpose modals, confirmation dialogs, data viewers |
| Note | User notes with composition, filtering, and attachments |
| Notification | Bell icon with unread badge and slide-over notification panel |
| Permission | Renderless gate for role-based conditional rendering |
| Settings | Toggle preference rows and security feature items |
| Slide | Off-canvas slideover panels from any screen edge |
| State | Standardized empty, error, and loading state components |
| Table | Data tables with built-in CRUD, filtering, sorting, pagination |
| User | User cards, list items, dropdown menus, and role badges |
| Wall | Social feed with posts, reactions, threaded replies, and tags |
| Workflow | Multi-step approval workflows with sequential and parallel modes |
Composables
Key auto-imported composables:
// CRUD operations
const { items, loading, create, update, remove } = useXCrud('/api/users')
// File uploads
const { upload, progress } = useXUpload()
// Notifications
const { notify } = useXNotify()
Configuration
// app.config.ts
export default defineAppConfig({
xDashboard: {
navigation: {
items: [
{ label: 'Dashboard', icon: 'i-heroicons-home', to: '/dashboard' },
{ label: 'Users', icon: 'i-heroicons-users', to: '/users' },
]
}
}
})
Features
- 149 auto-imported components (prefix:
XA) - Full TypeScript support with exported types
- Dark mode via Nuxt UI
- Mobile-first responsive design
- Built-in CRUD composables
- Chart components via Nuxt Charts