f
Home

Published

- 10 min de lectura

Nuxt 3.9, 3.10

framework vue nuxt
img of Nuxt 3.9, 3.10

Traducido de la Primera y segunda entrada de Daniel Roe en el blog de Nuxt.

Nuxt 3.9

Tenemos un montón de características incluidas en la versión 3.9 y estamos ansiosos de que las pruebes.

⚡️ Vite 5

Esta versión viene con soporte para Vite 5 y Rollup 4. Los autores de módulos pueden necesitar verificar para asegurarse de que cualquier complemento de Vite que estén creando sea compatible con estas últimas versiones.

Esto viene con una gran cantidad de mejoras y correcciones de errores, consulta el registro de cambios de Vite para obtener más información.

✨ Vue 3.4 listo

Esta versión está probada con la última versión candidata de Vue 3.4 y tiene la configuración necesaria para aprovechar las nuevas características en Vue 3.4, incluida la depuración de errores de hidratación en producción (simplemente establece debug: true) en tu configuración de Nuxt.

👉 Para aprovecharlo, simplemente actualiza tu versión de vue una vez que se lance la v3.4, o prueba la versión candidata hoy mismo:

   {
	"dependencies": {
		"nuxt": "3.9.0",
		"vue": "3.4.0-rc.1",
		"vue-router": "latest"
	}
}

🏝️ Componentes de servidor interactivos

Esta es una actualización altamente experimental, pero ahora es posible jugar con componentes interactivos dentro de los componentes de servidor de Nuxt. Deberás habilitar esta nueva característica además de los componentes isla:

   // nuxt.config.ts
export default defineNuxtConfig({
	experimental: {
		componentIslands: {
			selectiveClient: true
		}
	}
});

Ahora, dentro de un componente de servidor, puedes especificar componentes para hidratar usando la directiva nuxt-client:

   <!--components/SomeComponent.server.vue-->
<NuxtLink :to="/" nuxt-client />

Estamos bastante emocionados por esto, así que ¡háznoslo saber cómo lo estás utilizando! 🙏

🔥 Optimizaciones automáticas del servidor

Ahora usamos el nuevo ‘define’ de Vite, consciente del AST, para realizar reemplazos más precisos en el código del lado del servidor, lo que significa que el código como este ya no generará un error:

   <script setup lang="ts">
	// app.vue
	if (document) {
		console.log(document.querySelector("div"));
	}
</script>

Esto no ha sido posible hasta ahora porque no hemos querido correr el riesgo de reemplazar accidentalmente palabras normales como document dentro de partes no JavaScript de tus aplicaciones. Sin embargo, la nueva funcionalidad de define de Vite está impulsada por esbuild y es consciente de la sintaxis, por lo que nos sentimos seguros al habilitar esta funcionalidad. Sin embargo, puedes optar por no utilizarla si es necesario:

   export default defineNuxtConfig({
	hooks: {
		"vite:extendConfig"(config) {
			delete config.define!.document;
		}
	}
});

🚦 API de Carga Granular

Ahora tenemos un nuevo sistema basado en ganchos para <NuxtLoadingIndicator>, incluyendo un componible useLoadingIndicator que te permite controlar/detener/iniciar el estado de carga. También puedes enganchar en page:loading:start y page:loading:end si lo prefieres.

