Bienvenido a Nuxt 3

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Nuxt Bridge es un paquete que actúa como puente entre Nuxt 2 y Nuxt 3, permitiendo a los usuarios actualizar sus proyectos existentes con nuevas funcionalidades y optimizaciones de Nuxt 3 mientras siguen operando en la plataforma más estable de Nuxt 2.

El desarrollo de Nux3 comenzó en julio de 2020, con un enfoque en reescrituras utilizando TypeScript y la inclusión de soporte para Webpack 5.

Nuxt Nitro es el nuevo motor detrás de Nuxt 3, diseñado para optimizar la entrega y el rendimiento de las aplicaciones. Ofrece mejoras en el tiempo de inicio, menor tamaño de los paquetes en el servidor y es capaz de ser desplegado en diferentes plataformas, incluidas serverless y JAMstack.

La salida 'cross-platform' de Nuxt 3 significa que las aplicaciones pueden alojarse y ejecutarse en diferentes entornos y plataformas, como Node.js, deno, y navegadores, ofreciendo una gran versatilidad para los desarrolladores al desplegar sus proyectos.

Dado que Nuxt 3 aún está en desarrollo y puede no tener todas las características estables, se recomienda comenzar con Nuxt 2 si se busca estabilidad para proyectos críticos y planear la transición a Nuxt 3 una vez que se estabilice completamente.

Nux3 es la última versión del framework de desarrollo web basado en Vue.js, que incluye mejoras como el soporte para TypeScript, Webpack 5, y un nuevo motor llamado Nuxt Nitro. Ofrece un enrutamiento mejorado, menor tamaño de los paquetes, y carga más rápida, facilitando la creación de aplicaciones más eficientes y rápidas.

Nuxt 3 ofrece un paquete de cliente más pequeño, configuración simplificada, y mejoras significativas en el rendimiento gracias a la división dinámica de código y la generación estática incremental. Además, incorpora Vue 3 y Composition API, proporcionando una mayor flexibilidad y eficiencia en el desarrollo.

Alexandre Chopin
Alexandre Chopin
29 min
20 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Nux3 ha realizado mejoras significativas en rendimiento, optimización de salida y soporte sin servidor. Nuxt Bridge trae el motor Nitro para un rendimiento mejorado y una transición más fácil entre Nuxt 2 y Nuxt Read. Nuxt 3 admite Webpack 5, Bytes y Vue 3. NextLab ha desarrollado sitios web completamente nuevos utilizando la tecnología Docus. Se recomienda Nuxt.js para construir aplicaciones más rápidas y sencillas, y se debe usar Nuxt 2 antes de migrar a Nuxt 3 para la estabilidad. DOCUS es un nuevo proyecto que combina Nuxt con características adicionales como módulos de contenido y un panel de administración.
Available in English: Welcome to Nuxt 3

1. Introducción a Nux3 y su trayectoria

Short description:

Hoy estoy emocionado de hablar sobre Nux3 y su trayectoria. Comenzamos desde cero en julio de 2020. En septiembre comenzamos a crear las características más famosas en Nux, que es el enrutamiento de páginas. En octubre, también trabajamos mucho para obtener soporte libre de vista con el renderizador de paquetes. En febrero, hacemos que Nitro funcione en la plataforma serverless principal. En marzo, creamos esta nueva organización en GitHub llamada NGS. En mayo, decidimos usar estas características famosas, el enrutamiento PySystem y la página opcional. En agosto, las importaciones globales, las importaciones globales automáticas. NUXT Bridge viene con un nuevo motor llamado NUXT Nitro. Primero que nada, hablemos sobre la salida. El directorio de salida es súper importante para nosotros y queremos optimizar mucho este directorio porque eso aporta mucha capacidad a NUXT. Esta salida es por defecto multiplataforma.

