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`