gil
5f664546cf
- CLAUDE.md 운영 규칙 - wiki/ 정리된 지식 페이지 (Nuxt + Claude Code) - raw/ 원본 자료 - reference/ Nuxt 4.x 공식 문서 Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
3.3 KiB
Markdown
88 lines
3.3 KiB
Markdown
---
|
|
title: 'layers'
|
|
head.title: 'layers/'
|
|
description: Use the layers/ directory to organize and auto-register local layers within your application.
|
|
navigation.icon: i-vscode-icons-folder-type-nuxt
|
|
---
|
|
|
|
The `layers/` directory allows you to organize and share reusable code, components, composables, and configurations across your Nuxt application. Any layers within your project in the `layers/` directory will be automatically registered.
|
|
|
|
::note
|
|
The `layers/` directory auto-registration is available in Nuxt v3.12.0+.
|
|
::
|
|
|
|
::tip{icon="i-lucide-lightbulb"}
|
|
Layers are ideal for organizing large codebases with **Domain-Driven Design (DDD)**, creating reusable **UI libraries** or **themes**, sharing **configuration presets** across projects, and separating concerns like **admin panels** or **feature modules**.
|
|
::
|
|
|
|
## Structure
|
|
|
|
Each subdirectory within `layers/` is treated as a separate layer. A layer can contain the same structure as a standard Nuxt application.
|
|
|
|
::important
|
|
Every layer **must have** a `nuxt.config.ts` file to be recognized as a valid layer, even if it's empty.
|
|
::
|
|
|
|
```bash [Directory structure]
|
|
-| layers/
|
|
---| base/
|
|
-----| nuxt.config.ts
|
|
-----| app/
|
|
-------| components/
|
|
---------| BaseButton.vue
|
|
-------| composables/
|
|
---------| useBase.ts
|
|
-----| server/
|
|
-------| api/
|
|
---------| hello.ts
|
|
---| admin/
|
|
-----| nuxt.config.ts
|
|
-----| app/
|
|
-------| pages/
|
|
---------| admin.vue
|
|
-------| layouts/
|
|
---------| admin.vue
|
|
```
|
|
|
|
## Automatic Aliases
|
|
|
|
Named layer aliases to the `srcDir` of each layer are automatically created. You can access a layer using the `#layers/[name]` alias:
|
|
|
|
```ts
|
|
// Access the base layer
|
|
import something from '#layers/base/path/to/file'
|
|
|
|
// Access the admin layer
|
|
import { useAdmin } from '#layers/admin/composables/useAdmin'
|
|
```
|
|
|
|
::note
|
|
Named layer aliases were introduced in Nuxt v3.16.0.
|
|
::
|
|
|
|
## Layer Content
|
|
|
|
Each layer can include:
|
|
|
|
- [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) - Layer-specific configuration that will be merged with the main config
|
|
- [`app.config.ts`](/docs/4.x/directory-structure/app/app-config) - Reactive application configuration
|
|
- [`app/components/`](/docs/4.x/directory-structure/app/components) - Vue components (auto-imported)
|
|
- [`app/composables/`](/docs/4.x/directory-structure/app/composables) - Vue composables (auto-imported)
|
|
- [`app/utils/`](/docs/4.x/directory-structure/app/utils) - Utility functions (auto-imported)
|
|
- [`app/pages/`](/docs/4.x/directory-structure/app/pages) - Application pages
|
|
- [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) - Application layouts
|
|
- [`app/middleware/`](/docs/4.x/directory-structure/app/middleware) - Route middleware
|
|
- [`app/plugins/`](/docs/4.x/directory-structure/app/plugins) - Nuxt plugins
|
|
- [`server/`](/docs/4.x/directory-structure/server) - Server routes, middleware, and utilities
|
|
- [`shared/`](/docs/4.x/directory-structure/shared) - Shared code between app and server
|
|
|
|
## Priority Order
|
|
|
|
When multiple layers define the same resource (component, composable, page, etc.), the layer with **higher priority wins**. Layers are sorted alphabetically, with later letters having higher priority (Z > A).
|
|
|
|
To control the order, prefix directories with numbers: `1.base/`, `2.features/`, `3.admin/`.
|
|
|
|
:read-more{to="/docs/4.x/getting-started/layers#layer-priority"}
|
|
|
|
:video-accordion{title="Watch a video from Learn Vue about Nuxt Layers" videoId="lnFCM7c9f7I"}
|