レイヤー

Nuxtの主要機能の一つは、レイヤーと拡張機能のサポートです。デフォルトのNuxtアプリケーションを拡張して、コンポーネント、ユーティリティ、および設定を再利用できます。レイヤー構造は標準のNuxtアプリケーションとほぼ同じであるため、作成と保守が容易です。

ユースケース

• nuxt.config と app.config を使用して、再利用可能な設定プリセットをプロジェクト間で共有する
• components/ ディレクトリを使用して、コンポーネントライブラリを作成する
• composables/ と utils/ ディレクトリを使用して、ユーティリティとコンポーザブルライブラリを作成する
• Nuxtモジュールプリセットを作成する
• プロジェクト間で標準セットアップを共有する
• Nuxtテーマを作成する
• モジュールアーキテクチャを実装し、大規模プロジェクトでドメイン駆動設計（DDD）パターンをサポートすることにより、コードの構成を強化する。

使用方法

デフォルトでは、プロジェクト内の ~/layers ディレクトリにあるレイヤーは、プロジェクトのレイヤーとして自動的に登録されます。

さらに、extends プロパティを nuxt.config ファイルに追加することで、レイヤーから拡張できます。

export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

プライベートGitHubリポジトリから拡張する場合は、認証トークンを渡すこともできます。

export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

Nuxtは、リモートレイヤーの拡張に unjs/c12 と unjs/giget を使用します。詳細と利用可能なすべてのオプションについては、ドキュメントを参照してください。

例