nuxt logo

ドキュメント翻訳(非公式)

解決

Nuxt Kit はパスを解決するための一連のユーティリティを提供します。これらの関数は、現在のモジュールに対して、名前や拡張子が不明なパスを解決することを可能にします。

時には、現在のモジュールに対して、名前や拡張子が不明なパスを解決する必要があります。例えば、モジュールと同じディレクトリにあるプラグインを追加したい場合です。このようなケースを処理するために、nuxt はパスを解決するための一連のユーティリティを提供します。resolvePathresolveAlias は現在のモジュールに対してパスを解決するために使用されます。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: リゾルバに渡すオプション。このオブジェクトは以下のプロパティを持つことができます:

プロパティ必須説明
cwdstringfalseパスを解決するためのベース。デフォルトは Nuxt の rootDir。
aliasRecord<string, string>falseエイリアスのオブジェクト。デフォルトは Nuxt の設定されたエイリアス。
extensionsstring[]false試すファイル拡張子。デフォルトは Nuxt の設定された拡張子。
virtualbooleanfalseNuxt VFS に存在するファイル(例えば、Nuxt テンプレートとして)を解決するかどうか。
fallbackToOriginalbooleanfalse解決されたパスが存在しない場合に、正規化された入力パスを返す代わりに元のパスにフォールバックするかどうか。

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: リゾルバに渡すオプション。このオブジェクトは以下のプロパティを持つことができます:

プロパティ必須説明
cwdstringfalseパスを解決するためのベース。デフォルトは Nuxt の rootDir。
aliasRecord<string, string>falseエイリアスのオブジェクト。デフォルトは Nuxt の設定されたエイリアス。
extensionsstring[]false試すファイル拡張子。デフォルトは Nuxt の設定された拡張子。
virtualbooleanfalseNuxt VFS に存在するファイル(例えば、Nuxt テンプレートとして)を解決するかどうか。
fallbackToOriginalbooleanfalse解決されたパスが存在しない場合に、正規化された入力パスを返す代わりに元のパスにフォールバックするかどうか。

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'))
      }
    })
  },
})