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

ユースケース

• nuxt.configとapp.configを使用して、プロジェクト間で再利用可能な設定プリセットを共有
• app/components/ディレクトリを使用してコンポーネントライブラリを作成
• app/composables/とapp/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を使用します。詳細と利用可能なオプションについてはドキュメントを確認してください。

レイヤーの優先順位

複数のレイヤーを使用する場合、それらがどのように上書きされるかを理解することが重要です：

1. extends内のレイヤー - 先にあるエントリが優先度が高い（最初が2番目を上書き）
2. ~~/layersディレクトリからの自動スキャンされたローカルレイヤー - アルファベット順（ZがAを上書き）
3. あなたのプロジェクト - スタック内で最も高い優先度を持ち、常に他のレイヤーを上書きします

export default defineNuxtConfig({
  extends: [
    '../base',                     // 最も高い優先度（extends内で）
    '@my-themes/awesome',          // 中程度の優先度
    'github:my-themes/awesome#v1', // 低い優先度
  ]
  // あなたのプロジェクトが最も高い優先度を持ちます
})

これは、複数のレイヤーが同じコンポーネント、設定、またはファイルを定義している場合、優先度が高いものが使用されることを意味します。

例