nuxt logo

Docs

NuxtApp

En Nuxt, puedes acceder al contexto de la aplicación en tiempo de ejecución dentro de composables, componentes y plugins.

En Nuxt, puedes acceder al contexto de la aplicación en tiempo de ejecución dentro de composables, componentes y plugins.

Ver también v2.nuxt.com > docs > internals-glossary > context

Interfaz de Nuxt App

Ver también guide > going-further > internals#the-nuxtapp-interface

El Contexto de Nuxt

Muchos composables y utilidades, tanto integrados como creados por el usuario, pueden requerir acceso a la instancia de Nuxt. Esto no existe en todas partes de tu aplicación, porque se crea una nueva instancia en cada solicitud.

Actualmente, el contexto de Nuxt solo es accesible en plugins, hooks de Nuxt, middleware de Nuxt (si está envuelto en defineNuxtRouteMiddleware), y funciones de setup (en páginas y componentes).

Si un composable se llama sin acceso al contexto, puedes obtener un error que indica que 'Se llamó a un composable que requiere acceso a la instancia de Nuxt fuera de un plugin, hook de Nuxt, middleware de Nuxt o función de setup de Vue.' En ese caso, también puedes llamar explícitamente a funciones dentro de este contexto usando nuxtApp.runWithContext.

Accediendo a NuxtApp

Dentro de composables, plugins y componentes puedes acceder a nuxtApp con useNuxtApp():

composables/useMyComposable.ts
export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // acceder a la instancia de la aplicación nuxt en tiempo de ejecución
}

Si tu composable no siempre necesita nuxtApp o simplemente deseas verificar si está presente o no, ya que useNuxtApp lanza una excepción, puedes usar tryUseNuxtApp en su lugar.

Los plugins también reciben nuxtApp como el primer argumento para mayor comodidad.

Ver también guide > directory-structure > plugins

Proporcionando Ayudantes

Puedes proporcionar ayudantes para que sean utilizables en todos los composables y la aplicación. Esto generalmente ocurre dentro de un plugin de Nuxt.

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', (name) => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // Imprime "Hello name!"
Ver también guide > directory-structure > plugins#providing-helpers Ver también v2.nuxt.com > docs > directory-structure > plugins