Nuxt Module architecture

The Nuxt Module Structure package allows you to create a modular architecture for your Nuxt applications, organizing your code into layers. This helps in maintaining a clean structure, especially for large applications. Nuxt Layers Documentation

You can find the official documentation for Nuxt Layers here: 🔗 Nuxt Layers

Installation

To initialize the main modules, run:

npm run init-modules ./ -i18n

Replace ./ with your desired path for the main modules. If you need to configure i18n, include it as shown.

Usage

When you run the initialization command, you will be prompted for:

1. Name of the main module: The default name is app.
2. Authentication module: The default is to create an authentication module.

Directory Structure

Upon execution, the following directory structure will be created:

modules/
  ├── app/
  │   ├── pages/
  │   ├── layouts/
  │   ├── components/
  │   └── store/
  └── auth/
      ├── pages/
      ├── layouts/
      ├── components/
      └── store/

Each module will automatically have its path added to the nuxtModuleConfig:

nuxtModuleConfig: {
  dir: {
        pages: "./pages",         // Custom pages directory
        layouts: "./layouts",     // Custom layouts directory
    //  plugins:"./plugins",      // Custom plugins directory  
    //  assets: "./assets",       // Custom assets directory
    //  middleware: "./middleware", // Custom middleware directory
  },
  extends: ["<layer-path>"]
}

Next step

Adding Separate Modules

To add a separate module in the future, run:

npm run add-module ./modules/app about-us

• ./modules/app :
• about-us:

You can specify additional configurations such as:

• i18n (if you need internationalization)
• store (if you need a pinia store)
• layout (if you need a layout)

npm run add-module ./modules/app about-us i18n store layout

Outbut

modules/
  ├── app/
  │   ├── pages/
  │   ├── layouts/
  │   ├── components/
  │   ├── store/
  │   └── about-us/   # Add the about-us module here
  │       ├── pages/
  │       ├── layouts/
  │       ├── components/
  │       ├── i18n/
          └── store/
  └── auth/
      ├── pages/
      ├── layouts/
      ├── components/
      └── store/

⚠️ Warning: Proper Module Structure

When adding a child module inside a parent module, always create a modules/ directory inside the parent module and place the child module inside it.

Correct Structure:

modules/
├── app/
│   ├── pages/
│   ├── layouts/
│   ├── components/
│   ├── store/
│   └── modules/   # Create this directory inside the parent module
│       ├── profile/  # Add child modules inside “modules/”
│       │   ├── pages/
│       │   ├── layouts/
│       │   ├── components/
│       │   └── store/
└── auth/
├── pages/
├── layouts/
├── components/
└── store/

❌ Incorrect Structure:

modules/
├── app/
│   ├── pages/
│   ├── layouts/
│   ├── components/
│   ├── store/
│   ├── profile/  # ❌ Do NOT add child modules directly here
└── auth/

Why is this important?

• Keeps the module hierarchy clean and organized.
• Prevents conflicts and confusion when adding new modules.
• Ensures consistency across the project

Module Auto-Generation

Page Creation

When adding a module, a page is automatically created inside the pages directory:

├── home/
│   ├── pages/
│         ├────/home.vue
│
│────────────────────

home.vue

  <template>
    <div class="">${filename} page</div>
  </template>
  <script lang="ts" setup>
  definePageMeta({
   // layout: "module-lay",
  });
  </script>

###homeStore.ts

  import { defineStore } from "pinia";
  const useModuleNameStore = defineStore("useModuleNameStore", () => {});
  export default useuseModuleNameStoreStore;

Is Store

###Store Setup

├── module-name/
│   ├── store/
│         ├────/moduleNameStore.ts
│
│────────────────────

###moduleNameStore.ts

  import { defineStore } from "pinia";
  const useModuleNameStore = defineStore("useModuleNameStore", () => {});
  export default useuseModuleNameStoreStore;

Layout Setup

Each module includes a layout file:

├── module-name/
│   ├── Layouts/
│         ├────/module-name-lay.vue
│
│────────────────────

###module-name-layout.vue

  <script setup lang="ts">
  // import parent layout what you want and wrap solt inside it to make sited layout 
  // import ParentLayout from "../../layouts/*****.vue" 
  </script>
  
  <template>
  <!-- <pearnt-layout>  -->
      <slot />
      <!--  <pearnt-layout> -->
  </template>

Is i18n

###If i18n is not initialized when creating modules, running add-module --i18n will automatically generate i18n.config.ts in the root project.

├── root/
│   ├── i18n/
│         ├────/global
│                 ├────/en.ts
│                  ├────/ar.ts
│         ├────/i18n.config.ts
│
│────────────────────

i18n.config.ts

export default {
}
import en from "./global/en"
import ar from "./global/ar"

export default defineI18nConfig(() => ({
  legacy: false,
  locale: "ar",
  fallbackLocale: "",
  messages: {
    en: {
      ...en,
    },
    ar: {
      ...ar,
    },
  },
}));

Global Translation Files (en.ts / ar.ts)

export default {
}

##Using i18n as a Composable in components

 import ar from "../i18n/ar";
 import en from "../i18n/en";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({
   messages: {
     en: en,
     ar: ar,
   },
 });