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
private-layers-ci.md - Consuming a private GitHub layer at build time: LAYER_* env-driven path resolution, GIGET_AUTH scope + build-vs-runtime placement, { install: true } for remote layers, failure modes (404 tarball)
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---56# Nuxt Layers78Shared foundation layers providing composables, models, repositories, and UI components across applications.910## Layer Stack1112**[layers.md](references/layers.md)** - Complete layer architecture, what each provides, how to extend1314**[private-layers-ci.md](references/private-layers-ci.md)** - Consuming a private GitHub layer at build time: `LAYER_*` env-driven path resolution, `GIGET_AUTH` scope + build-vs-runtime placement, `{ install: true }` for remote layers, failure modes (`404 tarball`)1516## Three-Layer Architecture1718```19x-ui → Extended UI components (XTable, XForm, XSlideover)20 ↓21nuxt-ui → UI primitives (modals, toasts, tabs, overlays)22 ↓23base → Core infrastructure (Model, Repository, composables, utils)24```2526## Extending Layers2728```typescript29// nuxt.config.ts30export default defineNuxtConfig({31 extends: [32 '../../../nuxt-layers/base',33 '../../../nuxt-layers/nuxt-ui',34 '../../../nuxt-layers/x-ui',35 ],36})37```3839## Importing from Layers4041```typescript42// Base layer imports43import Model from '#layers/base/app/models/Model'44import type { Castable, DataResponse } from '#layers/base/app/types'45import { BaseRepository } from '#layers/base/app/repositories/base-repository'46import { ModelHydrator } from '#layers/base/app/repositories/hydrators/model-hydrator'4748// Composables auto-imported49const leadApi = useRepository('leads')50const { start, stop } = useWait()51const { can } = usePermissions()52```5354## Base Layer Provides5556| Category | Items |57|----------|-------|58| **Composables** | `useRepository`, `useQuery`, `useFilterQuery`, `useWait`, `usePermissions`, `useFlash`, `useForm`, `useReactiveFilters`, `useRealtime`, `useShadowCache` |59| **Classes** | `Model`, `BaseRepository`, `ApiClient`, `ModelHydrator` |60| **Errors** | `ValidationError`, `ConflictError`, `TooManyRequestsError` |61| **Utils** | 49 utility functions (array, string, object, date, async) |6263## Nuxt-UI Layer Provides6465| Category | Items |66|----------|-------|67| **Composables** | `useModal`, `useSlideover`, `useConfirmationToast`, `useTabs`, `useDropdown`, `useAppHeader`, `useBreadcrumbs` |68| **Components** | `Copyable`, `SearchInput`, `SearchSelect`, `Rating`, `LoadingLine` |
leeovery