layers

Use the layers/ directory to organize and auto-register local layers within your application.

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.

The layers/ directory auto-registration is available in Nuxt v3.12.0+.
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.

Every layer must have a nuxt.config.ts file to be recognized as a valid layer, even if it's empty.
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:

// Access the base layer
import something from '#layers/base/path/to/file'

// Access the admin layer
import { useAdmin } from '#layers/admin/composables/useAdmin'
Named layer aliases were introduced in Nuxt v3.16.0.

Layer Content

Each layer can include:

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 in Docs > 4 X > Getting Started > Layers#layer Priority.