Espera un momento ...
¿Te gustaría llevar mi curso de Laravel, gratis?
Sólo debes ingresar tus datos:
Lo que aprenderás con este curso
- Todos los conceptos fundamentales de Vue 3
- Gestionar el estado de un proyecto de VueJS con Pinia
- Definir rutas frontend y parámetros de ruta usando Vue Router
- Usar un framework de components, como Vuetify
Este curso está dedicado a
Desarrolladores web que quieren dar el siguiente paso en su carrera
Personas interesadas en aprender a programar una aplicación web desde cero
Programadores interesados en buenas prácticas de desarrollo y escribir código en inglés
Profesionales interesados en aprender un framework moderno y mejorar su salario
Requisitos
Conocimientos básicos de JavaScript o cualquier otro lenguaje de programación
Muchas ganas por aprender un nuevo framework
Contenido del curso
1 Introducción al curso 02:04
Breve introducción al curso. Empezamos revisando qué es Vue, y visitando la documentación oficial.
2 Probar Vue rápidamente 02:31
En esta lección escribirás tu primer programa de Vue, sin necesidad de instalar ni configurar nada.
3 Crear nuevo proyecto 04:09
Empecemos a crear nuestro proyecto de Vue.js 3 con todo lo necesario: Typescript, ESLint, Vue Router, Pinia, etcétera.
4 IDE y extensiones 01:56
Siguiendo la recomendación de la documentación oficial, configuramos Visual Studio Code y la extensión Volar.
5 Instalar Visual Studio Code 01:12
Instalemos juntos Visual Studio Code. Este paso es opcional pero recomendado.
6 Git y GitHub 03:11
Instalemos juntos Git, y creemos un repositorio remoto para nuestro proyecto en GitHub. Este paso es opcional pero recomendado.
+1 recurso asociado a esta clase
7 Vite y modo desarrollo 05:55
Veamos brevemente qué es Vite, y cómo usarlo para empezar a ver nuestros cambios mientras desarrollamos.
8 Interface 04:04
Veamos brevemente qué es Typescript y cómo empezar a usarlo, declarando nuestra primera interface.
9 Union 01:59
Veamos cómo podemos unir múltiples tipos al momento de definir nuestras variables.
10 Union Literals 02:33
Veamos cómo podemos usar Union con valores literales, y un ejemplo de cómo esto nos puede resultar de ayuda.
11 Function Greeting 02:11
En esta lección vemos que podemos definir tipos para los parámetros de nuestras funciones, y gracias a Typescript obtenemos un autocompletado.
12 Array & Generic 01:53
Veamos cómo adaptar la función definida en la lección anterior para que acepte un arreglo como parámetro.
13 Una Interface no es una Class 03:22
En esta lección vemos que una interface nos permite declarar un tipo, pero no es lo mismo que una clase.
14 Una Class puede implementar una Interface 05:34
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.
15 Visión general 05:40
Empecemos a organizar de forma general el proyecto que vamos a desarrollar.
16 Páginas (rutas) 01:50
¿Qué rutas podrán visitar los usuarios al usar nuestra aplicación de Ecommerce?
17 Introducción a Vuetify 03:01
Veamos qué es Vuetify y cómo nos ayudará a agilizar nuestros tiempos de desarrollo.
18 Probar Vuetify rápidamente 01:27
Veamos cómo probar los componentes de Vuetify rápidamente a través de su playground.
19 Entendiendo proyecto base 06:58
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.
20 Options API y Composition API 01:13
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.
21 Options API: Estado 01:44
Veamos cómo definir el estado de un componente usando Options API.
22 Template: Eventos 01:49
Veamos cómo podemos escuchar eventos sobre nuestros componentes, directamente sobre nuestro template.
23 Options API: Métodos 01:34
Veamos cómo definir métodos para nuestro componente, usando Options API.
24 Options API: Hooks 01:26
Veamos cómo definir Hooks para nuestros componentes, usando Options API.
25 Tarea y nuevo componente 02:09
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.
26 Composition API: Estado 01:44
Veamos cómo definir el estado de un componente usando Composition API.
27 Composition API: Funciones 01:07
Veamos cómo definir funciones para nuestro componente, usando Composition API.
28 Composition API: Hooks 01:24
Veamos cómo definir Hooks para nuestros componentes, usando Composition API.
29 Options API vs Composition API 02:08
¿Qué opción debemos usar y por qué? ¿En qué casos conviene un estilo u otro?
30 Push changes 00:58
Recuerda siempre subir tus cambios, de manera continua, a tu repositorio remoto.
31 Directivas v-if y v-else 03:00
Veamos qué son las directivas, y cómo podemos mostrar elementos de manera condicionada.
32 Directiva v-for 04:11
Veamos cómo mostrar elementos en nuestro template según un arreglo de datos, haciendo uso de la directiva v-for.
33 Componente hijo: ProductCard 03:37
Veamos cómo podemos importar y usar un componente dentro de otro. En este caso, nuestro componente ProductList hará uso del componente ProductCard.
34 Props: De padre a hijo 03:36
Veamos qué son y cómo definir Props. Aprendamos a enviar datos desde un componente padre hacia un componente hijo.
35 PropType 06:57
Veamos cómo definir una interface para nuestros productos, y cómo usarla para validar nuestros props.
36 Un botón sobre cada card 03:40
Breve repaso sobre Props. Luego agregamos un botón sobre cada ProductCard, de modo que posteriormente permita agregar cada producto al carrito de compras.
37 Events: De hijo a padre 05:42
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.
38 Shorthands 01:08
Ten en cuenta que algunas directivas se pueden escribir de forma abreviada. Veamos un ejemplo.
39 Event naming convention 00:37
Los nombres para tus eventos deben de preferencia usar camelCase o bien kebab-case. Veamos cómo ambos funcionan correctamente.
40 CartDetail: Comunicación entre hermanos 08:02
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.
41 Aumentar cantidad o agregar detalle 03:15
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.
42 Install & use 04:52
Veamos cómo instalar Vuetify sobre nuestro proyecto, y cómo empezar a usarlo.
43 Dark & light theme 02:45
Veamos cómo Vuetify nos permite personalizar los colores de nuestra aplicación, escogiendo entre un tema oscuro y un tema claro.
44 Grid system 04:00
Veamos cómo usar el sistema de grillas que nos ofrece Vuetify, a través de sus componentes v-row y v-col.
45 Card: Title & Actions 02:50
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.
46 Props, Slots & Markup 03:38
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.
47 Chip & Spacing 05:30
Veamos cómo trabajar con margins y paddings cuando usamos Vuetify. Así mismo cómo agregar un componente chip para el precio.
48 Container 02:25
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.
49 List 03:14
Veamos cómo usar el componente v-list que nos ofrece Vuetify, para listar los detalles de nuestro carrito de compras.
50 Repaso e Introducción 03:36
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.
51 Configuración y Ruta /cart 10:05
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!
52 Organizar components 02:04
En esta lección organizamos mejor los componentes de nuestro proyecto. Así mismo eliminamos componentes que ya no necesitamos y que vinieron creados inicialmente.
53 Vuetify: App Bar & App Main 05:13
Veamos cómo agregar una barra de navegación, en la parte superior de nuestra aplicación.
54 Custom Router Links 03:31
Veamos cómo podemos usar la propiedad custom sobre un elemento RouterLink para tener mayor control sobre la navegación y los estilos.
55 Vuetify: Container 01:39
Veamos cómo aplicar un contenedor de forma general para todas nuestras vistas, no sólo HomeView.
56 AboutView 01:54
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.
57 Mismo componente distinto estado & Vue Extension 03:45
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.
58 Props y Events no son suficientes 05:47
Veamos cómo compartir estado entre componentes que están en distintas páginas, primero sin hacer uso de Pinia.
59 Pinia vs Vuex 02:09
¿Qué tienen en común y en qué se diferencian?
60 Pinia: Preguntas y Respuestas 02:27
Veamos cuáles son las preguntas más comunes respecto a Pinia, y respondamos cada una de ellas.
61 Store: State, Getters & Actions 01:42
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.
62 Store: Options & Composition API 05:19
Veamos cómo definir una Store con Pinia, usando tanto Options API como Composition API.
63 Define Store: Cart 04:01
En esta lección creamos nuestro primer store, llamado Cart, para gestionar el estado de nuestro carrito de compras.
64 Computed Properties 07:46
Veamos qué son las computed properties y cómo podemos usarlas. Este concepto es importante para posteriormente entender cómo usar los stores.
65 Cómo usar nuestro Store 03:37
Veamos cómo acceder al estado de nuestro store desde nuestros componentes, haciendo uso de computed properties.
66 Cleanup y cómo ejecutar Store actions 04:18
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.
67 CategoryList & type Category 08:49
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.
68 Badge: Cantidad de items en el carrito 03:00
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.
69 Nuevo componente para nuestro v-app-bar 03:09
A fin de organizar mejor nuestro proyecto vamos a definir un nuevo componente, llamado TopBar, representando a nuestra barra de navegación superior.
70 Getter: Cart items count 05:20
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.
71 Ocultar badge y asignar color 03:45
Veamos cómo ocultar el badge inicialmente y mostrarlo sólo cuando el carrito contiene productos. Así mismo, cómo modificar su color.
72 Detalle: Aumentar y disminuir unidades 06:02
Para un producto que está en el carrito, agreguemos ahora botones, que permitan aumentar y disminuir la cantidad de unidades a comprar.
73 Detalle: Eliminar producto 02:30
Veamos cómo eliminar un producto de nuestro carrito de compras, independientemente de la cantidad de unidades.
74 Invocar una acción desde otra 01:54
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.
75 Carrito vacío: Mensaje y RouterLink 04:04
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.
76 Active button e Identificar ruta activa 02:17
Veamos cómo marcar un RouterLink como activo, según la ruta en la que nos encontramos navegando.
77 Vuetify Icons 05:05
Veamos cómo configurar y empezar a usar icons cuando trabajamos con Vuetify.
78 Button: Size & Icon 04:38
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.
79 ESLint 10:59
Antes de empezar a refactorizar veamos qué es ESLint, y cómo podemos usar esta herramienta para identificar errores en tiempo de compilación.
80 Refactor: CartDetail & Product 06:04
Anteriormente nuestro detalle sólo contenía el id de cada producto. Veamos cómo refactorizar nuestra implementación para empezar a mostrar información de cada producto que tenemos en el carrito.
81 mapActions 05:46
Veamos cómo usar el helper mapActions que nos provee Pinia para simplificar nuestro código.
82 mapState 02:17
Veamos cómo usar el helper mapState que nos provee Pinia para simplificar nuestro código.
83 Product image & URL 04:31
En esta lección agregamos imágenes para nuestros productos, adaptando nuestro type y componentes.
84 Local images 02:22
Veamos cómo podemos agregar imágenes a nuestro proyecto, y cargarlas de manera local para nuestros productos.
85 Refactor: ShoppingCartItem 07:23
Continuemos organizando nuestro proyecto, creando un componente nuevo para representar a cada item de nuestro carrito de compras. Mostremos además una imagen circular por cada producto agregado.
86 Refactor: VList to VTable 09:28
Veamos cómo refactorizar nuestros componentes asociados al carrito, para que usen una tabla en vez de una lista. Además, agreguemos el precio por cada producto y un subtotal a pagar.
87 Resumen de la compra & Total 06:53
Agreguemos ahora un nuevo componente para mostrar un resumen de la compra, con el monto total a pagar.
88 Screen readers 01:43
Agreguemos un encabezado para nuestra última columna, pero agreguemos una clase al texto para que no sea visible, pero esté disponible para lectores de pantalla.
89 Logo: avatar & img 01:42
Veamos rápidamente cómo agregar un logo para nuestra página, aprovechando los componentes v-avatar y v-img.
90 Relación: Product & Category 04:29
En esta lección clasificamos a nuestros productos por categorías, agregamos imágenes a todos los productos que faltaban, y agregamos una descripción a cada categoría.
+1 recurso asociado a esta clase
91 Category route & Programmatic navigation 05:23
Veamos cómo definir rutas con parámetros, y luego cómo navegar entre rutas usando código javascript en vez de la etiqueta RouterLink.
92 Navigation Guards 05:46
Veamos cómo hacer uso de Navigation Guards, para detectar cambios en nuestras rutas, y así mismo, capturar parámetros de ruta.
93 Products Store 06:26
Procedamos a definir un nuevo store para nuestros productos. Así mismo, veamos cómo filtrar productos por categoría, haciendo uso de un getter.
94 Filtrar por categoría 02:33
Ya tenemos el categoryId de la ruta seleccionada, y así mismo un store de productos, entonces juntemos ambas partes para hacer funcionar nuestro filtro.
95 Función externa 02:43
Veamos cómo definir y usar una función externa a nuestros componentes de Vue.
96 Opción: Todas las categorías 03:54
Veamos cómo agregar una opción "Todas" a nuestra lista de categorías. Así mismo, cómo mantener el link de Home activo para cuando se apliquen filtros.
97 VList: Active Category Item 02:14
Veamos cómo marcar como "active" al list item correspondiente a la ruta que está visitando el usuario. Esto con la intención de resaltar la categoría escogida.
98 VList: Subheader 01:30
Veamos cómo organizar nuestros items del menú izquierdo usando encabezados.
99 State: Order 02:48
Empecemos a implementar nuestras opciones para ordenar productos, en base a precio y nombre. Para ello definimos una nueva variable de estado y agregamos acciones.
100 Order by price & name 06:03
Veamos cómo ordenar nuestros productos por precio y por nombre, sin afectar al filtro existente de categorías.
101 VList: Active Order Item 05:09
Veamos cómo resaltar en el menú de la izquierda, el orden aplicado sobre los productos.
102 4 criterios de orden 05:35
Veamos cómo ordenar en base al precio y al nombre, tanto de manera ascendente como descendente, sin afectar el filtro por categorías.
103 Define Store: Categories 05:16
Empecemos definiendo un store para gestionar las categorías de nuestro proyecto. Ya que ello no debe ser responsabilidad de un solo componente.
104 Componente: CategoryOptions 07:20
Continuemos organizando nuestros componentes. Ahora creamos un nuevo componente CategoryOptions y renombramos nuestro componente principal de la izquierda por LeftMenu.
105 Intro: Responsabilidades 05:08
Hagamos un breve repaso sobre los componentes, los stores, y la data asociada, tanto a categorías como productos.
106 Move data to JSON files 04:41
Empecemos creando una carpeta data, y definiendo allí 2 archivos JSON con los datos de nuestras categorías y productos.
107 Import JSON data 04:18
Veamos cómo importar datos JSON sobre nuestros stores correspondientes.
108 Comando npm run build 07:57
Veamos qué peticiones realiza el navegador al abrir nuestro proyecto web. Y luego cuál es la diferencia entre "npm run dev" y "npm run build".
109 Comando npm run preview 04:50
Veamos qué hace este comando a diferencia del anterior. Comparemos cómo se descargan nuestros assets cuando nuestro proyecto ha sido compilado para producción vs para desarrollo.
110 Network Waterfall 05:42
Veamos cómo nuestra página carga los assets requeridos para su funcionamiento, y en qué orden. Así mismo, qué ocurre cuando la visitamos simulando una conexión a internet lenta.
111 Importancia & Fetch Products 11:56
Veamos por qué es importante solicitar nuestra data a través de peticiones HTTP en vez de incluirla como parte de nuestros assets js. Así mismo, veamos cómo usar Fetch.
+1 recurso asociado a esta clase
112 Fetch Categories 02:26
Luego de ver cómo cargar los productos a través de una petición GET, hagamos lo mismo para cargar las categorías.
113 Delay: setTimeout 03:14
Veamos cómo agregar un delay sobre nuestros requests, a fin de simular a un servidor que tarda unos segundos antes de devolver una respuesta.
114 Vuetify Labs: VSkeleton 06:02
Algunos componentes aún están en etapa de desarrollo. ¿Cómo identificarlos?
115 Progreso lineal y circular 08:07
Veamos cómo mostrar un indicador de progreso mientras nuestros datos aún se encuentran cargando. Usemos un indicador de progreso lineal para las categorías, y uno de progreso circular para los productos.
116 Pasos siguientes: API & Promises 02:34
Algunos temas no están relacionados directamente con Vue 3, pero te recomiendo aprender más sobre ellos si aún estás empezando. Por ejemplo, el desarrollo de APIs (tema backend), y las Promesas (característica de JavaScript).
+2 recursos asociados a esta clase
117 Persistencia de datos & Local Storage 06:53
Veamos por qué es importante contar con un mecanismo de persistencia de datos, y cómo funciona Local Storage para ayudarnos con este propósito. Además vemos alternativas de cómo usarlo con Vue.
118 VueUse & Persistir nuestro carrito 04:18
Veamos cómo usar la biblioteca VueUse sobre nuestro proyecto de Vue 3. Específicamente para persistir nuestro carrito de compras.
119 WhatsApp API 06:02
Veamos cómo usar la API de WhatsApp para enviar la información de nuestro pedido a través de mensajes.
120 Enviar orden con detalles del carrito 10:11
Veamos cómo concretar un pedido, enviando los detalles del carrito de compras, a través de un mensaje de WhatsApp. Veamos cómo personalizar el mensaje con saltos de línea y emojis.
121 Responsive Grid system 08:37
Veamos cómo aprovechar el sistema de grillas de Vuetify, para que nuestra aplicación web sea responsive, y se vea bien en distintos tamaños de pantalla.
122 Responsive Visibility & Spacing 06:05
Veamos cómo el sistema de breakpoints no se limita a la distribución de componentes en grillas, sino que también puede aplicarse para modificar la visibilidad y el espaciado para nuestros elementos, según los distintos tamaños de pantalla.
123 Recapitulación & Despedida 06:08
Hagamos un recuento de todo lo que has aprendido en este curso ?. Palabras finales de cierre.
Preguntas frecuentes
Con una membresía premium obtienes acceso a todos los cursos de la plataforma, incluyendo este.
Como usuario premium tendrás acceso a la sección de preguntas y respuestas de la plataforma.
En nuestro foro privado, el 100% de las preguntas reciben respuesta 🙂.
Los pagos se pueden realizar vía PayPal o con tarjeta (crédito o débito).
Escríbenos a [email protected] si deseas coordinar otro medio de pago.
Esta serie consta de 123 capítulos.
Nivel de dificultad: Aprendiz.
Inicia sesión para empezar el curso y llevar un control de tu progreso.