You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

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

Renderer

ModuleContainer

Build

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

Builder

Generator

Général

Utils

Options

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 => {
  // ...
})