# 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](https://nuxt.com/docs/getting-started/layers)  Documentation

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

## Installation

To initialize the main modules, run:

```bash
npm 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`:

```nuxt
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:

```bash
npm run add-module ./modules/app about-us
```
- **./modules/app** : <path-odd-added-module>
- **about-us**: <module-name>

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)

```bash
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
```nuxt
  <template>
    <div class="">${filename} page</div>
  </template>
  <script lang="ts" setup>
  definePageMeta({
   // layout: "module-lay",
  });
  </script>
```
---------------------------------------------------------------------------
###homeStore.ts
```js
  import { defineStore } from "pinia";
  const useModuleNameStore = defineStore("useModuleNameStore", () => {});
  export default useuseModuleNameStoreStore;
  ```
----------------------------------------------------------------------------------------
## Is Store
###Store Setup
```
├── module-name/
│   ├── store/
│         ├────/moduleNameStore.ts
│
│────────────────────
```
###moduleNameStore.ts
```js
  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
```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-path> 
```
├── root/
│   ├── i18n/
│         ├────/global
│                 ├────/en.ts
│                  ├────/ar.ts
│         ├────/i18n.config.ts
│
│────────────────────
```

i18n.config.ts  <root-path> 
```js
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)
```js
export default {
}
```
##Using i18n as a Composable in components
```js

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

```