Contexto

Nuxt Kit proporciona un conjunto de utilidades para ayudarte a trabajar con el contexto.

Los módulos de Nuxt te permiten mejorar las capacidades de Nuxt. Ofrecen una forma estructurada de mantener tu código organizado y modular. Si estás buscando descomponer tu módulo en componentes más pequeños, Nuxt ofrece las funciones useNuxt y tryUseNuxt. Estas funciones te permiten acceder convenientemente a la instancia de Nuxt desde el contexto sin tener que pasarla como un argumento.

Cuando trabajas con la función setup en los módulos de Nuxt, Nuxt ya se proporciona como el segundo argumento. Esto significa que puedes acceder a ella directamente sin necesidad de llamar a useNuxt().

`useNuxt`

Obtén la instancia de Nuxt desde el contexto. Lanzará un error si Nuxt no está disponible.

Uso

import { useNuxt } from '@nuxt/kit'

const setupSomeFeature = () => {
  const nuxt = useNuxt()

  // Ahora puedes usar la instancia de nuxt
  console.log(nuxt.options)
}

Tipo

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function useNuxt(): Nuxt

Valor de Retorno

La función useNuxt devuelve la instancia de Nuxt, que contiene todas las opciones y métodos disponibles en Nuxt.

Propiedad	Tipo	Descripción
`options`	`NuxtOptions`	La configuración de Nuxt resuelta.
`hooks`	`Hookable<NuxtHooks>`	El sistema de hooks de Nuxt. Permite registrar y escuchar eventos del ciclo de vida.
`hook`	`(name: string, (...args: any[]) => Promise<void> \| void) => () => void`	Atajo para `nuxt.hooks.hook`. Registra un solo callback para un hook de ciclo de vida específico.
`callHook`	`(name: string, ...args: any[]) => Promise<any>`	Atajo para `nuxt.hooks.callHook`. Dispara un hook de ciclo de vida manualmente y ejecuta todos los callbacks registrados.
`addHooks`	`(configHooks: NestedHooks) => () => void`	Atajo para `nuxt.hooks.addHooks`. Registra múltiples hooks a la vez.

Ejemplos

import { useNuxt } from '@nuxt/kit'

export const setupTranspilation = () => {
  const nuxt = useNuxt()

  if (nuxt.options.builder === '@nuxt/webpack-builder') {
    nuxt.options.build.transpile ||= []
    nuxt.options.build.transpile.push('xstate')
  }
}

`tryUseNuxt`

Obtén la instancia de Nuxt desde el contexto. Devolverá null si Nuxt no está disponible.

Uso

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

  if (nuxt) {
    // Ahora puedes usar la instancia de nuxt
    console.log(nuxt.options)
  } else {
    console.log('Nuxt no está disponible')
  }
}

Tipo

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function tryUseNuxt(): Nuxt | null

Valor de Retorno

La función tryUseNuxt devuelve la instancia de Nuxt si está disponible, o null si Nuxt no está disponible.

La instancia de Nuxt como se describe en la sección useNuxt.

Ejemplos

declare module '@nuxt/schema' {
  interface NuxtOptions {
    siteConfig: SiteConfig
  }
}
// ---cut---
import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

export const requireSiteConfig = (): SiteConfig => {
  const nuxt = tryUseNuxt()
  if (!nuxt) {
    return {}
  }
  return nuxt.options.siteConfig
}

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/kit/context