nuxt-layers
Working with Nuxt layers (base, nuxt-ui, x-ui) that provide shared functionality. Use when understanding layer architecture, importing from layers, extending layer functionality, or creating new layers.
When & Why to Use This Skill
This Claude skill streamlines development within a Nuxt.js ecosystem by leveraging a sophisticated three-layer architecture (base, nuxt-ui, and x-ui). It enables developers to efficiently manage shared composables, UI components, and core infrastructure, ensuring high code reusability and architectural consistency across multiple web applications.
Use Cases
- Architecting scalable Nuxt.js projects using a modular layer-based approach to separate core business logic from UI primitives.
- Extending and customizing shared UI components from the x-ui and nuxt-ui layers to maintain design system consistency while meeting specific project needs.
- Implementing standardized data fetching and state management patterns using the base layer's pre-configured repositories, models, and hydrators.
- Accelerating development workflows by importing and utilizing a comprehensive suite of shared utility functions, error handlers, and composables like useRepository and usePermissions.
| name | nuxt-layers |
|---|---|
| description | Working with Nuxt layers (base, nuxt-ui, x-ui) that provide shared functionality. Use when understanding layer architecture, importing from layers, extending layer functionality, or creating new layers. |
Nuxt Layers
Shared foundation layers providing composables, models, repositories, and UI components across applications.
Layer Stack
layers.md - Complete layer architecture, what each provides, how to extend
Three-Layer Architecture
x-ui → Extended UI components (XTable, XForm, XSlideover)
↓
nuxt-ui → UI primitives (modals, toasts, tabs, overlays)
↓
base → Core infrastructure (Model, Repository, composables, utils)
Extending Layers
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
'../../../nuxt-layers/base',
'../../../nuxt-layers/nuxt-ui',
'../../../nuxt-layers/x-ui',
],
})
Importing from Layers
// Base layer imports
import Model from '#layers/base/app/models/Model'
import type { Castable, DataResponse } from '#layers/base/app/types'
import { BaseRepository } from '#layers/base/app/repositories/base-repository'
import { ModelHydrator } from '#layers/base/app/repositories/hydrators/model-hydrator'
// Composables auto-imported
const leadApi = useRepository('leads')
const { start, stop } = useWait()
const { can } = usePermissions()
Base Layer Provides
| Category | Items |
|---|---|
| Composables | useRepository, useQuery, useFilterQuery, useWait, usePermissions, useFlash, useForm, useReactiveFilters, useRealtime, useShadowCache |
| Classes | Model, BaseRepository, ApiClient, ModelHydrator |
| Errors | ValidationError, ConflictError, TooManyRequestsError |
| Utils | 49 utility functions (array, string, object, date, async) |
Nuxt-UI Layer Provides
| Category | Items |
|---|---|
| Composables | useModal, useSlideover, useConfirmationToast, useTabs, useDropdown, useAppHeader, useBreadcrumbs |
| Components | Copyable, SearchInput, SearchSelect, Rating, LoadingLine |