Nuxt モジュールの紹介

Nuxt 内部の理解を深める

Nuxt は完全にモジュール化されたアーキテクチャを備えているため、開発者は柔軟な API を使用して Nuxt Core の任意の部分を拡張できます。

独自のモジュール開発に興味がある場合はモジュールガイド のドキュメントを参照してください。

このセクションは Nuxt 内部に詳しくなるために役立ち、独自のモジュールを作成する際に Nuxt 内部をよりよく理解するためのリファレンスとして使えます。

コア

これらのクラスは Nuxt の心臓部であり、実行時とビルド時の両方に存在する必要があります。

Nuxt

• Nuxt クラス
• ソース: core/nuxt.js

Renderer

• Renderer クラス
• ソース: vue-renderer/renderer.js

ModuleContainer

• ModuleContainer クラス
• ソース: core/module.js

Build

これらのクラスは、ビルドモードまたは開発モードでのみ必要です。

Builder

• Builder クラス
• ソース: builder/builder.js

Generator

• Generator クラス
• ソース: generator/generator.js

共通

Utils

• ソース: utils/src

Options

• ソース: config/options.js

パッケージング＆使用方法

Nuxt はデフォルトですべてのクラスをエクスポートします。それらをインポートするには：

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

共通のパターン

すべての Nuxt クラスには nuxt インスタンスとオプションへの参照を持ちます。そのため options と nuxt にアクセスするためのクラス間で一貫した API を常に持ちます。

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

  someFunction() {
    // `this.nuxt` と `this.options` へアクセスできます
  }
}

クラスは プラガブル なのでより多くのフックを登録するには nuxt コンテナにプラグインを登録する必要があります。

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

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

以下のように foo モジュールにフックできます：

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