Bienvenido a Nuxt 3

Rate this content
Bookmark

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

29 min
20 Oct, 2021

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 de manera más rápida y sencilla, y se debe utilizar Nuxt 2 antes de migrar a Nuxt 3 para obtener 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

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 sin vista con el renderizador de paquetes. En febrero, hicimos que Nitro funcione en las principales plataformas sin servidor. En marzo, creamos esta nueva organización en GitHub llamada NGS. En mayo, decidimos utilizar estas características famosas, el enrutamiento de PySystem y la página opcional. En agosto, las importaciones globales, las importaciones automáticas globales. NUXT Bridge viene con un nuevo motor llamado NUXT Nitro. Primero hablemos de la salida. El directorio de salida es muy importante para nosotros y queremos optimizarlo al máximo 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 mucho trabajo y muchas mejoras en Fragments.

Hoy haré todo lo posible para explicar lo que hemos hecho con el equipo durante casi dos años. Así que hablemos de la trayectoria y primero lleguemos a Nux3. Comenzamos desde cero en julio de 2020. Decidimos utilizar TypeScript para las reescrituras. Y obviamente, como la mayoría de ustedes están utilizando Webpack con Nux2, hemos hecho un gran esfuerzo para agregar soporte para 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 Fire. En octubre, también trabajamos mucho para obtener soporte sin vista con el renderizador de paquetes. Avanzando con noviembre y Nux Nitro, es posible que hayan oído hablar de ello, y explicaré un poco más en esta charla. En enero de este año comenzamos a trabajar en el soporte de bytes. En febrero, hicimos que Nitro funcione en las principales plataformas sin servidor, lo cual es una gran victoria para nosotros. Y por cierto, con todo este trabajo que hemos realizado, creamos esta nueva organización en GitHub llamada NGS, o Universal JavaScripts, en marzo.

También en marzo, comenzamos a trabajar en NUXT Kites y NUXT CLI. En mayo, decidimos utilizar estas características famosas, el enrutamiento de PySystem y la página opcional, lo que brindará una nueva experiencia para crear proyectos NUXT creando una página de inicio sin ningún soporte de enrutamiento. En junio, comenzamos a trabajar en el soporte de diseño. En julio, agregamos soporte para MXScript. En agosto, las importaciones globales, las importaciones automáticas globales. Y en septiembre, comenzamos a trabajar en NUXT Bridge. Finalmente, el mes pasado, obtuvimos el soporte para esta compilación y producción. Eso significa que, 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 a NUXT al futuro. Primero hablemos de la salida. El directorio de salida es muy importante para nosotros y queremos optimizarlo al máximo porque eso aporta mucha capacidad a NUXT. Esta salida es por defecto multiplataforma. Eso significa que puedes alojarlo en nodos como lo haces con NUXT, pero también en dno y workers como puedes tener en clúster y workers, por ejemplo.

2. Mejoras de Nuxt 3 y Nuxt Bridge

Short description:

Hemos realizado una gran mejora en el rendimiento del inicio de llamada y, al igual que solías hacer en NUXT para las rutas del lado del cliente, ahora obtenemos las rutas de la API con reemplazos automáticos, pero también con un fetch isomórfico. La salida altamente optimizada es clave para nosotros porque cuando quieres crear un sitio web moderno, necesitas tener múltiples rendimientos y paquetes. Realizamos un seguimiento de 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 basados en serverless y híbridos en 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 más pequeño y un paquete de implementación. Será más rápido con un inicio de código optimizado y una división de costos de renderizado dinámico en el lado del servidor.

Hemos realizado una gran mejora en el rendimiento del inicio de llamada y, al igual que solías hacer en NUXT para las rutas del lado del cliente, ahora obtenemos las rutas de la API con reemplazos automáticos, pero también con un fetch isomórfico. Por lo tanto, la salida altamente optimizada es clave para nosotros porque ahora, cuando quieres crear un sitio web moderno, necesitas tener múltiples rendimientos y paquetes.

Realizamos un seguimiento de las dependencias para Node.js. También hacemos la división de código, 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. Por lo tanto, la salida multiplataforma nos lleva a otro nivel, no solo en entornos de Node.js, también estamos marcando los paquetes de Node.js para informes de Workhorse. Obtenemos una versión ultraligera de Node.js incorporada de forma predeterminada porque nos gusta la optimización. Obtenemos una plataforma de detección automática. Ahora podemos renderizar tu sitio web de Node.js en el navegador y en el servicio de trabajadores. Aún es experimental, pero contamos contigo y con la comunidad para mejorar esta innovación.

