Create Feature

1. Just create a folder in @features and add a nuxt.config.ts bellows inside it.
2. Add a nuxt.config.ts file inside created folder.

A minimal feature directory should contain a nuxt.config.ts file to indicate it is a layer.

export default defineNuxtConfig({});

3. Add the extends property to your nuxt.config file.

//nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    "./@features/my-feature", // add my-feature layer
  ],
});

Each directory in @features can be considered a "mini" Nuxt application. It can contain all the standard Nuxt files and directories, which will be automatically checked and utilized to extend your application's functionalities.

Feature directory structure

• components/* - The components/ directory is where you put all your Vue components.
• composables/* - Use the composables/ directory to auto-import your Vue composables into your application.
• layouts/* - Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.
• pages/* - Nuxt provides file-based routing to create routes within your web application.
• plugins/* - Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application.
• server/* - The server/ directory is used to register API and server handlers to your application.
• utils/* - Use the utils/ directory to auto-import your utility functions throughout your application.
• nuxt.config.ts - Nuxt can be easily configured with a single nuxt.config file.
• app.config.ts - Expose reactive configuration within your application with the App Config file.