@tdv_layer/transfers v0.0.1
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.
2 months ago