Con esta innovación, ahora puedes implementar proyectos de Nuxt en cualquier lugar. Eso significa que estamos apuntando a los renderizadores basados en serverless y a los híbridos en JAMstack. Así que eso... ha sido un gran trabajo que hemos realizado durante dos años en la parte del servidor de Nuxt, que es Nuxt Nitro. Pero no solo es para Nuxt 2, también es para Nuxt 3. Todas estas mejoras de Nuxt 3 queremos llevarlas a nuestros usuarios actuales que están utilizando Nuxt 2 para tener una mejor transición hacia el futuro. Y para eso está este paquete llamado Nuxt Bridge. Verás el puente entre Vue 2 y Nuxt 2, obviamente, y Vue 3 y Nuxt 3. Así que Nuxt Bridge trae consigo su motor Nitro para mejorar el rendimiento y obtener soporte serverless. Eso significa que ahora puedes comenzar a actualizar tus proyectos para usar Nuxt 3 y Vue 3. En Nuxt Bridge, también obtienes soporte para XMAS, soporte para ESM, sin más module.export en la misma tarea. Tenemos un soporte incorporado de Type-C de forma predeterminada y la nueva API de competencia de Nuxt 3 con un cuadro de importación. Gracias al manual, también obtenemos un gran rendimiento de bytes dentro de Nuxt Bridge, por lo que no necesitas quedarte con Webpack o Bytes. Simplemente puedes elegir cuál quieres usar en tus proyectos. En resumen, con Nuxt 3, será más ligero. Nuxt 3 proporcionará un paquete de cliente moderno hasta cinco veces más pequeño y un paquete de implementación 100 veces más pequeño. Será más rápido, obviamente, con un inicio de código optimizado y una división de costos de renderizado dinámico en el lado del servidor.

3. Nuxt Bridge, Nuxt3 y Actualizaciones de Nuxt 2

Short description:

Nuxt Bridge y Nuxt3 traen 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 mayor reutilización. El nuevo CLI de Nuxt mejora la creación de proyectos. Nuxt Kit permite una transición fácil entre Nuxt 2 y Nuxt Read. Nuxt 3 admite Webpack 5, Bytes y Vue 3. Nuxt 2 continúa 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ápidos y mejores, con más de 1.7 millones de descargas mensuales y una comunidad próspera.

Pero con Nuxt Bridge y Nuxt3, te volverás híbrido. Híbrido significa que tendrás una generación estática incremental y más capacidades. El futuro trae grandes innovaciones y una de ellas es el suspense. El suspense obtiene datos no solo en los componentes de la página, sino en todos los componentes. Esto brinda más flexibilidad y más capacidades a tu proyecto.

Vue 3 también viene con una API de composición, que es una gran experiencia y mejora para reutilizar estas características y funcionalidades en tus proyectos. También contamos con el nuevo CLI de Nuxt para mejorar la creación de proyectos y mejorar nuestra experiencia de desarrollo. Trabajamos arduamente para brindarte una herramienta de desarrollo de Nuxt y ofrecerte una mejor experiencia para trabajar más rápido con mejores mensajes de error y vistas rápidas directamente en tu navegador. Nuxt Kit, mencioné esto, a todos les encanta el enfoque modular de Nuxt y este ecosistema modular que lleva tus proyectos a otro nivel al poder conectarse a cualquier API o servicio. Nuxt Kit te brinda el poder de hacer la transición entre Nuxt 2 y Nuxt Read con facilidad.

