Nuxtレイヤーの作成

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テンプレートを使用してレイヤーを初期化できます。 これにより、構築できる基本的な構造が作成されます。 ターミナル内でこのコマンドを実行して開始します

npx nuxi init --template layer nuxt-layer

次の手順については、READMEの指示に従ってください。

レイヤーの公開

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

Gitリポジトリ

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

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

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に公開できます（公開または非公開）。

ヒント

相対パスとエイリアス

レイヤーのコンポーネントとコンポーザブルでエイリアス（~/や@/など）を使用してインポートする場合、エイリアスはユーザーのプロジェクトパスを基準に解決されることに注意してください。 回避策として、相対パスを使用してインポートできます。 名前付きレイヤーエイリアスのより良いソリューションに取り組んでいます。

また、レイヤーの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) {
      // 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を使用してサポートされます。 詳細については、ドキュメントとソースコードを確認してください。