Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript

Siguiendo la recomendación de la documentación oficial, configuramos Visual Studio Code y la extensión Volar.

Instalemos juntos Visual Studio Code. Este paso es opcional pero recomendado.

Instalemos juntos Git, y creemos un repositorio remoto para nuestro proyecto en GitHub. Este paso es opcional pero recomendado.

Veamos brevemente qué es Vite, y cómo usarlo para empezar a ver nuestros cambios mientras desarrollamos.

Veamos brevemente qué es Typescript y cómo empezar a usarlo, declarando nuestra primera interface.

Veamos cómo podemos unir múltiples tipos al momento de definir nuestras variables.

Veamos cómo podemos usar Union con valores literales, y un ejemplo de cómo esto nos puede resultar de ayuda.

En esta lección vemos que podemos definir tipos para los parámetros de nuestras funciones, y gracias a Typescript obtenemos un autocompletado.

Veamos cómo adaptar la función definida en la lección anterior para que acepte un arreglo como parámetro.

En esta lección vemos que una interface nos permite declarar un tipo, pero no es lo mismo que una clase.

Veamos cómo definir una clase y su diferencia con una interface. Así mismo, cómo usarla en nuestro ejemplo de la lección anterior junto al operador instanceof.

Empecemos a organizar de forma general el proyecto que vamos a desarrollar.

¿Qué rutas podrán visitar los usuarios al usar nuestra aplicación de Ecommerce?

Veamos qué es Vuetify y cómo nos ayudará a agilizar nuestros tiempos de desarrollo.

Veamos cómo probar los componentes de Vuetify rápidamente a través de su playground.

Veamos qué hace el proyecto que tenemos creado, y cómo simplificarlo, desactivando las características que aún no estamos usando. Finalmente, creamos nuestro primer componente.

Vue.js nos ofrece 2 estilos distintos para definir nuestros components. Veamos de manera general cuál es la diferencia, y qué estilos están disponibles según la versión de Vue.

Veamos cómo definir el estado de un componente usando Options API.

Veamos cómo podemos escuchar eventos sobre nuestros componentes, directamente sobre nuestro template.

Veamos cómo definir métodos para nuestro componente, usando Options API.

Veamos cómo definir Hooks para nuestros componentes, usando Options API.

En esta lección te propongo un pequeño ejercicio de práctica. Luego creamos un nuevo componente de ejemplo, y organizamos ambos en una carpeta.

Veamos cómo definir el estado de un componente usando Composition API.

Veamos cómo definir funciones para nuestro componente, usando Composition API.

Veamos cómo definir Hooks para nuestros componentes, usando Composition API.

¿Qué opción debemos usar y por qué? ¿En qué casos conviene un estilo u otro?

Recuerda siempre subir tus cambios, de manera continua, a tu repositorio remoto.

Veamos qué son las directivas, y cómo podemos mostrar elementos de manera condicionada.

Veamos cómo mostrar elementos en nuestro template según un arreglo de datos, haciendo uso de la directiva v-for.

Veamos cómo podemos importar y usar un componente dentro de otro. En este caso, nuestro componente ProductList hará uso del componente ProductCard.

Veamos qué son y cómo definir Props. Aprendamos a enviar datos desde un componente padre hacia un componente hijo.

Veamos cómo definir una interface para nuestros productos, y cómo usarla para validar nuestros props.

Breve repaso sobre Props. Luego agregamos un botón sobre cada ProductCard, de modo que posteriormente permita agregar cada producto al carrito de compras.

Veamos cómo comunicar datos datos desde un componente hijo hacia un componente padre, a través de eventos. Los eventos se emiten y escuchan, veamos cómo.

Ten en cuenta que algunas directivas se pueden escribir de forma abreviada. Veamos un ejemplo.

Los nombres para tus eventos deben de preferencia usar camelCase o bien kebab-case. Veamos cómo ambos funcionan correctamente.

En esta lección agregamos una interface y un componente nuevo para representar al detalle de nuestro carrito de compras. Así mismo, cómo podemos comunicar componentes hermanos, que se encuentran a un mismo nivel.

En esta lección agregamos una condición para no repetir productos en nuestro carrito. Si el producto ya se encuentra en el carrito, sólo aumentamos la cantidad a comprar, y de caso contrario, agregamos el producto como un nuevo detalle.

Veamos cómo instalar Vuetify sobre nuestro proyecto, y cómo empezar a usarlo.

Veamos cómo Vuetify nos permite personalizar los colores de nuestra aplicación, escogiendo entre un tema oscuro y un tema claro.

