最終更新日: 2023年08月15日

Layers / レイヤー

Nuxt 3の主要な特徴の1つは、レイヤーと拡張サポートです。デフォルトのNuxtアプリケーションを拡張して、コンポーネントやユーティリティ、設定を再利用することができます。レイヤーの構造は、通常のNuxtアプリケーションとほぼ同じであり、そのため、レイヤーを作成し、メンテナンスするのが簡単です。

いくつかの使用例

  • nuxt.configやapp.configを使用してプロジェクト間で再利用可能な設定プリセットを共有する
  • components/ディレクトリを使用してコンポーネントライブラリを作成する
  • composables/ディレクトリやutils/ディレクトリを使用してユーティリティとコンポーザブルライブラリを作成する
  • Nuxtのテーマを作成する
  • Nuxtモジュールプリセットを作成する
  • プロジェクト間で標準的なセットアップを共有する

nuxt.config.tsファイルにextendsプロパティを追加することで、レイヤーを拡張することができます。

  • nuxt.config.ts
  • ts
export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

Nuxtレイヤーの作成 / Authoring Nuxt Layers

詳細は、レイヤー作成ガイドをご参照ください。