モジュール

Nuxt モジュールを探る

Nuxt で本番レベルのアプリケーションを開発する際、フレームワークのコア機能だけでは不十分だと感じるかもしれません。Nuxt は構成オプションやプラグインで拡張できますが、これらのカスタマイズを複数のプロジェクトで維持するのは面倒で反復的で時間がかかります。一方で、すべてのプロジェクトのニーズを最初からサポートすると、Nuxt は非常に複雑で使いにくくなってしまいます。

これが、Nuxt がコアを拡張できるモジュールシステムを提供する理由の 1 つです。Nuxt モジュールは非同期関数であり、開発モードで nuxt dev を使用して Nuxt を起動するか、nuxt build でプロジェクトを本番用にビルドする際に順次実行されます。それらはテンプレートをオーバーライドしたり、webpack ローダーを構成したり、CSS ライブラリを追加したり、その他多くの有用なタスクを実行したりできます。

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

Nuxt モジュールを追加する

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

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example',

    // Load a local module
    './modules/example',

    // Add module with inline-options
    ['./modules/example', { token: '123' }],

    // Inline module definition
    async (inlineOptions, nuxt) => { },
  ],
})

Nuxt モジュールを作成する

誰もがモジュールを開発する機会があり、皆さんが何を構築するのか楽しみにしています。