♪♪ Hola a todos. Hoy estoy emocionado de hablar sobre Nux3 y su trayectoria. Ha sido un largo proceso de desarrollo. Ha habido tanto sucediendo y tantas mejoras en Fragmentos.

Hoy voy a hacer mi mejor esfuerzo para explicar lo que hemos hecho con el equipo durante casi dos años ahora. Así que hablemos sobre la trayectoria y primero entremos en Nux3. Comenzamos desde cero en julio de 2020. Decidimos ir con TypeScript para las reescrituras. Y obviamente, como la mayoría de ustedes están usando Webpack con Nux2, pusimos mucho esfuerzo para agregar soporte Webpack 5.

En septiembre comenzamos a crear las características más famosas en Nux, que es el enrutamiento de páginas, que se basa en el Sistema de Fuego. En octubre, también trabajamos mucho para obtener soporte libre de vista con el renderizador de paquetes. Avanzando con noviembre y Nux Nitro, quizás hayan oído hablar de él, y lo explicaré un poco más en esta charla. En enero de este año comenzamos a trabajar en el soporte de bytes. En febrero, hacemos que Nitro funcione en la plataforma serverless principal, que es una gran, gran victoria para nosotros. Y por cierto, con todo este trabajo que hemos hecho, creamos esta nueva organización en GitHub llamada NGS, o JavaScripts Universales, en marzo.

También en marzo, comenzamos a trabajar en NUXT Kites y NUXT CLI. En mayo, decidimos usar estas características famosas, el enrutamiento PySystem y la página opcional, eso va a traerles una nueva experiencia para crear proyectos NUXT creando una Página de aterrizaje sin ningún soporte de enrutamiento. En junio, comenzamos a trabajar en el soporte de diseño. En julio, pusimos soporte MXScript. En agosto, las importaciones globales, las importaciones globales automáticas. Y en septiembre, comenzamos a trabajar en NUXT Bridge. Y finalmente conseguimos, el mes pasado, el soporte para estas construcciones y producción. Eso significa, en más de 400 días, y más de 300 solicitudes de extracción, y alrededor de 700 compromisos y 200 problemas, hemos actualizado mucho sobre NUXT Bridge y su visión. Además de eso, creamos más de 40 repositorios en una nueva organización llamada NGS.

NUXT Bridge viene con un nuevo motor llamado NUXT Nitro. Comencemos con NUXT Nitro porque eso es lo que llevamos NUXT al futuro. Primero que nada, hablemos sobre la salida. El directorio de salida es súper importante para nosotros y queremos optimizar mucho este directorio porque eso aporta mucha capacidad a NUXT. Esta salida es por defecto cross-platform. Eso significa que puedes alojarlo en nodos como lo haces para NUXT, pero también en dno y trabajadores como puedes tener en clúster y trabajadores, por ejemplo.

2. Mejoras en Nuxt 3 y Nuxt Bridge

Short description:

Hicimos una gran mejora en el rendimiento del inicio de la llamada y, como solías hacer en NUXT para las rutas del lado del cliente, obtenemos las rutas de la API en este momento con reemplazos automáticos, pero también una búsqueda isomórfica. La salida altamente optimizada es clave para nosotros porque cuando quieres crear un sitio web moderno, necesitas tener múltiples rendimientos y paquetes. Rastreamos las dependencias para Node.js. El tamaño del paquete del servidor ahora es inferior a un megabyte y nos lleva a un inicio de llamada, que es de 75 a 100 veces más rápido que antes. Estamos apuntando a los renderizadores híbridos y basados en serverless en el JAMstack. Nuxt Bridge trae el motor Nitro para mejorar el rendimiento y proporcionar soporte serverless. Nuxt 3 será más ligero, con un paquete de cliente y un paquete de despliegue más pequeños. Será más rápido con inicios de código optimizados y división de costos de renderizado dinámico en el lado del servidor.

