Nuxt 3 Layers Architecture

Nuxt 3 introduces layers, a powerful feature for structuring your codebase into reusable and composable units. This is ideal for:

• Design systems or UI kits
• Multisite applications
• Shared logic between projects
• White-labeling

🚀 What is a Nuxt Layer?

A layer is essentially a Nuxt project that can be extended by another. You can define layouts, components, plugins, stores, etc., inside a base layer and reuse them across multiple Nuxt apps.

Your app (consumer) imports and extends the base layer (provider) via extends: ['./features/transfers'] in nuxt.config.ts.

🧠 Key Concepts

• A layer is just another Nuxt project (with its own nuxt.config.ts).
• You can override anything from the base layer in your consuming app.
• Layers support TypeScript, Pinia, composables, middleware, and more.

📁 Folder Structure Example

my-app/
├── app.config.ts
├── nuxt.config.ts      # <-- extends ./features/transfers
├── layers/
│   └── transfers/
│       ├── app.config.ts
│       ├── nuxt.config.ts
│       ├── components/
│       ├── layouts/
│       ├── pages/
│       ├── plugins/
│       └── stores/
├── pages/
├── components/
└── ...

📚 Official Documentation

• 📘 Nuxt Layers — Learn how to create and use Nuxt layers to organize your project or create reusable modules.
• 📦 Nuxt extends in nuxt.config.ts — How to extend another Nuxt app, layer, or configuration.
• 📁 Nuxt Directory Structure — Understand how Nuxt organizes files like components/, pages/, layouts/, etc.
• 📚 Nuxt Extend Concepts — Dive deeper into how Nuxt extensions work and advanced use cases.

Nuxt Layer Starter

Create Nuxt extendable layer with this GitHub template.

Setup

Make sure to install the dependencies:

pnpm install

Working on your layer

Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.

The .playground directory should help you on trying your layer during development.

Running pnpm dev will prepare and boot .playground directory, which imports your layer itself.

Distributing your layer

Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.

To do so, you only have to check if files in package.json are valid, then run:

npm publish --access public

Once done, your users will only have to run:

npm install --save your-layer

Then add the dependency to their extends in nuxt.config:

defineNuxtConfig({
  extends: 'your-layer'
})

Development Server

Start the development server on http://localhost:3000

npm dev

Checkout the deployment documentation for more information.