Como mencioné, vamos a admitir Webpack 5, que es más rápido y está optimizado. Y como convención, no necesitas configurarlo en absoluto. También vamos a admitir Bytes, que aún está en etapa beta, pero creemos en el trabajo realizado por Evan y queremos avanzar en esta dirección. Obviamente, como todos esperaban, admitimos Vue 3. Y como mencioné al principio, Nuxt 3 está escrito en TypeScript, por lo que tenemos soporte predeterminado para TypeScript. Eso fue un gran trabajo en Nuxt 3. Pero al mismo tiempo, seguimos trabajando en Nuxt 2 y no lo hemos abandonado. Seguiremos trabajando en él porque no nos rendimos. En Nuxt 2, hemos realizado más de 23 versiones, cerrado miles de problemas y fusionado muchas solicitudes de cambios. También hemos introducido algunas innovaciones, como una generación estática más rápida y los módulos de imagen de Nuxt, que se basan en ideas innovadoras. Podemos ver muchos ejemplos en este momento, pero te recomiendo que te cambies a Nuxt image si aún no lo tienes, y no puedo mencionar todas las innovaciones y todas las versiones realizadas por algunos grandes colaboradores que tenemos en nuestra comunidad, y quiero tomarme un momento para agradecerles a todos 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 de manera más rápida y mejor. Sabemos que el desarrollo front-end puede ser difícil a veces, y hay mucho que aprender, muchas herramientas, y no hay nada mejor que trabajar en equipo y en comunidad para avanzar en la web. En este momento, hemos alcanzado más de 1.7 millones de descargas mensuales en septiembre, más de 38K estrellas en GitHub. Y esta estadística es engañosa. Pero según lo que podemos rastrear en Internet, tenemos más de 200K actividades en sitios web en vivo. 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 nuevos sitios web creados con una tecnología llamada Docus. Visita nuestro repositorio en GitHub en github.com. Soy Alexander Chopin, COO de NextLab y cofundador de Next. Sígueme en Twitter en IamNext. Para obtener 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 los nuevos sitios web. Esto es costoso, ¿verdad? Este sitio web es presentado por NextLab, la empresa detrás de Next, pero está trabajando arduamente para avanzar con más que solo la creación de sitios web. Ha sido creado con una nueva tecnología llamada Docus, pero sin spoilers. Solo te recomiendo que visites nuestro repositorio en GitHub en github.com. Soy Alexander Chopin, COO de 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 visites nuestro nuevo sitio web en NextLab. Puedes ver nuestros proyectos 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 comunidad de View que te ayuda a explorar la web y listar todos los sitios web creados 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. Puedes encontrar, obviamente, estos sitios web en nuestra organización de GitHub, porque amamos el código abierto. Gracias por tu atención.

QnA

Q&A sobre proyectos y aprendizaje de Nuxt.js

Short description:

Veamos las respuestas a la pregunta sobre los proyectos construidos con Nuxt.js. Las personas están utilizando Nuxt.js para una amplia gama de aplicaciones. Cuando se trata de construir aplicaciones más rápidas y sencillas, Nuxt3 es la opción a seguir. Aunque Nuxt3 aún no es estable, se recomienda comenzar con Nuxt2 y migrar más adelante. La documentación es el mejor lugar para aprender y comenzar, y también hay videos útiles de embajadores de Nuxt en YouTube. Utilizar Nuxt.js para un sitio web de redes sociales es una excelente opción, ya que es un caso de uso perfecto para sitios web modernos.

Increíble, gracias por tu charla, Alex. Y antes de pasar a la parte de preguntas y respuestas, veamos las respuestas a la pregunta que hiciste a nuestros asistentes. La pregunta fue, ¿qué tipo de proyectos estás construyendo con Nuxt.js? Parece que las personas están utilizando Nuxt.js para construir, bueno, casi cualquier cosa. ¿Te sorprende? Para nada, pero esta pregunta parece innecesaria ahora. Así que eso es algo muy positivo, ¿verdad? Increíble.

Veamos algunas de las preguntas que hicieron las personas. Alguien pregunta, aún no he utilizado Nuxt, pero tengo curiosidad. ¿Puede Nuxt3 ayudarnos a construir aplicaciones más rápidas y sencillas? Supongo que dirás que sí en comparación con la versión anterior. ¿Y qué hay de la curva de aprendizaje? Obviamente, debo recordarte que Nuxt3 aún no es estable. Entonces, si quieres comenzar un proyecto, te recomiendo que comiences con Nuxt2. Obviamente, porque Nuxt3 todavía está en data. Y podrás migrar a Nuxt3 cuando esto sea estable. Y luego necesitas al menos conocer Nuxt3 si quieres usar Nuxt de forma gratuita. Y lo mismo ocurre con Nuxt2. Necesitas conocer Nuxt2. Y ese es el único requisito que debes tener.

