config directory: | Nuxt Splitty

Each module needs several things to work properly.

`config` directory:

The greatest advantage of modules based on the NuxtMicroServices library is their advanced expandability. Each module contains a directory config in which all configurations related to this module can be found.

The most important configuration file is config/index.ts, which contains everything you need to load the module correctly. All other files are optional and depend on the purpose of the module. Some of the files kept in the config directory are just help files to keep order and structure in code.

Main configuration

The main configuration is placed in the config/index.ts file. The file exports the properties needed to correctly configure the module.

It is required file.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  /* module options */
}

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  /* module options */
}

Properties:

name
- Type: String
- Required: true
- Example: 'cart' | '@scope/cart' | '@local/demo'

Module name including scope, used for correct module loading. The file path is built on its base.

INFO

For more information about naming the modules here.

order
- Type: Number
- Required: false
- Default: 1000

The sequence of loading modules in the application. This may be important when the modules have a relationship with each other.

If the default value is not set to 1000, the modules will be loaded at the end.

INFO

The modules have a set integer value (e.g. order: 20).

aliases
- Type: Object
- Required: true

The main mechanism of communication between the modules.

By specifying the alias, we create a name by which we will referencing the resources of this module.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  aliases: {
    '@Core': './',
    '@CoreComponents': './components',
  },
}
import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  aliases: {
    '@Core': './',
    '@CoreComponents': './components',
  },
}

INFO

We can create any number of aliases, referring to different places in the module.

relations
- Type: Array
- Required: false

If the modules are linked to each other, the names of the linked modules must be given here.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  relations: [
    '@scope/ui',
    '@scope/media',
  ],
}

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  relations: [
    '@scope/ui',
    '@scope/media',
  ],
}

INFO

When the module is in this section and is not loaded, NuxtMicroServices will return a reference error.

replacements
- Type: Object
- Required: false

It defines the elements of the module that will be replaced by others.
Simple mechanism of mapping elements to be replaced with a new element.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  replacements: {
    '@Core/components/coreComponent': '/components/myComponent',
  },
}

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  replacements: {
    '@Core/components/coreComponent': '/components/myComponent',
  },
}

INFO

The item to be replaced can be any file and must exist in the application.

plugins
- Type: Array
- Required: false

It defines the plugins that are loaded globally into the application.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  plugins: [
    {
      src: './plugins/axios',
      mode: 'all', // 'all' | 'client' | 'server'
    },
  ],
};

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  plugins: [
    {
      src: './plugins/axios',
      mode: 'all', // 'all' | 'client' | 'server'
    },
  ],
};

INFO

The mode flag is set when you want to configure client- or server-specific plugins. By default, mode is set to all.

css
- Type: Array
- Required: false

Defines css styles that are defined globally for the entire application.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  css: [
    './assets/scss/reset.scss',
    './assets/scss/font-inter-ui.scss',
  ],
};

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  css: [
    './assets/scss/reset.scss',
    './assets/scss/font-inter-ui.scss',
  ],
};

INFO

More information here.

styleResources
- Type: Object
- Required: false

Share variables, mixins, functions across all style files (no @import needed). It Supports the sass/scss files only for now.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  styleResources: {
    scss: [
      './assets/scss/_vars.scss',
      './assets/scss/_mixins.scss',
    ],
  },
};

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  styleResources: {
    scss: [
      './assets/scss/_vars.scss',
      './assets/scss/_mixins.scss',
    ],
  },
};

WARNING

Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!

autoImports
- Type: Array
- Required: false

The property setups the nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them.

For example we have composable, that helps to inject some data into the components.

// composables/dialog.ts
import { DIALOG_INJECTION_KEY } from '@Core/defaults/dialog'

export const useDialog = () => {
  const $dialog = inject(DIALOG_INJECTION_KEY)

  return $dialog
}

// composables/dialog.ts
import { DIALOG_INJECTION_KEY } from '@Core/defaults/dialog'

export const useDialog = () => {
  const $dialog = inject(DIALOG_INJECTION_KEY)

  return $dialog
}

Let's setup auto import, to use this composable in the components.

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  autoImports: [{
    name: 'useDialog',
    // 'as' is optional. If not specified, the `name` will be used.
    as: 'useCoreDialog', 
    from: './composables/dialog',
  }],
};

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  // ...
  autoImports: [{
    name: 'useDialog',
    // 'as' is optional. If not specified, the `name` will be used.
    as: 'useCoreDialog', 
    from: './composables/dialog',
  }],
};

Usage:

<script lang="ts" setup>
  // components/example.vue
  const $dialog = useCoreDialog()

  const openDialog = () => {
    $dialog.open()
  }
</script>

<script lang="ts" setup>
  // components/example.vue
  const $dialog = useCoreDialog()

  const openDialog = () => {
    $dialog.open()
  }
</script>

Example:

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  name: 'core',
  aliases: {
    '@Core': './',
  },
  relations: [
    'ui',
  ],

  plugins: [
    {
      src: './plugins/dialog',
    },
  ],

  autoImports: [{
    name: 'useDialog',
    as: 'useCoreDialog',
    from: './composables/dialog',
  }],

  css: [
    './assets/scss/main.scss',
  ],

  styleResources: {
    scss: [
      './assets/scss/_vars.scss',
    ],
  },
}

import type { NMSModuleConfig } from 'nuxt-splitty'

export default <NMSModuleConfig>{
  name: 'core',
  aliases: {
    '@Core': './',
  },
  relations: [
    'ui',
  ],

  plugins: [
    {
      src: './plugins/dialog',
    },
  ],

  autoImports: [{
    name: 'useDialog',
    as: 'useCoreDialog',
    from: './composables/dialog',
  }],

  css: [
    './assets/scss/main.scss',
  ],

  styleResources: {
    scss: [
      './assets/scss/_vars.scss',
    ],
  },
}

Routing

File required if the module has pages and wants to define its own routing.
If the routing exists, you must create a file named routes.ts and put all the routing rules in it.

The array exported in the file is parsed and passed to the Nuxt.

// @Core/config/routes.ts
import type { NMSRoutesConfig } from 'nuxt-splitty'

export const ROUTE_NAME = {
  HOME: 'home',
  ABOUT: 'about',
}

const routes: NMSRoutesConfig = [
  {
    path: '/',
    name: ROUTE_NAME.HOME,
    file: './pages/home.vue',
  },
  {
    path: '/about',
    name: ROUTE_NAME.ABOUT,
    file: './pages/about.vue',
  },
]

export default routes

// @Core/config/routes.ts
import type { NMSRoutesConfig } from 'nuxt-splitty'

export const ROUTE_NAME = {
  HOME: 'home',
  ABOUT: 'about',
}

const routes: NMSRoutesConfig = [
  {
    path: '/',
    name: ROUTE_NAME.HOME,
    file: './pages/home.vue',
  },
  {
    path: '/about',
    name: ROUTE_NAME.ABOUT,
    file: './pages/about.vue',
  },
]

export default routes