モジュール

Nuxtは、フレームワークのコアを拡張し、統合を簡素化するためのモジュールシステムを提供しています。すでにNuxtモジュールがある場合、すべてをゼロから開発したりボイラープレートを維持する必要はありません。Nuxtモジュールを追加することは、nuxt.configを使用して可能です。

Nuxtモジュールの探索

Nuxtを使用して本番向けのアプリケーションを開発する際には、フレームワークのコア機能だけでは十分でない場合があります。Nuxtは設定オプションやプラグインを使って拡張することができますが、これらのカスタマイズを複数のプロジェクトで維持することは手間がかかり、繰り返しの作業で時間がかかることがあります。一方で、すべてのプロジェクトのニーズに対応することができるようにすると、Nuxtは非常に複雑で使いづらくなる可能性があります。

これがNuxtがモジュールシステムを提供する理由の一つです。Nuxtモジュールは非同期関数であり、nuxi devを使用して開発モードでNuxtを起動したり、nuxi buildを使用してプロジェクトを本番用にビルドする際に順次実行されます。これらのモジュールはテンプレートを上書きしたり、Webpackのローダーを設定したり、CSSライブラリを追加したり、他にも多くの便利なタスクを実行することができます。

Nuxtモジュールは、何よりも嬉しいことに、npmパッケージとして配布することができます。これにより、モジュールを複数のプロジェクトで再利用したり、コミュニティと共有したりすることができます。これにより、高品質なアドオンのエコシステムを構築し、共有できるようになります。

モジュールのプロパティ

モジュールをインストールした後、それらをnuxt.config.tsファイルのmodulesプロパティに追加できます。モジュールの開発者は通常、使用方法に関する追加の手順や詳細を提供します。

export default defineNuxtConfig({
  modules: [
    // パッケージ名を使用する（推奨）
    '@nuxtjs/example',

    // ローカルモジュールを読み込む
    './modules/example',

    // インラインオプションでモジュールを追加する
    ['./modules/example', { token: '123' }]

    // インラインモジュールの定義
    async (inlineOptions, nuxt) => { }
  ]
})

モジュール開発

誰もがモジュールを開発する機会があります。モジュールの開発については、モジュール作成者ガイドを読んでください。