Hooks de Ciclo de Vida

Nuxt proporciona un sistema de hooks poderoso para expandir casi todos los aspectos utilizando hooks.

Ver también guide > going-further > hooks

Hooks de la Aplicación (en tiempo de ejecución)

Consulta el código fuente de la aplicación para ver todos los hooks disponibles.

Hook	Argumentos	Entorno	Descripción
`app:created`	`vueApp`	Servidor y Cliente	Se llama cuando se crea la instancia inicial de `vueApp`.
`app:error`	`err`	Servidor y Cliente	Se llama cuando ocurre un error fatal.
`app:error:cleared`	`{ redirect? }`	Servidor y Cliente	Se llama cuando ocurre un error fatal.
`vue:setup`	-	Servidor y Cliente	Se llama cuando se inicializa la configuración de la raíz de Nuxt. Este callback debe ser sincrónico.
`vue:error`	`err, target, info`	Servidor y Cliente	Se llama cuando un error de vue se propaga al componente raíz. Aprende más.
`app:rendered`	`renderContext`	Servidor	Se llama cuando se completa el renderizado SSR.
`app:redirected`	-	Servidor	Se llama antes de la redirección SSR.
`app:beforeMount`	`vueApp`	Cliente	Se llama antes de montar la aplicación, solo se llama en el lado del cliente.
`app:mounted`	`vueApp`	Cliente	Se llama cuando la aplicación Vue está inicializada y montada en el navegador.
`app:suspense:resolve`	`appComponent`	Cliente	En el evento resuelto de Suspense.
`app:manifest:update`	`{ id, timestamp }`	Cliente	Se llama cuando se detecta una versión más nueva de tu aplicación.
`app:data:refresh`	`keys?`	Cliente	Se llama cuando se llama a `refreshNuxtData`.
`link:prefetch`	`to`	Cliente	Se llama cuando se observa que un `<NuxtLink>` está siendo prefetch.
`page:start`	`pageComponent?`	Cliente	Se llama en Suspense dentro del evento pendiente de `NuxtPage`.
`page:finish`	`pageComponent?`	Cliente	Se llama en Suspense dentro del evento resuelto de `NuxtPage`.
`page:loading:start`	-	Cliente	Se llama cuando se está ejecutando el `setup()` de la nueva página.
`page:loading:end`	-	Cliente	Se llama después de `page:finish`
`page:transition:finish`	`pageComponent?`	Cliente	Después del evento de transición de página onAfterLeave.
`dev:ssr-logs`	`logs`	Cliente	Se llama con un array de logs del lado del servidor que se han pasado al cliente (si `features.devLogs` está habilitado).
`page:view-transition:start`	`transition`	Cliente	Se llama después de que se llama a `document.startViewTransition` cuando el soporte experimental de viewTransition está habilitado.

Hooks de Nuxt (en tiempo de construcción)

Consulta el código fuente del esquema para ver todos los hooks disponibles.

