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

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

export default defineNuxtConfig({})

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

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

基本的な例

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

スターターテンプレート

始めるには、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, './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 を使用してサポートされています。詳細を知るには、ドキュメントやソースコードを確認してください。