Hicimos una gran mejora en el inicio de la llamada performance y, como solías hacer en NUXT para las rutas del lado del cliente, obtenemos las rutas de la API en este momento con reemplazos automáticos, pero también una búsqueda isomórfica. Entonces, la salida altamente optimizada es clave para nosotros porque en este momento cuando quieres crear un sitio web moderno, necesitas tener múltiples rendimientos y paquetes.

Rastreamos las dependencias para Node.js. También hacemos la división del code, pero en el paquete del servidor. Eso significa que el tamaño del paquete del servidor ahora es inferior a un megabyte y nos lleva a un inicio de llamada, que es de 75 a 100 veces más rápido que antes. Entonces, la salida cross-platform nos lleva a otro nivel, no solo en los entornos de Node.js, también estamos marcando los paquetes de Node.js para informes de Workhorse. Obtenemos una construcción de Node.js ultra ligera y de alta calidad. Por defecto, porque nos gusta la optimization, obtenemos una detección automática de la plataforma. Somos capaces de renderizar en este momento tu sitio web de Node.js en el trabajador de servicio del navegador. Todavía es experimental, pero contamos contigo y con la community para mejorar esta innovation.

Con esta innovation, en este momento, puedes desplegar los proyectos de Nuxt en cualquier lugar. Eso significa que estamos apuntando a los renderizadores híbridos y basados en serverless en el JAMstack. Entonces eso es... fue un gran trabajo que hemos hecho desde hace dos años en la parte del servidor de Nuxt, que es Nuxt Nitro. Pero no es solo para Nuxt 2. También es para Nuxt 3. También es para Nuxt 2. Y todas estas mejoras de Nuxt 3, queremos llevarlas a nuestros usuarios actuales que están usando Nuxt 2 para tener una mejor transición para el futuro. Y ese es este paquete llamado Nuxt Bridge. Ves el puente entre Vue 2 y Nuxt 2 obviamente, y Vue 3 y Nuxt 3. Entonces Nuxt Bridge, obviamente trae consigo su motor Nitro para mejorar tus rendimientos y obtener el soporte serverless. Eso significa que en este momento, puedes comenzar a actualizar tus proyectos para ir con Nuxt 3 y Vue 3. En Nuxt Bridge, también obtienes el soporte XMAS, soporte ESM, sin más módulo.export en la misma tarea. Tenemos un soporte Type-C incorporado por defecto y la nueva API de competición de Nuxt 3 con una caja de importación. Gracias al manual, también obtenemos los grandes rendimientos de byte dentro de Nuxt Bridge, por lo que no necesitas quedarte con Webpack o Bits. Simplemente puedes alternar cuál quieres elegir para tus proyectos. Entonces, para resumir con Nuxt 3, va a ser más ligero. Nuxt 3 proporcionará un paquete de cliente moderno hasta cinco veces más pequeño y un paquete de despliegue 100 veces más pequeño. Obviamente va a ser más rápido con un inicio de code optimizado con la división de costos de renderizado dinámico en el lado del servidor. En Nuxt 2, solías elegir entre el renderizado en el lado del servidor o la generación de sitios estáticos.

3. Actualizaciones de Nuxt Bridge, Nuxt3 y Nuxt 2

Short description:

Nuxt Bridge y Nuxt3 aportan capacidades híbridas con generación estática incremental y suspense para la obtención de datos. Vue 3 introduce la API de composición para una mejor reutilización. La nueva CLI de Nuxt mejora el inicio de proyectos. Nuxt Kit permite una fácil transición entre Nuxt 2 y Nuxt Read. Nuxt 3 soporta Webpack 5, Bytes y Vue 3. Nuxt 2 sigue recibiendo actualizaciones, incluyendo una generación estática más rápida y los innovadores módulos de imagen de Nuxt. Nuestra misión es ayudarte a crear proyectos más rápido y mejor, con más de 1.7 millones de descargas mensuales y una comunidad en auge.

