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

使用例

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

使用方法

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

さらに、これらのレイヤーの srcDir への名前付きレイヤーエイリアスが自動的に作成されます。例えば、#layers/test を通じて ~~/layers/test レイヤーにアクセスできるようになります。

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

export default defineNuxtConfig({
  extends: [
    '../base',                     // ローカルレイヤーから拡張
    '@my-themes/awesome',          // npmパッケージから拡張
    'github:my-themes/awesome#v1', // gitリポジトリから拡張
  ]
})

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

export default defineNuxtConfig({
  extends: [
    // レイヤーごとの設定
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

Nuxtはリモートレイヤーを拡張するために unjs/c12 と unjs/giget を使用しています。詳細および利用可能なオプションについてはドキュメントをご覧ください。

実装例