Nuevas formas de Vue

Rate this content
Bookmark

Breve introducción a las nuevas características de Vue 3 y Vite, luego enfocarse en cómo esas características / mentalidad afectan la forma en que pensamos en las herramientas y la experiencia del desarrollador. Lo cual nos lleva a mi proyecto Vitesse y varios unplugins que mejoran aún más la experiencia del desarrollador de Vue (haré algunas demostraciones cortas en el medio). Finalmente, presentar las formas de utilizar esas nuevas características en las aplicaciones existentes de Vue 2 hoy y facilitar las migraciones.

16 min
21 Oct, 2021

Video Summary and Transcription

La charla discutió nuevas formas de usar Vue, incluyendo la introducción de la API de composición y la sintaxis de configuración de scripts. Se destacó la herramienta Vite por sus mejoras de rendimiento y mejoras en la experiencia del desarrollador. Se presentó la importación automática de componentes a través de los componentes del plugin Vite como una forma de mejorar la división de código y eliminar el registro manual. También se discutió el uso de los plugins Vite, Unplugin y el soporte de Vue 2. La charla mencionó que Nuxt 3 incluirá muchas de estas características.

Available in English

1. Introducción a las nuevas formas de Vue

Short description:

Hola a todos, me alegra estar aquí en Vue London. Hoy mi tema es las nuevas formas de Vue, cómo las nuevas herramientas y técnicas afectan la forma en que usamos Vue y construimos aplicaciones. En Vue 3, introdujimos un nuevo conjunto de API llamado API de composición. En la API de composición, solo tenemos una función llamada setup. Las funciones del ciclo de vida ahora se proporcionan como hooks, por lo que podemos tener un mejor soporte de TypeScript y una mejor composabilidad.

Hola a todos, me alegra estar aquí en Vue London. Hoy mi tema es las nuevas formas de Vue, cómo las nuevas herramientas y técnicas afectan la forma en que usamos Vue y construimos aplicaciones. Mi nombre es Anthony Fu, y soy miembro colaborador de Vue y Vite. También soy el creador de SlideDev, Vueuse, VDesk y otros proyectos de código abierto. Soy un fanático del código abierto y actualmente trabajo en Nuxt Labs. Mi nombre de usuario en GitHub es antfu, también puedes encontrarme en Twitter. Antes de comenzar, quiero agradecer a todos mis patrocinadores por apoyar mi trabajo. Si encuentras mi trabajo útil, también puedes patrocinarme en GitHub, significaría mucho para mí.

Entonces hablemos sobre el tema de hoy, las nuevas formas de Vue. Comencemos hablando de Vue 2 primero. Debajo de eso, tenemos los componentes de archivo único de Vue. En este componente, tenemos una etiqueta de plantilla y una etiqueta de script. En la etiqueta de script, necesitaremos importar las cosas que queremos. Por ejemplo, import Vue from 'vue' y luego exportar el objeto de componentes predeterminado usando Vue.extend, y luego necesitaremos registrar nuestros componentes, hacer cosas y declarar datos y métodos. El problema aquí es que tenemos demasiado código de plegado de Scala para cada componente, y también las mezclas están limitadas para la reutilización de nuestro código y también tenemos algunos problemas de soporte de TypeScript.

Para resolver esto, en Vue 3, introdujimos un nuevo conjunto de API llamado API de composición. Hagamos una comparación rápida aquí. A la izquierda, tenemos la API de opciones, y a la derecha, tenemos la nueva API de composición. Como puedes ver, en la API de opciones, solíamos tener múltiples propiedades para el objeto. Por ejemplo, tenían método, crear, y así sucesivamente. Pero en la API de composición, solo tenemos una función llamada setup. Las funciones del ciclo de vida ahora se proporcionan como hooks, por lo que puedes usarlas dentro de nuestras funciones de setup. Así que tenemos todo dentro del contexto único. De esta manera, podemos tener un mejor soporte de TypeScript. Pero además de eso, lo más importante es que podemos tener una mejor composabilidad. Por ejemplo, tenemos un componente con las funciones de setup. Si queremos reutilizar esta lógica, simplemente podemos copiarla y tenerla dentro de nuevos archivos y envolverla con las funciones. En este caso, lo llamamos useDark. Entonces podemos refactorizar nuestros componentes para importar las funciones useDark y reutilizarlas. Los componentes se comportarán exactamente igual que antes, pero ahora podemos reutilizar nuestras funciones dentro de otros componentes y tener una mejor organización de nuestra lógica.