Pero con Nuxt Bridge y Nuxt3, te volverás híbrido. Híbrido significa que vas a tener una generación estática incremental y más capacidades. El futuro trae consigo una gran innovación y una de ellas es el suspense. Suspense obtiene data no solo en los componentes de la página sino en todos los componentos. Esto aporta más flexibilidad y más capacidades a tu proyecto.

Vue 3 también viene con una composition API que es una gran experiencia y mejora para reutilizar estas características y funcionalidades dentro de tus proyectos. También vamos con la nueva Nuxt CLI para mejorar el escaneo de carpetas e iniciar tus próximos proyectos. También queremos mejorar nuestra developer experience y trabajamos duro para ofrecerte una Nuxt dev tool y brindarte una mejor experiencia para trabajar más rápido con mejores mensajes de error e información de vistas rápidas directamente en tu navegador. Nuxt Kit, como mencioné, a todos les encanta el módulo de Nuxt y este módulo ecosystem que lleva tus proyectos a otro nivel al poder conectarse a cualquier API o servicios. Nuxt Kit te da el poder de transición entre Nuxt 2 y Nuxt Read con facilidad.

Como mencioné, vamos a soportar Webpack 5, que es más rápido que antes y realmente optimizado. Y como convención para nosotros, no necesitas configurarlo en absoluto. También vamos a soportar Bytes, que todavía está en una etapa temprana para nosotros en beta pero creemos en el trabajo realizado por Evan y queremos avanzar en esta dirección. Obviamente, como todos estaban esperando, soportamos Vue 3. Y como mencioné, al principio, Nuxt 3 está reescrito en TypeScript por lo que podemos tener el soporte de TypeScript por defecto. Así que fue un gran trabajo en Nuxt 3. Pero mientras tanto, seguimos trabajando en Nuxt 2 y no lo abandonamos. Vamos a seguir trabajando en él porque no nos rendimos. Así que en Nuxt 2, hemos hecho más de 23 lanzamientos, cerrado miles de problemas, y fusionado muchas solicitudes previas. También aportamos algunas innovaciones, como una generación de estado más rápida. Los modules de imagen de Nuxt y la imagen de Nuxt basada en ideas es una gran innovación. Podemos ver muchos ejemplos ahora mismo, pero te recomiendo que te pases a Nuxt image si aún no lo tienes, y no puedo mencionar todas las innovaciones y todos los lanzamientos realizados por algunos grandes contribuyentes que tenemos en nuestra community, y quiero tomarme un tiempo para agradecer a todos ustedes por su contribución.

Misión de Nuxt. Nuestra misión es muy simple. Queremos ayudarte a crear un proyecto y trabajar con tu equipo más rápido y mejor. Sabemos que el desarrollo front-end puede ser difícil a veces, y tienes mucho que aprender, muchas herramientas, y no puede ser mejor que trabajar en equipo y una community para avanzar en la web. Y ahora, debido a eso, hemos alcanzado más de 1.7 millones de descargas mensuales en septiembre con más de 38K estrellas en GitHub. Y esta estadística es complicada. Pero por lo que podemos rastrear en internet tenemos más de 200K sitios web activos. Y nuestros sitios web reciben más de 500K visitantes únicos cada mes.

4. Introducción a NextLab y Nuevos Sitios Web

Short description:

Muchas gracias. Hemos trabajado en sitios web completamente nuevos hechos con una tecnología llamada Docus. Consulta nuestro repositorio en GitHub en github.com. Soy Alexander Chopin, COO en NextLab y cofundador de Next. Sígueme en Twitter en IamNext. Para más información, visita nuestro sitio web en NextLab. Explora proyectos como View Telescope, Viewtify, Quasar Framework, NextGIS y la nueva tecnología DOCUS. Nuestros sitios web son de código abierto.