Entonces, si las personas quieren aprender o comenzar con esto, ¿dónde deberían comenzar? ¿Con la documentación? ¿Sugieres algún lugar de aprendizaje autodidacta? La documentación siempre es el mejor lugar. Esa es la fuente de verdad. Y actualmente estamos actualizando la documentación 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. Increíble. Otra pregunta es, ¿tiene sentido usar Nuxt.js para construir un sitio web de redes sociales? Sí, eso tiene sentido. Una red social es un sitio web moderno enorme. 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í, básicamente, puedes usarlo.

Fetching Data and 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 pronto serán de código abierto.

Otra pregunta, ¿qué quieres decir 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 eso es a lo que 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 de la renderización, como un HPA normal con los clientes. Me encantaría escuchar 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 la pregunta de Karon. Entonces, ¿puedes repetir la pregunta, por favor? ¿Cuándo se debe usar NUX? Yo uso Quasar. No sé si lo estoy pronunciando correctamente. Espero tenerlo bien. Sí, esa fue la pregunta. Eso estuvo genial. Entonces, puedes usarlo para aplicaciones web o más que solo sitios web. Quasar es una gran solución también, especialmente cuando quieres hacer desarrollos móviles. Ese es nuestro campo. No jugamos a este juego. Y nos enfocamos en el desarrollo de aplicaciones web y más que solo sitios web. Increíble.

¿Cuál es el objetivo del proyecto DOCUS en comparación con NUX.js? Entonces, eso es el siguiente software en la parte superior de NUX. NUX es poderoso para crear aplicaciones web sobre Vue. Pero aún así, hay muchas herramientas excelentes para crear sitios web modernos. Y queremos empaquetarlo en un nuevo proyecto, un nuevo software. Que es básicamente NUX más muchas características geniales. Como los módulos de contenido, la antomanización y muchas otras cosas. Y un panel de administración genial, y este genial DOCUS. Y nuestros sitios web están hechos con este software, que pronto será de código abierto. Como puedes imaginar, con el próximo lanzamiento gratuito, hemos estado muy ocupados con Next. Así que estamos parchando Next, y cuando DOCS esté listo para ser abierto, también será de código abierto.

Debugging Next Projects and Nuxt 3 Stability

Short description:

Otra pregunta sobre cómo depurar un proyecto Next en VS Code y la configuración recomendada. ¿Por qué comenzar un nuevo proyecto en Nuxt 2 y luego migrar a Nuxt 3? ¿Qué tan estable es Nuxt 3 y debería comenzar a migrar 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 de descifrar. ¿Tienes una configuración recomendada para depurar un proyecto Next en VS Code, utilizando recursos que encuentro en internet? Todavía tengo problemas con la depuración en VS Code, específicamente los puntos de interrupción no están en el lugar correcto.

De acuerdo. No tengo ninguna recomendación para VS Code. Pero te recomendaría hacer la pregunta en nuestro canal de Discord o en la sección de discusiones de GitHub. Y las personas que tienen el mismo problema que tú o la misma pila de tecnología pueden recomendarte una respuesta. Eso tiene mucho sentido.

Otra pregunta es, ¿por qué recomiendas comenzar un nuevo proyecto en Nuxt 2 y luego migrar a Nuxt 3? Porque, como puedes ver en la documentation de la versión 3, no todas las características están implementadas en Nuxt 3. Es posible que necesites algunas características que ya existen en Nuxt 2, pero que no tienes en Nuxt 3. Por ejemplo, como la generación de sitios estáticos, aún no está implementada en Nuxt 3. Pronto estará disponible, pero aún no está listo para ser utilizado en producción. Por eso recomiendo usar Nuxt 2, si quieres comenzar un negocio o algo muy estable, solo para asegurarte de que nada se rompa en dos meses, en términos de fechas. Puedo imaginar que mucha gente está preocupada por la migración, porque lleva tiempo, y a veces es tedioso, ¿verdad? No podemos esperar eso, así que no te preocupes, será muy sencillo.

Genial. Pregunta de Basch, Estoy trabajando en un gran proyecto utilizando Nuxt.js. ¿Qué tan estable es Nuxt 3? Siento que esta va a ser una de las preguntas más frecuentes. ¿Qué tan estable está en este momento y debería comenzar a migrarlo a Nuxt 3, o al menos sentar las bases para la migración? Obviamente, no quedarme en Nuxt, pero puedes comenzar a instalar Nuxt Bridge, que es el puente entre Nuxt 2 y Nuxt 3, con las características de Nuxt 3. Así es más estable, y luego desde Nuxt Bridge a Nuxt 3, será prácticamente transparente.

