Nuxtレイヤーは、モノレポ内やgitリポジトリ、npmパッケージから部分的なNuxtアプリケーションを共有および再利用するために使用できる強力な機能です。レイヤーの構造は標準的なNuxtアプリケーションとほぼ同じであるため、作成や管理が容易です。

最小限のNuxtレイヤーディレクトリには、レイヤーであることを示すためにnuxt.config.tsファイルを含める必要があります。

export default defineNuxtConfig({})

さらに、レイヤーディレクトリ内の特定の他のファイルは自動的にスキャンされ、このレイヤーを拡張するプロジェクトでNuxtによって使用されます。

• app/components/* - デフォルトのコンポーネントを拡張
• app/composables/* - デフォルトのコンポーザブルを拡張
• app/layouts/* - デフォルトのレイアウトを拡張
• app/middleware/* - デフォルトのミドルウェアを拡張
• app/pages/* - デフォルトのページを拡張
• app/plugins/* - デフォルトのプラグインを拡張
• app/utils/* - デフォルトのユーティリティを拡張
• app/app.config.ts - デフォルトのアプリ設定を拡張
• server/* - デフォルトのサーバーエンドポイントとミドルウェアを拡張
• nuxt.config.ts- デフォルトのnuxt設定を拡張

基本的な例

export default defineNuxtConfig({
  extends: [
    './base'
  ]
})

レイヤーの優先順位

複数のレイヤーから拡張する場合、優先順位の順序を理解することが重要です：

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

例えば：

export default defineNuxtConfig({
  extends: [
    './layers/base',      // 最も高い優先順位（extends内で）
    './layers/theme',     // 中程度の優先順位  
    './layers/custom'     // 低い優先順位
  ]
  // あなたのプロジェクトが最も高い優先順位
})

また、~~/layers/aや~~/layers/zのような自動スキャンされたレイヤーがある場合、完全な上書き順序は：base > theme > custom > z > a > あなたのプロジェクトとなります。

スターターテンプレート

始めるには、nuxt/starter/layerテンプレートを使用してレイヤーを初期化できます。これにより、構築を進めるための基本的な構造が作成されます。始めるには、ターミナルで次のコマンドを実行してください：

npm create nuxt -- --template layer nuxt-layer

次のステップについてはREADMEの指示に従ってください。

レイヤーの公開

リモートソースまたはnpmパッケージを使用してレイヤーを公開および共有できます。

Gitリポジトリ

Gitリポジトリを使用してNuxtレイヤーを共有できます。いくつかの例：

export default defineNuxtConfig({
  extends: [
    'github:username/repoName',        // GitHubリモートソース
    'github:username/repoName/base',   // /baseディレクトリ内のGitHubリモートソース
    'github:username/repoName#dev',    // devブランチからのGitHubリモートソース
    'github:username/repoName#v1.0.0', // v1.0.0タグからのGitHubリモートソース
    'gitlab:username/repoName',        // GitLabリモートソースの例
    'bitbucket:username/repoName',     // Bitbucketリモートソースの例
  ]
})

export default defineNuxtConfig({
  extends: [
    ['github:username/repoName', { install: true }]
  ]
})

npmパッケージ

Nuxtレイヤーを拡張したいファイルや依存関係を含むnpmパッケージとして公開できます。これにより、設定を他の人と共有したり、複数のプロジェクトで使用したり、プライベートに使用したりできます。

npmパッケージから拡張するには、モジュールがnpmに公開され、ユーザーのプロジェクトにdevDependencyとしてインストールされていることを確認する必要があります。その後、モジュール名を使用して現在のnuxt設定を拡張できます：

export default defineNuxtConfig({
  extends: [
    // スコープ付きのNodeモジュール
    '@scope/moduleName',
    // または単にモジュール名
    'moduleName'
  ]
})

レイヤーディレクトリをnpmパッケージとして公開するには、package.jsonに正しいプロパティが記入されていることを確認してください。これにより、パッケージが公開されるときにファイルが含まれるようになります。

{
  "name": "my-theme",
  "version": "1.0.0",
  "type": "module",
  "main": "./nuxt.config.ts",
  "dependencies": {},
  "devDependencies": {
    "nuxt": "^3.0.0"
  }
}

これで、モジュールをnpmに公開する準備が整いました。公開は公開またはプライベートのいずれかで行えます。

ヒント

名前付きレイヤーエイリアス

自動スキャンされたレイヤー（~~/layersディレクトリから）は自動的にエイリアスを作成します。例えば、~~/layers/testレイヤーに#layers/testでアクセスできます。

他のレイヤーに名前付きレイヤーエイリアスを作成したい場合は、レイヤーの設定で名前を指定できます。

export default defineNuxtConfig({
  $meta: {
    name: 'example',
  },
})

これにより、レイヤーを指す#layers/exampleというエイリアスが生成されます。

相対パスとエイリアス

レイヤーのコンポーネントやコンポーザブルでグローバルエイリアス（~/や@/など）を使用してインポートする場合、これらのエイリアスはユーザーのプロジェクトパスに相対的に解決されることに注意してください。回避策として、相対パスを使用してインポートするか、名前付きレイヤーエイリアスを使用してください。

また、レイヤーのnuxt.configファイルで相対パスを使用する場合（ネストされたextendsを除く）、それらはレイヤーではなくユーザーのプロジェクトに相対的に解決されます。回避策として、nuxt.configで完全に解決されたパスを使用してください：

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './app/assets/main.css')
  ]
})

Nuxtモジュールのマルチレイヤーサポート

カスタムマルチレイヤー処理をモジュールでサポートするために、内部配列nuxt.options._layersを使用できます。

export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // 各レイヤーのカスタムディレクトリの存在を確認して拡張できます
      console.log('カスタム拡張', layer.cwd, layer.config)
    }
  }
})

注意事項：

• _layers配列の先頭の項目は後のものより優先され、上書きします
• ユーザーのプロジェクトは_layers配列の最初の項目です

より深く理解する

設定の読み込みと拡張サポートはunjs/c12によって処理され、unjs/defuを使用してマージされ、リモートgitソースはunjs/gigetを使用してサポートされています。詳細を知るには、ドキュメントとソースコードを確認してください。