Muchas gracias. Y para esta ocasión, también hemos trabajado en sitios web completamente nuevos. Esto es caro, ¿no es así? Este sitio web es traído por NextLab, la compañía detrás de Next, pero está trabajando duro para avanzar con más que la creación de sitios web. Ha sido hecho con una nueva tecnología llamada Docus, pero sin spoilers. Solo te recomiendo que revises nuestro repositorio en GitHub en github.com. Soy Alexander Chopin, COO en NextLab y cofundador de Next. Puedes seguirme en Twitter en IamNext. Y si quieres más información sobre nuestra empresa y en qué estamos trabajando, te recomiendo que vayas a un nuevo sitio web en NextLab. Puedes ver nuestro proyecto y algunas historias sobre por qué creamos Next, cómo impactará en tu desarrollo, pero también algunos nuevos proyectos que hemos creado, como View Telescope, que es una herramienta para la community de View que te ayuda a sondear la web y listar todos los sitios web hechos con View y su tecnología, como Viewtify, Quasar Framework, NextGIS. Y no dudes en descubrir DOCUS, una nueva tecnología que nos ayuda a migrar nuestros nuevos sitios web. Obviamente, puedes encontrar estos sitios web en nuestra organización de GitHub, Es de código abierto porque amamos el código abierto. Gracias por tu atención.

QnA

Preguntas y Respuestas sobre Proyectos y Aprendizaje de Nuxt.js

Short description:

Echemos un vistazo a las respuestas a la pregunta sobre proyectos construidos con Nuxt.js. La gente está utilizando Nuxt.js para una amplia gama de aplicaciones. Cuando se trata de construir aplicaciones de manera más rápida y sencilla, Nuxt3 es el camino a seguir. Aunque Nuxt3 aún no es estable, se recomienda comenzar con Nuxt2 y migrar más tarde. La documentación es el mejor lugar para aprender y comenzar, y también hay videos útiles de los embajadores de Nuxt en YouTube. Utilizar Nuxt.js para un sitio web de red social es una excelente elección, ya que es un caso de uso perfecto para sitios web modernos.

Genial, gracias por tu charla, Alex. Y antes de pasar a la parte de preguntas y respuestas, echemos un vistazo a las respuestas a la pregunta que hiciste a nuestros asistentes. La pregunta era, ¿qué tipo de proyectos estás construyendo con Nuxt.js? Parece que la gente está utilizando Nuxt.js para construir, bueno, prácticamente de todo. ¿Te sorprende en absoluto? En absoluto, pero esta pregunta parece inútil ahora. Entonces eso es algo muy positivo, ¿verdad? Genial.

Echemos un vistazo a algunas de las preguntas que hizo la gente. Alguien pregunta, aún no he usado Nuxt, pero tengo curiosidad. ¿Puede Nuxt3 ayudarnos a construir aplicaciones de manera más rápida y sencilla? Supongo que vas a decir que sí en comparación con la versión anterior. ¿Y qué tal la curva de aprendizaje? Obviamente necesito recordarte que Nuxt3 aún no es estable. Así que si quieres empezar un proyecto, te recomiendo que empieces con Nuxt2. Obviamente porque Nuxt3 todavía está en los data. Y podrás migrar a Nuxt3 cuando sea estable. Y entonces necesitas al menos conocer Nuxt3 si quieres usar Nuxt de forma gratuita. Y eso es lo mismo para Nuxt2. Necesitas conocer Nuxt2. Y ese es el único requisito que necesitas tener.

Entonces, si la gente quiere aprender o empezar con ello, ¿por dónde deberían empezar? ¿Con la documentation? ¿Sugieres algún lugar de aprendizaje autodidacta? La documentation siempre es el mejor lugar. Esa es la fuente de la verdad. Y de hecho estamos actualizando la documentation todos los días porque el framework avanza rápidamente. Pero también puedes ver algunos de los buenos videos de nuestros embajadores en YouTube, como Tim Dennings, Debbie O'Brien, Alex Wichter y Ogorz. Y Josh. Sí, ese es el mejor lugar para encontrar información en este momento. También queremos crear videos cuando Nuxt sea realmente estable. Genial. Otra pregunta es, ¿tiene sentido usar Nuxt.js para construir un sitio web de red social? Sí, tiene sentido. Una red social es un enorme sitio web moderno. Ese es quizás el mejor caso de uso para sitios web modernos. Facebook creó React para eso. Y ese es un buen ejemplo. Sí, esencialmente, puedes seguir con ello.

