Introdução aos Módulos do Nuxt

Entenda melhor o interior do Nuxt

O Nuxt tem uma arquitetura completamente modular que permite os desenvolvedores estenderem qualquer parte do núcleo do Nuxt usando uma API flexível.

Consulte o Guia de Módulos para informações mais detalhadas caso estiver interessado em desenvolver o seu próprio módulo.

Esta secção ajuda a se familiarizar com o interior do Nuxt e pode ser usada como uma referência para entender ele melhor enquanto estiver escrevendo seus próprios módulos.

O Núcleo

Essas classes são o coração do Nuxt e devem existir em ambos tempo de execução e construção.

A classe Nuxt

• A classe Nuxt
• Código-fonte: core/nuxt.js

A classe Renderer

• A classe Renderer
• Código-fonte: vue-renderer/renderer.js

A classe ModuleContainer

• A classe ModuleContainer
• Código-fonte: core/module.js

A Construção

Essas classes apenas são necessárias para o modo de construção ou desenvolvimento.

A classe Builder

• A classe Builder
• Código-fonte: builder/builder.js

Generator

• A classe Generator
• Código-fonte: generator/generator.js

O Geral

Utils

• Código-fonte: utils/src

Options

• Código-fonte: config/options.js

O Empacotamento e Uso

O Nuxt exporta todas as classes por padrão. Para importar elas:

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

Padrões Gerais

Todas classes do Nuxt possuem uma referência a instância nuxt e as opções, desta maneira nós sempre teremos uma API consistente através das classes para acessar o options e o nuxt.

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

  someFunction() {
    // Nós temos acesso ao `this.nuxt` e ao `this.options`
  }
}

As classes são conectáveis assim elas devem registar um plugin no contentor nuxt principal para registar mais gatilhos.

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

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

Assim desta maneira nós podemos prender dentro do módulo foo:

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