レイヤー

ソース
Nuxt Kitは、レイヤーとそのディレクトリ構造を扱うのに役立つユーティリティを提供します。

Nuxtレイヤーは、プロジェクト間で機能を共有および拡張するための強力な方法を提供します。モジュールでレイヤーを扱う場合、各レイヤーのディレクトリパスにアクセスする必要があることがよくあります。Nuxt Kitは、Nuxtアプリケーション内のすべてのレイヤーの解決済みディレクトリパスにアクセスするためのgetLayerDirectoriesユーティリティを提供します。

getLayerDirectories

Nuxtアプリケーション内のすべてのレイヤーの解決済みディレクトリパスを取得します。この関数は、プライベートなnuxt.options._layersプロパティに直接アクセスすることなく、レイヤーディレクトリにアクセスするための構造化された方法を提供します。

使用方法

import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // Access directories from all layers
    for (const [index, layer] of layerDirs.entries()) {
      console.log(`Layer ${index}:`)
      console.log(`  Root: ${layer.root}`)
      console.log(`  App: ${layer.app}`)
      console.log(`  Server: ${layer.server}`)
      console.log(`  Pages: ${layer.appPages}`)
      // ... other directories
    }
  },
})

タイプ

function getLayerDirectories (nuxt?: Nuxt): LayerDirectories[]

interface LayerDirectories {
  /** Nuxt rootDir (`/` by default) */
  readonly root: string
  /** Nitro source directory (`/server` by default) */
  readonly server: string
  /** Local modules directory (`/modules` by default) */
  readonly modules: string
  /** Shared directory (`/shared` by default) */
  readonly shared: string
  /** Public directory (`/public` by default) */
  readonly public: string
  /** Nuxt srcDir (`/app/` by default) */
  readonly app: string
  /** Layouts directory (`/app/layouts` by default) */
  readonly appLayouts: string
  /** Middleware directory (`/app/middleware` by default) */
  readonly appMiddleware: string
  /** Pages directory (`/app/pages` by default) */
  readonly appPages: string
  /** Plugins directory (`/app/plugins` by default) */
  readonly appPlugins: string
}

パラメーター

nuxt (オプション): レイヤーを取得するNuxtインスタンス。指定しない場合、関数は現在のNuxtコンテキストを使用します。

戻り値

getLayerDirectories関数は、アプリケーション内の各レイヤーに対応するLayerDirectoriesオブジェクトの配列を返します。

レイヤーの優先順位: レイヤーは優先順位順に並べられます。ここで、

  • 最初のレイヤーはユーザー/プロジェクトレイヤーです（最高の優先順位）。
  • 配列内の後のレイヤーを前のレイヤーが上書きします。
  • ベースレイヤーは配列の最後に表示されます（最低の優先順位）。

この順序は、ユーザー定義の構成とファイルがベースレイヤーからのものよりも優先されるというNuxtのレイヤー解決システムと一致しています。

LayerDirectories: レイヤーの解決済みディレクトリパスを含むオブジェクト。

プロパティタイプ説明
root文字列レイヤーのルートディレクトリ（rootDirに相当）
サーバー文字列Nitroサーバーサイドコードのサーバーディレクトリ
modules文字列ローカルモジュールディレクトリ
shared文字列クライアントとサーバーの両方で使用されるコードの共有ディレクトリ
app文字列レイヤーのソースディレクトリ（srcDirに相当）
public文字列静的アセットのパブリックディレクトリ
appLayouts文字列Vueレイアウトコンポーネントのレイアウトディレクトリ
appMiddleware文字列ルートミドルウェアのミドルウェアディレクトリ
appPages文字列ファイルベースルーティングのページディレクトリ
appPlugins文字列Nuxtプラグインのプラグインディレクトリ

例

すべてのレイヤーからのファイルを処理する

import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { resolve } from 'pathe'
import { globby } from 'globby'

export default defineNuxtModule({
  async setup () {
    const layerDirs = getLayerDirectories()

    // Find all component files across layers
    // Note: layerDirs[0] is the user layer (highest priority)
    // Later layers in the array have lower priority
    const componentFiles = []
    for (const [index, layer] of layerDirs.entries()) {
      const files = await globby('**/*.vue', {
        cwd: resolve(layer.app, 'components'),
        absolute: true,
      })
      console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components')
      componentFiles.push(...files)
    }
  },
})

複数のレイヤーからのテンプレートを追加する

import { addTemplate, defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { basename, resolve } from 'pathe'
import { existsSync } from 'node:fs'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // Add a config file from each layer that has one
    for (const dirs of layerDirs) {
      const configPath = resolve(dirs.app, 'my-module.config.ts')
      if (existsSync(configPath)) {
        addTemplate({
          filename: `my-module-${basename(dirs.root)}.config.ts`,
          src: configPath,
        })
      }
    }
  },
})

レイヤーの優先順位を尊重する

import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { resolve } from 'pathe'
import { existsSync, readFileSync } from 'node:fs'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // Find the first (highest priority) layer that has a specific config file
    // This respects the layer priority system
    let configContent = null
    for (const dirs of layerDirs) {
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        configContent = readFileSync(configPath, 'utf-8')
        console.log(`Using config from layer: ${dirs.root}`)
        break // Use the first (highest priority) config found
      }
    }

    // Alternative: Collect configs from all layers, with user layer taking precedence
    const allConfigs = {}
    for (const dirs of layerDirs.reverse()) { // Process from lowest to highest priority
      const configPath = resolve(dirs.app, 'my-config.json')
      if (existsSync(configPath)) {
        const config = JSON.parse(readFileSync(configPath, 'utf-8'))
        Object.assign(allConfigs, config) // Later assignments override earlier ones
      }
    }
  },
})

レイヤー固有のディレクトリを確認する

import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { existsSync } from 'node:fs'
import { resolve } from 'pathe'

export default defineNuxtModule({
  setup () {
    const layerDirs = getLayerDirectories()

    // Find layers that have a specific custom directory
    const layersWithAssets = layerDirs.filter((layer) => {
      return existsSync(resolve(layer.app, 'assets'))
    })

    console.log(`Found ${layersWithAssets.length} layers with assets directory`)
  },
})
getLayerDirectories関数には、WeakMapによるキャッシュが含まれており、同じレイヤーのディレクトリパスを繰り返し再計算するのを避けることで、複数回呼び出された場合のパフォーマンスを向上させます。
この関数によって返されるディレクトリパスは、一貫性のために常に末尾のスラッシュを含みます。