2. Sintaxis de configuración de script y herramientas de Vite

Short description:

En la nueva sintaxis de configuración de script, las variables, funciones y componentes dentro de la configuración de script están disponibles directamente dentro de los componentes. La sintaxis V-bind dentro de la etiqueta de estilo permite una mejor organización de la plantilla y el estilo. Vue 3 y Vite ofrecen un mejor rendimiento, experiencia de desarrollo y nuevas formas de utilizar Vue. Con la nueva sintaxis de configuración de script, ya no es necesario registrar componentes. La importación automática de componentes a través del complemento de componentes de Vite proporciona una mejor división de código y elimina la necesidad de registro manual.

Entonces hablemos sobre la sintaxis de configuración de script. Como puedes ver, incluso con la nueva API de composición, tenemos muchos códigos de andamiaje en nuestros componentes. Por ejemplo, en este caso, las líneas resaltadas son las cosas que realmente nos importan, pero debemos escribir el resto para que Vue lo entienda. En la nueva sintaxis de configuración de script, podemos declararlos todos en el nivel superior. Y las variables, funciones y componentes dentro de la configuración de script están disponibles directamente dentro de los componentes. Esto se introdujo inicialmente en Vue 3.1 como una función experimental y ahora es estable en Vue 3.2.

Otra nueva característica es la sintaxis V-bind dentro de la etiqueta de estilo. En el pasado, si queríamos tener estilos dinámicos en los componentes, primero debíamos declarar algunos datos reactivos dentro de la sección de datos y luego vincular los datos dentro de la plantilla. Pero ahora, con V-bind, podemos tener la vinculación dentro de nuestra etiqueta de estilo, lo que nos permite tener una mejor organización de la plantilla y el estilo.

Finalmente, hablemos de la nueva herramienta predeterminada, Vite. ¿Qué es Vite? Apuesto a que muchos de ustedes ya han oído hablar de eso, pero en caso de que no, hagamos una breve introducción. Solíamos tener empaquetadores como Webpack y Rollup. El problema con ellos es que generalmente están diseñados para la construcción de producción y necesitan empaquetar todo el proyecto para iniciar el servidor de desarrollo. También implican configuraciones complejas y las sustituciones de módulos se vuelven más lentas a medida que el proyecto crece. Ahora tenemos servidores de desarrollo, como Snowpack y Vite. Estos servidores de desarrollo están diseñados específicamente para el desarrollo web. Aprovechamos el soporte nativo de ESM del navegador y ya no necesitamos empaquetar el código. El servidor se inicia de inmediato y solo transpilamos los módulos según sea necesario. De esta manera, también tenemos sustituciones de módulos en tiempo real y muchas más posibilidades. Entonces, ¿qué nos ofrecen Vue 3 y Vite? No solo un mejor rendimiento y una mejor experiencia de desarrollo, sino también nuevas formas de utilizar Vue. Veamos cómo usamos los componentes de Vue. Primero, necesitamos importarlos y darles un nombre, y luego registrar los componentes para poder usarlos en la plantilla. El problema aquí es que nuestro código se vuelve bastante verboso y el nombre de cada componente se repite al menos cuatro veces. Esto no solo ralentiza nuestro desarrollo, sino que también cambiar el nombre de los componentes se vuelve bastante frustrante. Con la nueva sintaxis de configuración de script, ya no es necesario registrar los componentes. Pero el problema es que el nombre aún se repite tres veces. ¿Y si podemos mejorarlo? Introduzcamos la importación automática de componentes a través del complemento de componentes de Vite. Dado que ya conocemos el nombre de cada componente, podemos mapearlos directamente para usarlos en la plantilla. ¿Cómo lo hacemos? Utilizamos la resolución de componentes en tiempo de compilación para los componentes en el directorio de componentes de origen. El uso es similar al de los registros globales, pero la diferencia es que con la importación automática, podemos lograr una mejor división de código y ya no necesitamos hacer el registro manual.