Obtención de Datos y Nuxt vs DOCUS

Short description:

En Nuxt, puedes obtener datos antes o después de la navegación. Nuxt es adecuado para aplicaciones web y más. DOCUS es un nuevo proyecto que combina Nuxt con características adicionales, como módulos de contenido y un panel de administración. Nuestros sitios web están hechos con DOCUS y serán de código abierto pronto.

Otra pregunta, ¿a qué te refieres con obtener data antes y después de la navegación? No estoy seguro de entender eso. Estoy bastante seguro de que mencionaste algo en tu charla. Tal vez a eso se refiere este caos organizado, ese es el apodo de este SMB. Durante la charla, creo que mencioné que estamos obteniendo data antes de renderizar la página y los componentes HTML, pero también puedes desactivarlo y actuar como lo haces con tú, y así obtienes los data después del renderizado, como un HPA normal con clientes. Me encantaría saber de caos organizado, si eso responde a esa pregunta.

Muy bien. Siguiente pregunta. ¿Cuándo se debe usar NUX? Yo uso Quasar, y proporciona SSR. Esa es Karon haciendo esta pregunta. Entonces, ¿puedes repetir la pregunta, por favor? ¿Cuándo se debe usar NUX? Yo uso Quasar. No sé si lo estoy pronunciando bien. Espero que esté bien. Sí, esa era la pregunta. Eso estuvo bien. Entonces, puedes usarlo para una aplicación web o para más que un sitio web. Quasar es también una gran solución para, especialmente cuando quieres hacer desarrollos móviles. Eso es nuestro campo. No jugamos a este juego. Y nos enfocamos en la aplicación web y en el desarrollo de más que sitios web. Genial.

¿Cuál es el objetivo del proyecto DOCUS en comparación con NUX.js? Entonces, ese es el siguiente software en la cima de NUX. NUX es poderoso para crear aplicaciones web en la cima de Vue. Pero aún así, hay muchas herramientas geniales para crear sitios web modernos. Y queremos empaquetarlo en un nuevo proyecto, nuevo software. Que es básicamente NUX más un montón de características geniales. Como los modules de contenido, la anthomanization, y un montón de otras cosas. Y un panel de administración genial, y estos grandes DOCUS. Y nuestros sitios web están hechos con este software, que será de código abierto muy pronto. Como puedes imaginar, con el lanzamiento de la próxima versión gratuita, estuvimos bastante ocupados en Next. Entonces, estamos parcheando Next, y cuando DOCS esté listo para ser abierto, también será de código abierto.

Depuración de Proyectos Next y Estabilidad de Nuxt 3

Short description:

Otra pregunta sobre la depuración de un proyecto Next en VS Code y la configuración recomendada. ¿Por qué iniciar un nuevo proyecto en Nuxt 2 y luego migrar a Nuxt 3? ¿Qué tan estable es Nuxt 3 y debería comenzar a portar mi proyecto? Espera un momento, nos llevó un año y medio crear la nueva base. Queremos asegurar la estabilidad y no romper los proyectos existentes.

Muy bien. Otra pregunta de W.D. Becker. Algunos de estos nombres de usuario son realmente interesantes para descifrar. ¿Tienes una configuración recomendada para debugging un proyecto Next en VS Code, utilizando recursos que encuentro en internet? Todavía tengo problemas de debug con los mapas de origen en VS Code, es decir, los puntos de interrupción no están en el lugar correcto.