De acuerdo, en resumen, todos, esperen un momento. Me encanta que 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 en dos comunidades, React versus Vue, necesitamos tomarnos nuestro tiempo y asegurarnos de no romper el juego. Lo siento. El software actual que obtenemos es muy importante. Trabajamos en él durante cinco años, y queremos continuar durante los próximos cinco años.

Rendering Components on Front End in 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 backend ya ha preparado los elementos del DOM.

¡Genial! Muy bien. Sigan haciendo preguntas sobre las diferencias entre dos y tres. Vamos a abordar esta. ¿Los componentes se renderizarán en el lado del frontend si el backend ya ha preparado los elementos del DOM? ¿Puedes repetir la pregunta? Necesito repetir la pregunta para mí mismo, honestamente. ¿Los componentes se renderizarán en el lado del frontend si el backend ya ha preparado los elementos del DOM? Tal vez quieras que algunos componentes se rendericen solo en el lado del frontend y deshabilitar el renderizado en el lado del servidor para algunos componentes. Obviamente, sí. Se llama 'client-only' en Nuxt 2. Puedes colocar tus componentes dentro de los componentes 'client-only' y se renderizarán solo en el lado del cliente. Espero que esto responda la pregunta. Espero que sí, pero quién sabe. ¿Qué tipo de métricas deberíamos usar para decidir si usar Nuxt o simplemente quedarnos con Vue.js? Steela, ¿puedes resumir la pregunta? Creo que la gente se pregunta, ¿cuándo alguien debería elegir Nuxt en lugar de usar solo Vue.js? De acuerdo, Casey. Solo una propuesta. Necesitamos una propuesta de producto. Una propuesta, si no quieres mantener el renderizado en el lado del servidor con Vue y quieres trabajar en equipo y reutilizar los componentes de tu proyecto, módulos, complementos y crear una aplicación a gran escala, elige Nuxt. De lo contrario, quédate con Vue. Hay un párrafo interesante en la página web de Vue.js documentation que explica qué sigue y cuál es la diferencia entre Vue y Nuxt. No hay diferencia. Es solo una cuestión de arquitectura. Traemos esta convención de nuestra configuración porque el ecosistema de Vue es muy rico. Tenemos muchos complementos y es muy útil, y responde a todos los casos de uso. En nuestro caso, solo queremos proporcionar una plantilla para crear una aplicación web que pueda escalar, y no tener miedo de mantener partes complicadas con el renderizado en el lado del servidor. Correcto. Debido a que la gente no puede superar las preguntas sobre dos y tres, tengo una pregunta para ti. Es Hacktoberfest, que es mi época favorita del año. ¿Nuxt participa en Hacktoberfest? Y si es así, ¿en qué tipo de problemas o cosas te gustaría ver contribuciones? Por lo general, participamos todos los años en Hacktoberfest, pero este año lanzamos Nuxt3 en medio, y tuvimos que reorganizar todos los repositorios y dedicaciones, y eso prácticamente terminó el mes. Intentamos hacer nuestro mejor esfuerzo para participar, pero en este momento, somos Nuxt. Creo que eso es bastante justo. Entonces, también es justo decir que personalmente no estás participando en Hacktoberfest, ¿verdad? No. Tú sí, ¿verdad? Entonces, ¿en qué proyectos estás participando? Me gustaría saberlo. Es... Obviamente un RunDex, pero sí, no diré nada. Es una sorpresa. Tienes que seguirme en Twitter. ¡Oh, vale! ¡Eso es emocionante! Tal vez la gente pueda presentarte 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 Hello World 1, solo para tener un mejor acceso. Y desearía que hubiera más contribuciones a esos módulos porque eso me hace reír mucho, y realmente aprecio el compromiso de la comunidad y el humor. Muy bien, ¡así que escucharon al hombre! Más contribuciones divertidas, por favor. Parece que se nos acabaron las preguntas, y has respondido mi pregunta especial, así que estoy muy feliz. Espero que hayas pasado un buen rato, y realmente quiero agradecerte por unirte y por unirte a la sesión de preguntas y respuestas. Gracias a todos por verme y por 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

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.