3. Auto-importación de componentes y complemento Vite

Short description:

Incluso más, podemos omitir la resolución en tiempo de ejecución para mejorar aún más el rendimiento. Presentamos la auto-importación de componentes a través del complemento de componentes de Vite. Con la auto-importación, tenemos un mejor soporte para la división de código y no es necesario el registro manual. Podemos escribir un complemento simple de Vite para reemplazar el uso de resolveComponent con la importación real del componente. El servidor de desarrollo de Vite permite más imaginación con el complemento de Vite en la especificación, proporcionando una interfaz de usuario para inspeccionar las transformaciones de módulos. También es posible la auto-importación de la API, lo que hace que los componentes sean aún más claros.

Incluso más, podemos omitir la resolución en tiempo de ejecución para mejorar aún más el rendimiento. Presentamos la auto-importación de componentes a través del complemento de componentes de Vite. Dado que ya conocemos los nombres de archivo de cada componente, podemos hacer la vinculación y eso se puede usar directamente dentro de las plantillas.

Como puedes ver, eso es todo lo que necesitamos. Entonces, ¿cómo funciona esto? Primero, utilizamos la resolución de componentes en tiempo de compilación para los componentes en el directorio de origen slash components. El uso se parece a los componentes globales, pero la diferencia es que con la auto-importación, tenemos un mejor soporte para la división de código y tampoco es necesario el registro manual. Incluso más, con este enfoque, podemos omitir la resolución en tiempo de ejecución y mejorar aún más el rendimiento.

Entonces, desglosemos cómo funciona la compilación. Si copias este código en nuestros entornos de prueba en línea, sfc.vuejs.org, puedes ver cómo se compila mediante el compilador SFC en el siguiente código. Nuestro uso de tres componentes se compila en estas tres declaraciones. La función resolveComponents es un ayudante interno de Vue para resolver los componentes de la instancia actual del componente. Entonces, ¿qué podemos hacer en Vite para que funcione la auto-importación? Podemos escribir un complemento muy simple de Vite aquí. Primero, utilizamos enforcePorts para asegurarnos de que el complemento se ejecute después de la compilación de Vue. Y luego utilizamos el gancho transform para modificar el código. En el gancho transform, filtramos los archivos que no son de Vue. Y finalmente, reemplazamos todo el uso de resolveComponent por la importación real del componente. Si estás interesado, puedes consultar la documentación de Vite para obtener más información. Y como resultado, eliminamos el uso de resolveComponents y los importamos directamente. Y con eso, la auto-importación funciona.

Otra cosa que vale la pena mencionar es que, dado que Vite es un servidor de desarrollo, podemos tener más imaginación aquí. Con el complemento de Vite en la especificación, ahora puedes inspeccionar la relación entre los módulos y cómo se transforma el módulo para cada complemento. Esto puede ser realmente útil para depurar complementos o comprender cómo funciona Vite internamente. Entonces, una cosa que vale la pena mencionar es que, dado que Vite es un servidor de desarrollo, podemos tener más imaginación aquí. Con el complemento de Vite en la especificación, ahora puedes tener una interfaz de usuario para inspeccionar el estado intermedio de cada transformación para cada módulo y también la relación entre los módulos. Esto puede ser realmente útil para los autores de complementos para depurar sus complementos y también para principiantes para comprender mejor cómo funciona Vite internamente. Entonces, volvamos a la auto-importación. Similar a la auto-importación de componentes, incluso podemos hacer posible la auto-importación de la API. Al escanear el uso de cada función, ahora podemos inyectar la importación desde la vista cuando no está presente. De esta manera, podemos tener nuestros componentes aún más claros. Hagamos un resumen rápido del ecosistema de Vite.

4. Complementos Vite, Unplugin y Soporte de Vue 2

Short description:

Los complementos de Vite, Unplugin, el soporte de Vue 2 y la importación automática de componentes ofrecen una mejor experiencia de desarrollo. Unplugin, una interfaz de complemento universal, permite escribir complementos para múltiples herramientas y frameworks. Vue 2 es compatible con polyfills, el paquete de Composition API y Unplugin vue 2 square setup. El complemento Vite para Vue 2 y Nuxt Vite traen la experiencia de Vite a las aplicaciones de Nuxt 2. Se pueden eliminar los registros de componentes y se pueden utilizar la sintaxis de configuración cuadrada y la Composition API de Vue. Hay disponibles plantillas de inicio y Vite para extensiones web. Nuxt 3 incluirá muchas de estas características.