Veamos cómo usar el sistema de grillas que nos ofrece Vuetify, a través de sus componentes v-row y v-col.

De pronto nuestro elemento button no luce correctamente. Veamos cómo reemplazarlo por un componente de Vuetify equivalente, y así mismo cómo definir un título para nuestros cards.

Veamos las 3 alternativas que tenemos para definir el contenido de un componente. En este caso, mejoramos la apariencia de nuestras cards, agregando una imagen y posicionando correctamente su contenido.

Veamos cómo trabajar con margins y paddings cuando usamos Vuetify. Así mismo cómo agregar un componente chip para el precio.

Veamos cómo hacer uso del componente v-container para corregir el espacio alrededor de nuestro contenido. También agregamos un card para nuestro carrito.

Veamos cómo usar el componente v-list que nos ofrece Vuetify, para listar los detalles de nuestro carrito de compras.

Hacemos un breve repaso sobre la estructura y configuración de nuestro proyecto. Finalmente vemos por qué es importante usar Vue Router para nuestra aplicación.

En esta lección configuramos nuestro Vue Router y definimos nuestras primeras rutas. El resultado es que ya podemos navegar a través de ellas!

En esta lección organizamos mejor los componentes de nuestro proyecto. Así mismo eliminamos componentes que ya no necesitamos y que vinieron creados inicialmente.

Veamos cómo agregar una barra de navegación, en la parte superior de nuestra aplicación.

Veamos cómo podemos usar la propiedad custom sobre un elemento RouterLink para tener mayor control sobre la navegación y los estilos.

Veamos cómo aplicar un contenedor de forma general para todas nuestras vistas, no sólo HomeView.

En esta lección agregamos rápidamente un diseño a nuestra vista About, y demostramos que un SFC puede funcionar sólo con una etiqueta template.

En esta lección vemos cómo el estado de cada instancia de un componente es independiente. También instalamos la extensión de Vue para la DevTools.

Veamos cómo compartir estado entre componentes que están en distintas páginas, primero sin hacer uso de Pinia.

¿Qué tienen en común y en qué se diferencian?

Veamos cuáles son las preguntas más comunes respecto a Pinia, y respondamos cada una de ellas.

Veamos cómo se define una Store con Pinia, y la similitud que tiene con el estado y métodos de los componentes que ya hemos revisado.

Veamos cómo definir una Store con Pinia, usando tanto Options API como Composition API.

En esta lección creamos nuestro primer store, llamado Cart, para gestionar el estado de nuestro carrito de compras.

Veamos qué son las computed properties y cómo podemos usarlas. Este concepto es importante para posteriormente entender cómo usar los stores.

Veamos cómo acceder al estado de nuestro store desde nuestros componentes, haciendo uso de computed properties.

Empezamos limpiando un poco nuestro código, porque ya no necesitamos enviar tantos props ni eventos. Luego vemos cómo invocar acciones de nuestro Store.

Veamos cómo agregar una lista de Categorías al lado izquierdo de nuestros productos. Para esto nos apoyamos del sistema de grillas, creamos un nuevo componente y una nueva interface.

Veamos cómo usar el componente badge de Vuetify, para mostrar un círculo en la esquina superior derecha con la cantidad de items que han sido agregados al carrito.

A fin de organizar mejor nuestro proyecto vamos a definir un nuevo componente, llamado TopBar, representando a nuestra barra de navegación superior.

Veamos cómo definir un Getter en nuestro Store, y cómo usarlo para mostrar la cantidad total de unidades en nuestro carrito de compras.

Veamos cómo ocultar el badge inicialmente y mostrarlo sólo cuando el carrito contiene productos. Así mismo, cómo modificar su color.

Para un producto que está en el carrito, agreguemos ahora botones, que permitan aumentar y disminuir la cantidad de unidades a comprar.

Veamos cómo eliminar un producto de nuestro carrito de compras, independientemente de la cantidad de unidades.

Veamos cómo es posible invocar a una acción desde otra, para reutilizar parte de nuestra lógica ya escrita. En este caso lo usamos para eliminar detalles cuando la cantidad llega a ser cero.

Si el carrito está vacío, a fin de no mostrar una página sin contenido, mostremos un mensaje al usuario, y un enlace para guiar su navegación.

Veamos cómo marcar un RouterLink como activo, según la ruta en la que nos encontramos navegando.

Veamos cómo configurar y empezar a usar icons cuando trabajamos con Vuetify.

A fin de mejorar la apariencia de nuestros botones, vamos a asignarles un tamaño específico y un ícono que represente a cada uno.