A veces necesitas resolver rutas: relativas al módulo actual, con nombre o extensión desconocidos. Por ejemplo, puede que quieras añadir un plugin que se encuentra en el mismo directorio que el módulo. Para manejar estos casos, nuxt proporciona un conjunto de utilidades para resolver rutas. resolvePath y resolveAlias se utilizan para resolver rutas relativas al módulo actual. findPath se utiliza para encontrar el primer archivo existente en las rutas dadas. createResolver se utiliza para crear un resolver relativo a la ruta base.

resolvePath

Resuelve la ruta completa a un archivo o directorio respetando las opciones de alias y extensiones de Nuxt. Si la ruta no se puede resolver, se devolverá la ruta de entrada normalizada.

Uso

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

export default defineNuxtModule({
  async setup () {
    const entrypoint = await resolvePath('@unhead/vue')
    console.log(`El punto de entrada de Unhead es ${entrypoint}`)
  },
})

Tipo

function resolvePath (path: string, options?: ResolvePathOptions): Promise<string>

Parámetros

path: Una ruta a resolver.

options: Opciones para pasar al resolver. Este objeto puede tener las siguientes propiedades:

Ejemplos

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

Resuelve alias de rutas respetando las opciones de alias de Nuxt.

Tipo

function resolveAlias (path: string, alias?: Record<string, string>): string

Parámetros

path: Una ruta a resolver.

alias: Un objeto de alias. Si no se proporciona, se leerá de nuxt.options.alias.

findPath

Intenta resolver el primer archivo existente en las rutas dadas.

Uso

import { defineNuxtModule, findPath } from '@nuxt/kit'
import { join } from 'pathe'

export default defineNuxtModule({
  async setup (_, nuxt) {
    // Resolver main (app.vue)
    const mainComponent = await findPath([
      join(nuxt.options.srcDir, 'App'),
      join(nuxt.options.srcDir, 'app'),
    ])
  },
})

Tipo

function findPath (paths: string | string[], options?: ResolvePathOptions, pathType: 'file' | 'dir'): Promise<string | null>

Parámetros

paths: Una ruta o un array de rutas a resolver.

options: Opciones para pasar al resolver. Este objeto puede tener las siguientes propiedades:

createResolver

Crea un resolver relativo a la ruta base.

Uso

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

export default defineNuxtModule({
  async setup (_, nuxt) {
    const { resolve, resolvePath } = createResolver(import.meta.url)
  },
})

Tipo

function createResolver (basePath: string | URL): Resolver

Parámetros

basePath: Una ruta base desde la cual resolver. Puede ser una cadena o una URL.

Valor de Retorno

La función createResolver devuelve un objeto con las siguientes propiedades:

Ejemplos

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