Puedes leer más en la documentación y en el PR original (#24010).

🏁 Ejecutar eventos individuales en callOnce

A veces solo quieres ejecutar código una vez, sin importar cuántas veces cargues una página, y no quieres ejecutarlo nuevamente en el cliente si se ejecutó en el servidor.

Para esto, tenemos una nueva utilidad: callOnce (#24787).

   <script setup>
	// app.vue
	  const websiteConfig = useState('config')

	await callOnce(async () => {
	    console.log('This will only be logged once')
	  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
	})
</script>

Ten en cuenta que esta utilidad es consciente del contexto, por lo que debe ser llamada en la función de configuración del componente o en el plugin de Nuxt, al igual que con otros composables de Nuxt. Lee más en Docs > API > Utils > Call Once.

🚨 Tipos de Error

Durante un tiempo, los errores devueltos por useAsyncData y useFetch han sido tipificados de manera bastante genérica como Error. Hemos mejorado significativamente las posibilidades de tipo para hacerlas más precisas en términos de lo que realmente recibirás. (Normalizamos los errores con la utilidad h3 createError bajo el capó, para que puedan ser serializados del servidor al cliente, por ejemplo).

Hemos intentado implementar el cambio de tipo de manera compatible con versiones anteriores, pero podrías notar que necesitas actualizar el genérico si estás configurando manualmente los genéricos para estos composables. Consulta (#24396) para obtener más información, y háznoslo saber si experimentas algún problema.

🔥 Rendimiento del Esquema

Hemos dedicado tiempo en esta versión para realizar algunas mejoras de rendimiento menores, por lo que deberías notar que algunas cosas son un poco más rápidas. Este es un proyecto en curso y tenemos ideas para mejorar el tiempo de carga inicial del servidor de desarrollo de Nuxt.

✅ Para actualizar

Como de costumbre, nuestra recomendación para actualizar es ejecutar:

nuxi upgrade

Notas de la Versión Completa

Lee las notas de la versión completa de Nuxt v3.9.0.

¡Gracias por leer hasta aquí! Esperamos que disfrutes de la nueva versión. Por favor, háznoslo saber si tienes algún comentario o problema.

Nuxt 3.10

v3.10 llega muy cerca de v3.9, pero está repleto de características y correcciones. Aquí tienes algunos aspectos destacados.

✨ AsyncData compartido experimental, al prerrenderizar

Al prerrenderizar rutas, podemos terminar volviendo a solicitar los mismos datos una y otra vez. En Nuxt 2 era posible crear un ‘payload’ que podía ser solicitado una vez y luego accedido en cada página (y esto, por supuesto, es posible hacerlo manualmente en Nuxt 3 - consulta este artículo).

Con #24894, ahora somos capaces de hacer esto automáticamente por ti al prerrenderizar tu sitio. Tus llamadas a useAsyncData y useFetch serán deduplicadas y almacenadas en caché entre los renders de tu sitio.

   // nuxt.config.ts
export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

Es particularmente importante asegurarse de que cualquier clave única de tus datos siempre pueda resolverse al mismo dato. Por ejemplo, si estás utilizando useAsyncData para obtener datos relacionados con una página en particular, deberías proporcionar una clave que coincida de forma única con esos datos. (useFetch debería hacer esto automáticamente).

Lee más en Docs > Guide > Going Further > Experimental Features#sharedprerenderdata.

🆔 Creación segura para SSR de identificadores únicos accesibles.

Ahora incluimos un componible useId para generar identificadores únicos seguros para SSR (#23368). Esto permite crear interfaces más accesibles en tu aplicación. Por ejemplo:

   <!--components/MyForm.vue-->
<script setup>
	const emailId = useId();
	const passwordId = useId();
</script>

<template>
	<form>
		<label :for="emailId">Email</label>
		<input :id="emailId" name="email" type="email" />
		<label :for="passwordId">Password</label>
		<input :id="passwordId" name="password" type="password" />
	</form>
</template>

Lee más en Docs > API > Composables > Use Id.

✍️ Extendiendo app/router.options

Ahora es posible para los autores de módulos inyectar sus propios archivos router.options (#24922). El nuevo gancho pages:routerOptions permite a los autores de módulos realizar acciones como agregar scrollBehavior personalizado o agregar ampliaciones en tiempo de ejecución de rutas.

Lee más en Docs > Guide > Going Further > Custom Routing#router Options.

Soporte de Node.js del lado del cliente

Ahora admitimos (experimentalmente) el relleno de ciertos módulos principales de Node.js (#25028), así como ya lo hacemos a través de Nitro en el servidor al implementar en entornos no basados en Node.

Esto significa que, dentro de tu código del lado del cliente, puedes importar directamente desde módulos principales de Node (se admiten las importaciones de node: y node). Sin embargo, nada se inyecta globalmente por ti, para evitar aumentar innecesariamente el tamaño de tu paquete. Puedes importarlos donde sea necesario.

   import { Buffer } from "node:buffer";
import process from "node:process";

O proporciona tu propio polyfill, por ejemplo, dentro de un plugin de Nuxt.

   import { Buffer } from "node:buffer";
import process from "node:process";

globalThis.Buffer = Buffer;
globalThis.process = process;

export default defineNuxtPlugin({});

Esto debería facilitar la vida a los usuarios que trabajan con bibliotecas sin un soporte adecuado para el navegador. Sin embargo, debido al riesgo de aumentar innecesariamente tu paquete, instamos encarecidamente a los usuarios a elegir otras alternativas si es posible.

🍪 Mejora en la reactividad de las cookies

Ahora te permitimos optar por utilizar CookieStore. Si hay soporte para el navegador, entonces se utilizará en lugar de un BroadcastChannel para actualizar los valores de useCookie de forma reactiva cuando las cookies se actualicen (#25198).

Esto también viene acompañado de un nuevo componible, refreshCookie, que permite actualizar manualmente los valores de las cookies, por ejemplo, después de realizar una solicitud.

Lee más en Docs > API > Utils > Refresh Cookie.

🏥 Detección de anti-patrones

En esta versión, también hemos incluido una serie de características para detectar posibles errores y problemas de rendimiento.

Ahora lanzaremos un error si se utiliza setInterval en el servidor (#25259).

Advertimos (solo en desarrollo) si los composables de obtención de datos se utilizan incorrectamente (#25071), como por ejemplo, fuera de un contexto de plugin o de configuración.

Advertimos (solo en desarrollo) si no estás usando <NuxtPage /> pero tienes habilitada la integración con vue-router (#25490). (<RouterView /> no debe ser utilizado por sí solo).

🧂 Soporte de transiciones de vista granular

Ahora es posible controlar el soporte de transiciones de vista de forma granular en una base por página, utilizando definePageMeta (#25264).

Primero necesitas tener habilitado el soporte de transiciones de vista experimental:

   // nuxt.config.ts
export default defineNuxtConfig({
	experimental: {
		viewTransition: true
	},
	app: {
		// you can disable them globally if necessary (they are enabled by default)
		viewTransition: false
	}
});

Y puedes optar por activar/desactivar de forma granular:

   <!--pages/index.vue-->
<script setup lang="ts">
	definePageMeta({
		viewTransition: false
	});
</script>

Finalmente, Nuxt no aplicará Transiciones de Vista si el navegador del usuario coincide con prefers-reduced-motion: reduce (#22292). Puedes establecer viewTransition: 'always'; entonces será responsabilidad tuya respetar la preferencia del usuario.

🏗️ Metadatos de rutas en tiempo de compilación

Ahora es posible acceder a los metadatos de enrutamiento definidos en definePageMeta en tiempo de compilación, lo que permite a los módulos y ganchos modificar y cambiar estos valores (#25210).

   // nuxt.config.ts
export default defineNuxtConfig({
	experimental: {
		scanPageMeta: true
	}
});

Por favor, experimenta con esto y háznoslo saber cómo funciona para ti. Esperamos mejorar el rendimiento y habilitar esto de forma predeterminada en una versión futura para que los módulos como @nuxtjs/i18n y otros puedan proporcionar una integración más profunda con las opciones de enrutamiento establecidas en definePageMeta.

📦 Resolución de módulos del empaquetador

Con #24837, ahora estamos optando por la resolución de un bundler en TypeScript que debería asemejarse más de cerca a la forma real en que resolvemos las importaciones de subrutas para módulos en proyectos Nuxt.

La resolución de módulos ‘Bundler’ es recomendada por Vue y por Vite, pero desafortunadamente aún hay muchos paquetes que no tienen las entradas correctas en su package.json.

Como parte de esto, abrimos 85 PR en todo el ecosistema para probar el cambio predeterminado, e identificamos y corregimos algunos problemas.

Si necesitas desactivar este comportamiento, puedes hacerlo. Sin embargo, considera abrir un problema (siéntete libre de etiquetarme en él) en el repositorio de la biblioteca o módulo para que pueda resolverse en la fuente.

   // nuxt.config.ts
export default defineNuxtConfig({
	future: {
		typescriptBundlerResolution: false
	}
});

✅ Para actualizar

Como de costumbre, nuestra recomendación para actualizar es ejecutar:

nuxi upgrade --force

Esto actualizará también tu archivo de bloqueo (lockfile), y garantiza que obtengas actualizaciones de otras dependencias en las que Nuxt depende, especialmente en el ecosistema de unjs.

Notas de la Versión Completa

Lee las notas de la versión completa de Nuxt v3.10.0.

¡Gracias por leer hasta aquí! Esperamos que disfrutes de la nueva versión. Por favor, háznoslo saber si tienes algún comentario o problema.

¡Feliz Nuxteo! ✨