SuperAPI AI Directory

nuxt-layers

General & other

View repository

Updated 10-15 23:58

About this skill

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