Nuxt レイヤーの作成

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',
  ],
})

<template>
  <BaseComponent />
</template>

export default defineNuxtConfig({
  // Extending from base nuxt.config.ts!
  app: {
    head: {
      title: 'Extending Configs is Fun!',
      meta: [
        { name: 'description', content: 'I am using the extends feature in Nuxt!' },
      ],
    },
  },
})

<template>
  <h1>Extending Components is Fun!</h1>
</template>

レイヤーの優先順位

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

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

例：

export default defineNuxtConfig({
  extends: [
    // Highest priority (among extends)
    './layers/base',
    // Medium priority
    './layers/theme',
    // Lower priority
    './layers/custom',
  ],
  // Your project has the highest priority
})

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

スターターテンプレート

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

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

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

レイヤーの公開

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

Gitリポジトリ

Nuxtレイヤーを共有するためにgitリポジトリを使用できます。いくつかの例

export default defineNuxtConfig({
  extends: [
    // GitHub Remote Source
    'github:username/repoName',
    // GitHub Remote Source within /base directory
    'github:username/repoName/base',
    // GitHub Remote Source from dev branch
    'github:username/repoName#dev',
    // GitHub Remote Source from v1.0.0 tag
    'github:username/repoName#v1.0.0',
    // GitLab Remote Source example
    'gitlab:username/repoName',
    // Bitbucket Remote Source example
    'bitbucket:username/repoName',
  ],
})

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

npmパッケージ

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

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

export default defineNuxtConfig({
  extends: [
    // Node Module with scope
    '@scope/moduleName',
    // or just the module name
    '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 'node:url'
import { dirname, join } from 'node: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) {
      // You can check for a custom directory existence to extend for each layer
      console.log('Custom extension for', layer.cwd, layer.config)
    }
  },
})

注記

• _layers配列の前の項目ほど優先度が高く、後の項目を上書きします。
• ユーザーのプロジェクトは_layers配列の最初の項目です。

さらに深く

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