Ok. No tengo ninguna recomendación para VS Code. Pero te recomiendo que hagas la pregunta en nuestro canal de Discord o en la Discussion de GitHub. Y las personas con el mismo problema que tú o el mismo stack pueden recomendar responder. Eso tiene mucho sentido.

Otra pregunta es, ¿por qué recomiendas iniciar un nuevo proyecto en Nuxt 2 y luego migrar a Nuxt 3? Porque, como puedes ver en la documentation de V3, no todas las características están implementadas en Nuxt 3. Por lo tanto, es posible que necesites algunas características que ya existen en Nuxt 2, pero que no tienes en Nuxt 3. Por ejemplo, puedes imaginar, como la generación de sitios estáticos, aún no lo tenemos implementado en Nuxt 3. Va a llegar pronto, pero aún no está listo para ser utilizado en producción. Por eso recomiendo usar Nuxt 2, si quieres iniciar un negocio o algo muy estable, solo para estar seguro de que nada se va a romper en dos meses, en términos de fecha. Puedo imaginar que mucha gente está preocupada por migrar, porque lleva tiempo, y a veces es tedioso, ¿verdad? No podemos esperar a eso, así que no te preocupes, va a ser súper suave.

Genial. Pregunta de Basch, Estoy trabajando en un gran proyecto usando Nuxt.js. ¿Qué tan estable es Nuxt 3? Siento que esta va a ser una gran cantidad de preguntas. ¿Qué tan estable es en este momento, y debería comenzar a portarlo a Nuxt 3, o al menos sentar las bases para la portabilidad? Obviamente no te quedes en Nuxt, pero puedes comenzar a instalar Nuxt Bridge, que es el puente entre Nuxt 3 y Nuxt 3, con las características de Nuxt 3 a Nuxt 3. Así que esto es más estable, y luego de Nuxt Bridge a Nuxt 3, va a ser prácticamente transparente.

Bueno, en resumen, todos, calma. Me encanta que todos estén tan emocionados. Calma, calma. Nos llevó un año y medio crear la base y la nueva fundación. Eso es para el futuro, un buen futuro. Creo que en este mercado competitivo, y dos comunidades, React versus Vue, necesitamos tomarnos nuestro tiempo y asegurarnos de que no estamos rompiendo el rook. Lo siento. El software actual que obtenemos es súper importante. Hemos trabajado en él desde hace cinco años, y queremos continuar durante los próximos cinco años.

Renderizando Componentes en el Front End en Nuxt 2

Short description:

En Nuxt 2, puedes usar los componentes 'client-only' para renderizar componentes específicos solo en el lado del cliente, incluso si el back end ya ha preparado los elementos DOM.

