nuxt-x-app
Core Nuxt layer providing production-ready admin dashboard components, CRUD composables, and utilities built on Nuxt UI v4.
nuxt-x-app
Core admin dashboard layer for Nuxt 4. Provides 60+ components across 28 UI categories (activity logs, avatar, billing, bulk actions, buttons, cards, charts, command palette, data display, CRUD tables, kanban, modals, slideovers, notifications, and more) plus 16 auto-imported composables for CRUD, fetching, file uploads, toasts, notifications, and navigation. 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,
pdfLicense: process.env.NUXT_PUBLIC_X_APP_PDF_LICENSE,
},
},
},
},
});
What the layer provides
Components (auto-imported, X prefix)
| Category | Description |
|---|---|
| Activity | Chronological activity log feeds |
| Avatar | Avatar, group, and upload variants for user profiles |
| Billing | Stripe-powered pricing pages and payment management |
| Bulk Action | Batch operation toolbar for selected table rows |
| Buttons | Action buttons 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 (auto-imported)
| Composable | Description |
|---|---|
useXCrud(endpoint, options?) | Full CRUD lifecycle: items, loading, create, update, remove, fetch. |
useXFetch(url, options?) | Typed fetch wrapper with loading and error state. |
useXFileUpload(options?) | File upload with progress tracking and preview. |
useXToast() | Toast notifications: success, error, warning, info. |
useXNotifications() | Notification feed: notifications, unreadCount, markRead, markAllRead. |
useXKanban(options?) | Kanban state: columns, moveCard, addCard, removeCard. |
useDataTable(data, options?) | Table state: filtering, sorting, pagination, selection. |
useBreadcrumb() | Breadcrumb trail: items, push, pop, replace. |
useColumns(schema) | Column definitions from a schema descriptor. |
useConfirm() | Programmatic confirmation dialog: confirm(message) → Promise<boolean>. |
useCurrentUser() | Current authenticated user from session. |
useDateTime() | Date/time formatting utilities. |
useXInlineEdit(options?) | In-place editing state and save/cancel handlers. |
useXNavigation() | App navigation tree with active state tracking. |
useXTableColumns() | Reactive column visibility and ordering for tables. |
useAppLayout() | App layout state: sidebar open/closed, active section. |
Environment Variables
| 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. |
Minimal Usage Example
// pages/users.vue
<script setup>
const { items, loading, create, update, remove } = useXCrud("/api/users");
const { success, error } = useXToast();
async function deleteUser(id) {
await remove(id);
success("User deleted");
}
</script>
<template>
<XATable :rows="items" :loading="loading" @delete="deleteUser" />
</template>
AI Context
package: "@xenterprises/nuxt-x-app"
type: nuxt-layer
use-when: >
Starting a new Nuxt admin dashboard or SaaS app. Extend this layer to gain
60+ auto-imported XA-prefixed components, 10+ auto-imported composables, and
a pre-configured app shell — replacing weeks of boilerplate with a single
layer extension.
key-composables: [useXCrud, useXFetch, useXToast, useXNotifications, useXKanban, useDataTable, useBreadcrumb, useColumns, useConfirm]
key-components: [XATable, XACrudTable, XAKanban, XALayout, XADetailPanel, XAEmailComposer, XAWorkflowApproval]