Primero tenemos los complementos de Vite para la auto-importación de componentes, el complemento de Vite para la importación automática de la API, el complemento de Vite para iconos bajo demanda, el complemento de Vite para inspeccionar el estado intermedio de Vite, el complemento de Vite para páginas con enrutamiento basado en archivos similar a Nuxt o Next.js, el complemento de Vite para Windows CSS que es similar a Tailwind bajo demanda pero con una compilación y HMR mucho más rápidos, el complemento de Vite para Node que trae HMR de Vite para aplicaciones de backend de Node.js, el complemento de Vite para importaciones de estilos bajo demanda y mucho más. Puedes encontrar más en nuestra lista oficial de increíbles complementos de Vite.

Entonces, Vite ha inspirado muchos complementos y mejores formas de mejorar nuestra experiencia de desarrollo. Pero eso no se limita a Vite. Vamos a llevarlos a tus proyectos existentes hoy. Presentamos Unplugin, que es uno de los proyectos en los que estoy trabajando en Nuxt Labs. Unplugin es una interfaz de complemento universal para Webpack, Vite, Rollup y más. De esta manera, puedes escribir una vez tus complementos y que funcionen en muchas herramientas y frameworks principales. Echemos un vistazo a cómo funciona Unplugin.

Así que a la izquierda tenemos nuestros complementos tradicionales de Vite. Para convertirlos en Unplugin, simplemente los envolvemos con una función createUnplugin y luego podemos acceder a los complementos de Vite a través de unplugin.vite, unplugin.rollup y unplugin.webpack. Con eso, podemos mover muchos complementos de Vite a Unplugins. Movemos el complemento de Vite para componentes a Unplugin para componentes de vista. La auto-importación de componentes de Vite se convierte en la auto-importación de Unplugin. Y durante esta refactorización, también hicimos posible para Vue, React, Svelte, Verlina o cualquier framework que te guste. Y también el complemento de Vite para iconos ahora es Unplugin para iconos. Con eso, puedes combinar cualquier combinación de la siguiente lista como desees.

¿Y qué hay de Vue 2? Supongo que algunos de ustedes todavía están atrapados en Vue 2 debido al soporte de IE o al proceso de migración de código. Pero no te preocupes, te tenemos cubierto. Para Vue 2, proporcionamos polyfills para la funcionalidad del código. Para Composition API, proporcionamos el paquete vue-composition-api para devolver la Composition API a tu aplicación Vue. Para la configuración cuadrada y refsugar, proporcionamos el paquete Unplugin vue 2 square setup. Ten en cuenta que esto también es un Unplugin, lo que significa que funcionará en Vue CLI, Nuxt 2 o tu configuración personalizada de Webpack. Para el soporte de Vite, tenemos el complemento Vite para Vue 2 y Nuxt Vite, que llevan la experiencia de Vite a tus aplicaciones de Nuxt 2 manteniendo el gran ecosistema de Nuxt. Y para la mejora del desarrollador, los complementos mencionados anteriormente también admiten Vue 2 de forma nativa. En resumen, esto es lo que puedes obtener hoy, sin importar si estás en Vue 2 o 3, Nuxt 2, Vue CLI o Vite. Puedes eliminar los registros de componentes, utilizar la última sintaxis de configuración cuadrada y también la Composition API de Vue. También proporcionamos algunas plantillas de inicio para que las obtengas rápidamente. Vite es una de las plantillas de inicio de Vite más populares que te brinda la mejor experiencia de Vue. Vite Nuxt trae la experiencia de Vite a Nuxt 2. También tenemos Vite para extensiones web. Para probarlo, puedes ejecutar el siguiente comando en tu máquina. Por último, un pequeño adelanto, Nuxt 3 tendrá muchas de estas características mencionadas hoy integradas directamente para que las puedas usar de inmediato. Eso es todo por hoy. Las diapositivas se pueden encontrar en mi sitio antfu.me. Gracias.

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.

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.