Hook	Argumentos	Descripción
`kit:compatibility`	`compatibility, issues`	Permite extender las comprobaciones de compatibilidad.
`ready`	`nuxt`	Se llama después de la inicialización de Nuxt, cuando la instancia de Nuxt está lista para trabajar.
`close`	`nuxt`	Se llama cuando la instancia de Nuxt se cierra de manera ordenada.
`restart`	`{ hard?: boolean }`	Se llama para reiniciar la instancia actual de Nuxt.
`modules:before`	-	Se llama durante la inicialización de Nuxt, antes de instalar los módulos del usuario.
`modules:done`	-	Se llama durante la inicialización de Nuxt, después de instalar los módulos del usuario.
`app:resolve`	`app`	Se llama después de resolver la instancia de `app`.
`app:templates`	`app`	Se llama durante la generación de `NuxtApp`, para permitir personalizar, modificar o agregar nuevos archivos al directorio de construcción (ya sea virtualmente o escritos en `.nuxt`).
`app:templatesGenerated`	`app`	Se llama después de que las plantillas se compilan en el sistema de archivos virtual (vfs).
`build:before`	-	Se llama antes del constructor de paquetes de Nuxt.
`build:done`	-	Se llama después de que el constructor de paquetes de Nuxt está completo.
`build:manifest`	`manifest`	Se llama durante la construcción del manifiesto por Vite y webpack. Esto permite personalizar el manifiesto que Nitro usará para renderizar etiquetas `<script>` y `<link>` en el HTML final.
`builder:generateApp`	`options`	Se llama antes de generar la aplicación.
`builder:watch`	`event, path`	Se llama en tiempo de construcción en desarrollo cuando el observador detecta un cambio en un archivo o directorio en el proyecto.
`pages:extend`	`pages`	Se llama después de que las rutas de las páginas se escanean desde el sistema de archivos.
`pages:resolved`	`pages`	Se llama después de que las rutas de las páginas se han aumentado con metadatos escaneados.
`pages:routerOptions`	`{ files: Array<{ path: string, optional?: boolean }> }`	Se llama al resolver archivos `router.options`. Los elementos posteriores en el array sobrescriben a los anteriores.
`server:devHandler`	`handler`	Se llama cuando el middleware de desarrollo se está registrando en el servidor de desarrollo de Nitro.
`imports:sources`	`presets`	Se llama en la configuración permitiendo que los módulos extiendan las fuentes.
`imports:extend`	`imports`	Se llama en la configuración permitiendo que los módulos extiendan las importaciones.
`imports:context`	`context`	Se llama cuando se crea el contexto de unimport.
`imports:dirs`	`dirs`	Permite extender los directorios de importación.
`components:dirs`	`dirs`	Se llama dentro de `app:resolve` permitiendo extender los directorios que se escanean para componentes auto-importables.
`components:extend`	`components`	Permite extender nuevos componentes.
`nitro:config`	`nitroConfig`	Se llama antes de inicializar Nitro, permitiendo la personalización de la configuración de Nitro.
`nitro:init`	`nitro`	Se llama después de que Nitro está inicializado, lo que permite registrar hooks de Nitro e interactuar directamente con Nitro.
`nitro:build:before`	`nitro`	Se llama antes de construir la instancia de Nitro.
`nitro:build:public-assets`	`nitro`	Se llama después de copiar los activos públicos. Permite modificar los activos públicos antes de que se construya el servidor Nitro.
`prerender:routes`	`ctx`	Permite extender las rutas a ser pre-renderizadas.
`build:error`	`error`	Se llama cuando ocurre un error en tiempo de construcción.
`prepare:types`	`options`	Se llama antes de que `@nuxt/cli` escriba `.nuxt/tsconfig.json` y `.nuxt/nuxt.d.ts`, permitiendo la adición de referencias y declaraciones personalizadas en `nuxt.d.ts`, o modificar directamente las opciones en `tsconfig.json`.
`listen`	`listenerServer, listener`	Se llama cuando el servidor de desarrollo está cargando.
`schema:extend`	`schemas`	Permite extender esquemas predeterminados.
`schema:resolved`	`schema`	Permite extender el esquema resuelto.
`schema:beforeWrite`	`schema`	Se llama antes de escribir el esquema dado.
`schema:written`	-	Se llama después de que el esquema está escrito.
`vite:extend`	`viteBuildContext`	Permite extender el contexto predeterminado de Vite.
`vite:extendConfig`	`viteInlineConfig, env`	Permite extender la configuración predeterminada de Vite.
`vite:configResolved`	`viteInlineConfig, env`	Permite leer la configuración resuelta de Vite.
`vite:serverCreated`	`viteServer, env`	Se llama cuando se crea el servidor Vite.
`vite:compiled`	-	Se llama después de que el servidor Vite está compilado.
`webpack:config`	`webpackConfigs`	Se llama antes de configurar el compilador de webpack.
`webpack:configResolved`	`webpackConfigs`	Permite leer la configuración resuelta de webpack.
`webpack:compile`	`options`	Se llama justo antes de la compilación.
`webpack:compiled`	`options`	Se llama después de que los recursos están cargados.
`webpack:change`	`shortPath`	Se llama en `change` en WebpackBar.
`webpack:error`	-	Se llama en `done` si hay errores en WebpackBar.
`webpack:done`	-	Se llama en `allDone` en WebpackBar.
`webpack:progress`	`statesArray`	Se llama en `progress` en WebpackBar.

Hooks de la Aplicación Nitro (en tiempo de ejecución, lado del servidor)

Consulta Nitro para ver todos los hooks disponibles.

Hook	Argumentos	Descripción	Tipos
`dev:ssr-logs`	`{ path, logs }`	Servidor	Se llama al final de un ciclo de solicitud con un array de logs del lado del servidor.
`render:response`	`response, { event }`	Se llama antes de enviar la respuesta.	response, event
`render:html`	`html, { event }`	Se llama antes de construir el HTML.	html, event
`render:island`	`islandResponse, { event, islandContext }`	Se llama antes de construir el HTML de la isla.	islandResponse, event, islandContext
`close`	-	Se llama cuando Nitro se cierra.	-
`error`	`error, { event? }`	Se llama cuando ocurre un error.	error, event
`request`	`event`	Se llama cuando se recibe una solicitud.	event
`beforeResponse`	`event, { body }`	Se llama antes de enviar la respuesta.	event, desconocido
`afterResponse`	`event, { body }`	Se llama después de enviar la respuesta.	event, desconocido

※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/advanced/hooks