レイヤー

Nuxt のコア機能の 1 つが、レイヤーと拡張サポートです。デフォルトの 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: [
    // Extend from a local layer
    '../base',
    // Extend from an installed npm package
    '@my-themes/awesome',
    // Extend from a git repository
    'github:my-themes/awesome#v1',
  ],
})

プライベート GitHub リポジトリから拡張する場合は、認証トークンを渡すこともできます

export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['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/c12GlobalComponentsunjs/gigetリモートレイヤーを拡張するためのものです。詳細と利用可能なすべてのオプションについては、ドキュメントを確認してください。

レイヤーの優先順位

複数のレイヤーを使用する場合、それらが互いをどのようにオーバーライドするかを理解することが重要です

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

export default defineNuxtConfig({
  extends: [
    // Highest priority (among extends)
    '../base',
    // Medium priority
    '@my-themes/awesome',
    // Lower priority
    'github:my-themes/awesome#v1',
  ],
  // Your project has the highest priority
})

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

例