解決
Nuxt Kit はパスを解決するための一連のユーティリティを提供します。これらの関数は、現在のモジュールに対して、名前や拡張子が不明なパスを解決することを可能にします。
時には、現在のモジュールに対して、名前や拡張子が不明なパスを解決する必要があります。例えば、モジュールと同じディレクトリにあるプラグインを追加したい場合です。このようなケースを処理するために、nuxt はパスを解決するための一連のユーティリティを提供します。resolvePath
と resolveAlias
は現在のモジュールに対してパスを解決するために使用されます。findPath
は指定されたパスの中で最初に存在するファイルを見つけるために使用されます。createResolver
はベースパスに対してリゾルバを作成するために使用されます。
resolvePath
Nuxt のエイリアスと拡張子オプションを考慮して、ファイルまたはディレクトリへのフルパスを解決します。パスが解決できない場合、正規化された入力パスが返されます。
使用法
import { defineNuxtModule, resolvePath } from '@nuxt/kit'
export default defineNuxtModule({
async setup () {
const entrypoint = await resolvePath('@unhead/vue')
console.log(`Unhead entrypoint is ${entrypoint}`)
},
})
型
function resolvePath (path: string, options?: ResolvePathOptions): Promise<string>
パラメータ
path
: 解決するパス。
options
: リゾルバに渡すオプション。このオブジェクトは以下のプロパティを持つことができます:
プロパティ | 型 | 必須 | 説明 |
---|---|---|---|
cwd | string | false | パスを解決するためのベース。デフォルトは Nuxt の rootDir。 |
alias | Record<string, string> | false | エイリアスのオブジェクト。デフォルトは Nuxt の設定されたエイリアス。 |
extensions | string[] | false | 試すファイル拡張子。デフォルトは Nuxt の設定された拡張子。 |
virtual | boolean | false | Nuxt VFS に存在するファイル(例えば、Nuxt テンプレートとして)を解決するかどうか。 |
fallbackToOriginal | boolean | false | 解決されたパスが存在しない場合に、正規化された入力パスを返す代わりに元のパスにフォールバックするかどうか。 |
例
import { defineNuxtModule, resolvePath } from '@nuxt/kit'
import { join } from 'pathe'
const headlessComponents: ComponentGroup[] = [
{
relativePath: 'combobox/combobox.js',
chunkName: 'headlessui/combobox',
exports: [
'Combobox',
'ComboboxLabel',
'ComboboxButton',
'ComboboxInput',
'ComboboxOptions',
'ComboboxOption',
],
},
]
export default defineNuxtModule({
meta: {
name: 'nuxt-headlessui',
configKey: 'headlessui',
},
defaults: {
prefix: 'Headless',
},
async setup (options) {
const entrypoint = await resolvePath('@headlessui/vue')
const root = join(entrypoint, '../components')
for (const group of headlessComponents) {
for (const e of group.exports) {
addComponent(
{
name: e,
export: e,
filePath: join(root, group.relativePath),
chunkName: group.chunkName,
mode: 'all',
},
)
}
}
},
})
resolveAlias
Nuxt のエイリアスオプションを考慮してパスエイリアスを解決します。
型
function resolveAlias (path: string, alias?: Record<string, string>): string
パラメータ
path
: 解決するパス。
alias
: エイリアスのオブジェクト。提供されない場合、nuxt.options.alias
から読み取られます。
findPath
指定されたパスの中で最初に存在するファイルを解決しようとします。
使用法
import { defineNuxtModule, findPath } from '@nuxt/kit'
import { join } from 'pathe'
export default defineNuxtModule({
async setup (_, nuxt) {
// メイン (app.vue) を解決
const mainComponent = await findPath([
join(nuxt.options.srcDir, 'App'),
join(nuxt.options.srcDir, 'app'),
])
},
})
型
function findPath (paths: string | string[], options?: ResolvePathOptions, pathType: 'file' | 'dir'): Promise<string | null>
パラメータ
paths
: 解決するパスまたはパスの配列。
options
: リゾルバに渡すオプション。このオブジェクトは以下のプロパティを持つことができます:
プロパティ | 型 | 必須 | 説明 |
---|---|---|---|
cwd | string | false | パスを解決するためのベース。デフォルトは Nuxt の rootDir。 |
alias | Record<string, string> | false | エイリアスのオブジェクト。デフォルトは Nuxt の設定されたエイリアス。 |
extensions | string[] | false | 試すファイル拡張子。デフォルトは Nuxt の設定された拡張子。 |
virtual | boolean | false | Nuxt VFS に存在するファイル(例えば、Nuxt テンプレートとして)を解決するかどうか。 |
fallbackToOriginal | boolean | false | 解決されたパスが存在しない場合に、正規化された入力パスを返す代わりに元のパスにフォールバックするかどうか。 |
createResolver
ベースパスに対してリゾルバを作成します。
createResolver に関する Vue School のビデオを視聴してください。
使用法
import { defineNuxtModule, createResolver } from '@nuxt/kit'
export default defineNuxtModule({
async setup (_, nuxt) {
const { resolve, resolvePath } = createResolver(import.meta.url)
},
})
型
function createResolver (basePath: string | URL): Resolver
パラメータ
basePath
: 解決の基準となるベースパス。文字列または URL で指定できます。
戻り値
createResolver
関数は以下のプロパティを持つオブジェクトを返します:
プロパティ | 型 | 説明 |
---|---|---|
resolve | (path: string) => string | ベースパスに対してパスを解決する関数。 |
resolvePath | (path: string, options?: ResolvePathOptions) => Promise<string> | ベースパスに対してパスを解決し、Nuxt のエイリアスと拡張子オプションを考慮する関数。 |
例
import { createResolver, defineNuxtModule, isNuxt2 } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
const resolver = createResolver(import.meta.url)
nuxt.hook('modules:done', () => {
if (isNuxt2()) {
addPlugin(resolver.resolve('./runtime/plugin.vue2'))
} else {
addPlugin(resolver.resolve('./runtime/plugin.vue3'))
}
})
},
})
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/3.x/api/kit/resolving