Esta guía te ayuda a comprender mejor los aspectos internos de Nuxt para desarrollar nuevas soluciones e integraciones de módulos sobre Nuxt.

La Interfaz de Nuxt

Cuando inicias Nuxt en modo de desarrollo con nuxt dev o construyes una aplicación de producción con nuxt build, se creará un contexto común, referido internamente como nuxt. Este contiene opciones normalizadas fusionadas con el archivo nuxt.config, algún estado interno y un potente sistema de hooks impulsado por unjs/hookable que permite que diferentes componentes se comuniquen entre sí. Puedes pensar en él como el Núcleo del Constructor.

Este contexto está disponible globalmente para ser utilizado con los composables de Nuxt Kit. Por lo tanto, solo se permite que una instancia de Nuxt se ejecute por proceso.

Para extender la interfaz de Nuxt y engancharse en diferentes etapas del proceso de construcción, podemos usar Módulos de Nuxt.

Para más detalles, consulta el código fuente.

La Interfaz de NuxtApp

Al renderizar una página en el navegador o en el servidor, se creará un contexto compartido, referido como nuxtApp. Este contexto mantiene la instancia de vue, hooks de tiempo de ejecución y estados internos como ssrContext y payload para la hidratación. Puedes pensar en él como el Núcleo de Tiempo de Ejecución.

Este contexto puede ser accedido usando el composable useNuxtApp() dentro de los plugins de Nuxt y <script setup> y composables de vue. El uso global es posible para el navegador pero no en el servidor, para evitar compartir el contexto entre usuarios.

Dado que useNuxtApp lanza una excepción si el contexto no está disponible actualmente, si tu composable no siempre requiere nuxtApp, puedes usar tryUseNuxtApp en su lugar, que devolverá null en lugar de lanzar una excepción.

Para extender la interfaz nuxtApp y engancharse en diferentes etapas o acceder a contextos, podemos usar Plugins de Nuxt.

Consulta Nuxt App para más información sobre esta interfaz.

nuxtApp tiene las siguientes propiedades:

const nuxtApp = {
  vueApp, // la aplicación Vue global: https://vuejs.org/api/application.html#application-api

  versions, // un objeto que contiene las versiones de Nuxt y Vue

  // Estos te permiten llamar y agregar hooks de tiempo de ejecución de NuxtApp
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Solo accesible en el lado del servidor
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // Esto será convertido a cadena y pasado del servidor al cliente
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

Para más detalles, consulta el código fuente.

Contexto de Tiempo de Ejecución vs. Contexto de Construcción

Nuxt construye y empaqueta el proyecto usando Node.js pero también tiene un lado de tiempo de ejecución.

Aunque ambas áreas pueden ser extendidas, ese contexto de tiempo de ejecución está aislado del tiempo de construcción. Por lo tanto, no se supone que compartan estado, código o contexto aparte de la configuración de tiempo de ejecución.

nuxt.config y Módulos de Nuxt pueden ser usados para extender el contexto de construcción, y Plugins de Nuxt pueden ser usados para extender el tiempo de ejecución.

Al construir una aplicación para producción, nuxt build generará una construcción independiente en el directorio .output, independiente de nuxt.config y módulos de Nuxt.