Introduction aux modules Nuxt

Mieux comprendre les modules internes de Nuxt

Nuxt a une architecture entièrement modulaire qui permet aux développeurs d'étendre n'importe quelle partie de Nuxt Core en utilisant une API flexible.

Pour plus d'informations détaillées, veuillez consulter le Guide des modules si vous souhaitez développer votre propre module.

Cette section aide à se familiariser avec les modules internes de Nuxt et peut être utilisée comme référence pour mieux comprendre et écrire vos propres modules.

Noyau

Ces classes sont le cœur de Nuxt et doivent exister à la fois sur le runtime et le build time.

Nuxt

• Classe Nuxt
• Source: core/nuxt.js

Renderer

• Classe Renderer
• Source: vue-renderer/renderer.js

ModuleContainer

• Classe ModuleContainer
• Source: core/module.js

Build

Ces classes sont nécessaires que pour le mode build ou dev.

Builder

• Classe Builder
• Source: builder/builder.js

Generator

• Classe Generator
• Source: generator/generator.js

Général

Utils

• Source: utils/src

Options

• Source: config/options.js

Packaging & Usage

Par défaut, Nuxt exporte toutes les classes. Pour les importer :

import { Nuxt, Builder, Utils } from 'nuxt'

Patterns courant

Toutes les classes Nuxt font référence à l'instance nuxt et aux options, de cette façon nous avons toujours une API cohérente entre les classes pour accéder aux options et nuxt.

class SomeClass {
  constructor(nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options
  }

  someFunction() {
    // Nous avons accès à `this.nuxt` et `this.options`
  }
}

Les classes sont plugables donc elles doivent être enregistré en tant que plugin sur le conteneur principal nuxt pour avoir plus de hooks.

class FooClass {
  constructor(nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options

    this.nuxt.callHook('foo', this)
  }
}

On peut avoir un hook au module foo comme cela :

nuxt.hook('foo', foo => {
  // ...
})