Module Information #

The module can have any structure, which means it can be a single functionality or a large and complex business logic. We divide modules at our discretion and it is also our decision what structure they will have.

Types #

Modules can be divided into two types. The type determines the place from which the module is loaded.

• local: Modules placed locally in the project in the default modules directory. These modules are only available in the project and are fully modifiable.

• npm: Modules hosted on external servers. Module is available when we install the package in the project (npm i module-name).
  These modules are unmodifiable and they are updated only by upgrading the npm package version.

Module naming #

Local #

The names of local modules are determined based on the directory structure. The adopted and recommended directory structure is based on the concept npm scope.

modules/
|-- @test/
    |-- my-local-module/
|-- users/

npm #

The names of the npm modules are consistent with the approach of creating npm packages. The modules in this section must be hosted on the exterbak server (npm, yarn, gitlab).

Example #

import { defineConfig } from 'nuxt-splitty'

export default defineConfig({
  modules: {
    npm: [
      '@scope/ui-module',
    ],
    local: [
      '@test/my-local-module',
      'cart',
    ],
  },
})

import { defineConfig } from 'nuxt-splitty'

export default defineConfig({
  modules: {
    npm: [
      '@scope/ui-module',
    ],
    local: [
      '@test/my-local-module',
      'cart',
    ],
  },
})

Directory structure #

Directory structure is very similar to the structure of the Nuxt 3.x project.

Directories:

• assets
  The assets directory contains uncompiled assets such as your styles, images, or fonts.

• components
  The components directory is where you put all your Vue.js components which are then imported into your pages.

• composables
  Put all your composables here. (You can speciafy auto import in the module config)

• config
  All module configuration files.

• defaults
  All module default vars.

• layouts
  Application layouts.

• locales
  Module i18n translations.

• middleware
  The middleware directory contains application middleware.
  Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layout).

• mixins
  All module mixin files.

• models
  All module models files.

• pages
  The pages directory contains your application's views and routes.

• plugins
  The plugins directory contains Javascript plugins that you want to run before instantiating the root Vue.js Application.

• store
  The store directory contains Vuex Store files.
  Directory with configuration under store are considered as store modules, with a name such as directory name.