# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-leeovery-agentic-skills-nuxt-layers`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leeovery](https://agentstack.voostack.com/s/leeovery)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leeovery](https://github.com/leeovery)
- **Source:** https://github.com/leeovery/agentic-skills/tree/main/nuxt/skills/nuxt-layers

## Install

```sh
agentstack add skill-leeovery-agentic-skills-nuxt-layers
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Nuxt Layers

Shared foundation layers providing composables, models, repositories, and UI components across applications.

## Layer Stack

**[layers.md](references/layers.md)** - Complete layer architecture, what each provides, how to extend

**[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`)

## 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

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '../../../nuxt-layers/base',
    '../../../nuxt-layers/nuxt-ui',
    '../../../nuxt-layers/x-ui',
  ],
})
```

## Importing from Layers

```typescript
// 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` |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [leeovery](https://github.com/leeovery)
- **Source:** [leeovery/agentic-skills](https://github.com/leeovery/agentic-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-leeovery-agentic-skills-nuxt-layers
- Seller: https://agentstack.voostack.com/s/leeovery
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.