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 |
1---2name: nuxt-layers3description: 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.4---5
6# Nuxt Layers
7
8Shared foundation layers providing composables, models, repositories, and UI components across applications.
9
10## Layer Stack
11
12**[layers.md](references/layers.md)** - Complete layer architecture, what each provides, how to extend
13
14## Three-Layer Architecture
15
16```
17x-ui → Extended UI components (XTable, XForm, XSlideover)
18 ↓
19nuxt-ui → UI primitives (modals, toasts, tabs, overlays)
20 ↓
21base → Core infrastructure (Model, Repository, composables, utils)
22```
23
24## Extending Layers
25
26```typescript
27// nuxt.config.ts
28export default defineNuxtConfig({
29 extends: [
30 '../../../nuxt-layers/base',
31 '../../../nuxt-layers/nuxt-ui',
32 '../../../nuxt-layers/x-ui',
33 ],
34})
35```
36
37## Importing from Layers
38
39```typescript
40// Base layer imports
41import Model from '#layers/base/app/models/Model'
42import type { Castable, DataResponse } from '#layers/base/app/types'
43import { BaseRepository } from '#layers/base/app/repositories/base-repository'
44import { ModelHydrator } from '#layers/base/app/repositories/hydrators/model-hydrator'
45
46// Composables auto-imported
47const leadApi = useRepository('leads')
48const { start, stop } = useWait()
49const { can } = usePermissions()
50```
51
52## Base Layer Provides
53
54| Category | Items |
55|----------|-------|
56| **Composables** | `useRepository`, `useQuery`, `useFilterQuery`, `useWait`, `usePermissions`, `useFlash`, `useForm`, `useReactiveFilters`, `useRealtime`, `useShadowCache` |
57| **Classes** | `Model`, `BaseRepository`, `ApiClient`, `ModelHydrator` |
58| **Errors** | `ValidationError`, `ConflictError`, `TooManyRequestsError` |
59| **Utils** | 49 utility functions (array, string, object, date, async) |
60
61## Nuxt-UI Layer Provides
62
63| Category | Items |
64|----------|-------|
65| **Composables** | `useModal`, `useSlideover`, `useConfirmationToast`, `useTabs`, `useDropdown`, `useAppHeader`, `useBreadcrumbs` |
66| **Components** | `Copyable`, `SearchInput`, `SearchSelect`, `Rating`, `LoadingLine` |
majiayu000