Genial. Muy bien. Continúa haciendo preguntas sobre las diferencias entre dos y tres. Agarremos esta. ¿Se renderizarán los componentes en el lado del front end si el back end ya preparó los elementos DOM? ¿Puedes repetir la pregunta? Necesito repetir la pregunta para mí mismo, honestamente. ¿Se renderizarán los componentes en el lado del front end si el back end ya preparó los elementos DOM? ¿Quizás quieres que algunos componentes se rendericen solo en los lados del front end y desactivar la renderización lateral para algunos componentes? Obviamente, sí. Se llama client-only en Nuxt 2. Puedes poner tus componentes dentro de los componentes client-only y se van a renderizar solo en el lado del cliente. Espero que eso responda la pregunta. También espero que sí, pero es una incógnita. ¿Qué tipo de métricas deberíamos usar para decidir si nos movemos a Nuxt o simplemente nos quedamos con Vue.js? Steela, ¿puedes resumir la pregunta? Creo que la gente se pregunta, ¿cuándo alguien decidiría por Nuxt en lugar de simplemente usar Vue.js? Vale, Casey. Solo una propuesta. Necesitamos una propuesta de producto. Una propuesta, si no quieres mantener la renderización del lado del servidor con Vue y quieres trabajar en equipo y reutilizar los componentos de tu proyecto, módulo, plugins, y crear una aplicación a gran escala, ve con Nuxt. De lo contrario, quédate con Vue. Hay un buen párrafo en el sitio web de Vue.js en la documentation explicando qué es lo siguiente y cuál es la diferencia entre Vue y Nuxt. No hay diferencia. Es solo una cuestión de architecture. Traemos esta convención de nuestra configuración porque el ecosystem de Vue es súper rico. Tenemos muchos plugins, y es muy útil, y responde a cada caso de uso. En nuestro caso, solo queremos proporcionar una plantilla para crear una aplicación web que pueda scale, y no tener miedo de mantener partes complicadas con la renderización del lado del servidor. Correcto. Como la gente no puede superar las preguntas de dos versus tres, tengo una pregunta para ti. Es Hacktoberfest, que es solo mi época favorita del año. ¿Está Nuxt participando en Hacktoberfest? Y si es así, ¿qué tipo de problemas o qué tipo de cosas te encantaría ver contribuciones? Normalmente participamos cada año en Hacktoberfest, pero este, lanzamos Nuxt3 en medio, y tuvimos que reorganizar todos los repositorios y dedicaciones, y eso es prácticamente el final del mes. Intentamos hacer lo mejor para participar, pero ahora mismo, somos Nuxt. Creo que eso es bastante justo. Entonces, ¿es justo decir que tú personalmente no estás participando en Hacktoberfest? No. ¿Tú sí? ¿En qué tipo de proyectos estás participando? Me gustaría saber. Es... Obviamente un RunDex, pero sí, no lo diré. Es una sorpresa. Necesitas seguirme en Twitter. ¡Oh, vale! ¡Eso es emocionante! Quizás la gente puede proponerte sus bibliotecas en el canal de Discord, y, ya sabes, intentar que les ayudes. He visto algunos mods divertidos que has creado desde el lanzamiento de Nuxt 3, especialmente el Hello World 1, solo para tener un mejor acceso. Y deseo que haya más contribuciones a tales modules porque eso me hace reír mucho, y realmente aprecio el compromiso de la community y el humor. ¡Muy bien, has oído al hombre! Más contribuciones divertidas, por favor. Parece que nos hemos quedado sin preguntas, y has respondido a mi pregunta especial, así que estoy muy contento. Espero que lo hayas pasado bien, y realmente quiero agradecerte por unirte y por unirte a la sesión de preguntas y respuestas. Gracias a todos ustedes por verme y todas sus valiosas preguntas.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
JSNation 2022JSNation 2022
141 min
Embarcándonos en una aventura con Nuxt 3, Motion UI y Azure
Workshop
Melanie de Leeuw
Melanie de Leeuw
¡Nos encantan las aplicaciones web fáciles de crear y desplegar! Entonces, veamos qué puede hacer una pila tecnológica muy actual como Nuxt 3, Motion UI y Azure Static Web Apps. Podría ser perfectamente un trío de oro en el desarrollo web moderno. O podría ser una hoguera de errores y problemas. De cualquier manera, será una aventura de aprendizaje para todos nosotros. Nuxt 3 se lanzó hace apenas unos meses y no podemos esperar más para explorar sus nuevas características, como su compatibilidad con Vue 3 y el Motor Nitro. Agregamos un poco de estilo a nuestra aplicación con la biblioteca Sass Motion UI, porque el diseño estático está pasado de moda y las animaciones vuelven a estar de moda.Nuestra fuerza impulsora de la pila será Azure. Las aplicaciones web estáticas de Azure son nuevas, casi listas para producción y una forma ingeniosa y rápida para que los desarrolladores desplieguen sus sitios web. Así que, por supuesto, debemos probar esto.Con algunas Azure Functions esparcidas por encima, exploraremos lo que puede hacer el desarrollo web en 2022.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.