レイヤー
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()
// すべてのレイヤーからディレクトリにアクセス
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}`)
// ... 他のディレクトリ
}
}
})
型
// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[]
interface LayerDirectories {
/** Nuxt rootDir (デフォルトは`/`) */
readonly root: string
/** Nitroソースディレクトリ (デフォルトは`/server`) */
readonly server: string
/** ローカルモジュールディレクトリ (デフォルトは`/modules`) */
readonly modules: string
/** 共有ディレクトリ (デフォルトは`/shared`) */
readonly shared: string
/** 公開ディレクトリ (デフォルトは`/public`) */
readonly public: string
/** Nuxt srcDir (デフォルトは`/app/`) */
readonly app: string
/** レイアウトディレクトリ (デフォルトは`/app/layouts`) */
readonly appLayouts: string
/** ミドルウェアディレクトリ (デフォルトは`/app/middleware`) */
readonly appMiddleware: string
/** ページディレクトリ (デフォルトは`/app/pages`) */
readonly appPages: string
/** プラグインディレクトリ (デフォルトは`/app/plugins`) */
readonly appPlugins: string
}
パラメータ
nuxt
(オプション): レイヤーを取得するためのNuxtインスタンス。指定されていない場合、関数は現在のNuxtコンテキストを使用します。
戻り値
getLayerDirectories
関数は、アプリケーション内の各レイヤーに対するLayerDirectories
オブジェクトの配列を返します。
レイヤーの優先順位順序: レイヤーは優先順位に従って並べられます。
- 最初のレイヤーはユーザー/プロジェクトレイヤー(最も高い優先順位)
- 配列内で前のレイヤーが後のレイヤーを上書きします
- ベースレイヤーは配列の最後に表示されます(最も低い優先順位)
この順序はNuxtのレイヤー解決システムと一致し、ユーザー定義の設定やファイルがベースレイヤーのものより優先されます。
LayerDirectories
: レイヤーの解決済みディレクトリパスを含むオブジェクト。
プロパティ | 型 | 説明 |
---|---|---|
root | string | レイヤーのルートディレクトリ (rootDir に相当) |
server | string | Nitroサーバーサイドコードのサーバーディレクトリ |
modules | string | ローカルモジュールディレクトリ |
shared | string | クライアントとサーバーの両方で使用されるコードの共有ディレクトリ |
app | string | レイヤーのソースディレクトリ (srcDir に相当) |
public | string | 静的アセットのための公開ディレクトリ |
appLayouts | string | Vueレイアウトコンポーネントのためのレイアウトディレクトリ |
appMiddleware | string | ルートミドルウェアのためのミドルウェアディレクトリ |
appPages | string | ファイルベースのルーティングのためのページディレクトリ |
appPlugins | string | Nuxtプラグインのためのプラグインディレクトリ |
例
すべてのレイヤーからファイルを処理する:
// @errors: 2307
// ---cut---
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { resolve } from 'pathe'
import { globby } from 'globby'
export default defineNuxtModule({
async setup() {
const layerDirs = getLayerDirectories()
// レイヤー全体でコンポーネントファイルを見つける
// 注意: layerDirs[0]はユーザーレイヤー(最も高い優先順位)
// 配列内の後のレイヤーは優先順位が低い
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 { defineNuxtModule, getLayerDirectories, addTemplate } from '@nuxt/kit'
import { resolve, basename } from 'pathe'
import { existsSync } from 'fs'
export default defineNuxtModule({
async setup() {
const layerDirs = getLayerDirectories()
// 各レイヤーから設定ファイルを追加
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 'fs'
export default defineNuxtModule({
setup() {
const layerDirs = getLayerDirectories()
// 特定の設定ファイルを持つ最初の(最も高い優先順位の)レイヤーを見つける
// これはレイヤーの優先順位システムを尊重します
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 // 最初に見つかった(最も高い優先順位の)設定を使用
}
}
// 代替案: すべてのレイヤーから設定を収集し、ユーザーレイヤーが優先される
const allConfigs = {}
for (const dirs of layerDirs.reverse()) { // 最も低い優先順位から最も高い優先順位へ処理
const configPath = resolve(dirs.app, 'my-config.json')
if (existsSync(configPath)) {
const config = JSON.parse(readFileSync(configPath, 'utf-8'))
Object.assign(allConfigs, config) // 後の割り当てが前のものを上書き
}
}
}
})
レイヤー固有のディレクトリを確認する:
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
import { existsSync } from 'fs'
import { resolve } from 'pathe'
export default defineNuxtModule({
setup() {
const layerDirs = getLayerDirectories()
// 特定のカスタムディレクトリを持つレイヤーを見つける
const layersWithAssets = layerDirs.filter(layer => {
return existsSync(resolve(layer.app, 'assets'))
})
console.log(`Found ${layersWithAssets.length} layers with assets directory`)
}
})
getLayerDirectories
関数は、同じレイヤーに対してディレクトリパスを再計算することを避けるためにWeakMapを介したキャッシングを含んでおり、複数回呼び出されたときのパフォーマンスを向上させます。
この関数によって返されるディレクトリパスは、一貫性のために常に末尾にスラッシュを含みます。