Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Vue.js 3 - La Guía Completa - Composition Pinia MEVN 10 Apps

Name: Vue.js 3 - La Guía Completa - Composition Pinia MEVN 10 Apps
Rating: 4.8 (762 reviews)

Aprende Vue.js creando Proyectos Reales aprende MEVN Pinia Composition Vue Router SFC Vuetify Firebase Composables APIs

Created byJuan Pablo De la torre Valdez

Last updated 4/2026

Spanish

What you'll learn

Aprender Vue 3 y su ecosistema como Vue Router, Pinia, Composables, VueFire y más
Comunicar tus proyectos Vue con API's
Crear REST API's con el MEVN Stack - MongoDB Express Vuejs y Node
Aprender en base a proyectos que podrás utilizar en tu portafolio
Aprender las API's reactivas de Vue como Ref, Reactive, Watches y Computed
Métodos de Ciclo de Vida en Vue
Crear tus propios Composables
Pinia para manejar un estado global
Vue Router para proyectos con múltiples páginas
Desarrollo FullStack con Firebase y MEVN
Autenticación con Firebase y MEVN
Seguridad con Firebase y MEVN
Crear proyectos con gran performance con Firebase y MEVN
Integrar Tailwind y Vuetify a tus proyectos Vuejs

Course content

54 sections • 539 lectures • 40h 43m total length

Proyectos 01 a 03 - Fundamentos de Vue.js9:57
Veamos los 3 primeros proyectos de este curso!
Proyectos 04 a 07 - API's, REST API's, Vue Router, Composables y Pinia11:32
Proyectos 08 y 09 - FullStack Vue.js con Firebase - Vuetify Vue Router Pinia11:44
Proyecto 10 - Full Stack MEVN con Tailwind Vue Router Pinia Auth JWT y más!10:39
¿Qué es Vue.js? Herramientas necesarias y más2:23
Veamos brevemente que es Vue.js y las herramientas necesarias para aprenderlo

Introducción a JS Moderno y cuanto debes saber antes de comenzar con Vue1:19
Este capítulo sirve como introducción / recordatorio a JS Moderno. veamos que es necesario conocer antes de empezar con Vue
Preparando los Materiales de Inicio (descarga materiales aqui)1:41
En este video podrás descargar los materiales para comenzar el curso!
Variables con let y sus caracteristicas6:05
En JS podemos crear variables con let y const, veamos primero let
Variables con const y sus caracteristicas3:11
Ahora veremos las variables con const
Tipos de Dato en JS8:48
En JavaScript tenemos diferentes tipos de dato, veamos algunos de ellos!
Introducción a Objetos8:44
Los objetos son la parte más importante en JS, veamos como se crean
Manipulación de Objetos5:25
Veamos como realizar algunas operaciones en objetos
Destructuring de 2 o más objetos3:14
Es muy común realizar destructuring de 2 o más objetos y encontrar que algunas variables tienen el mismo nombre, veamos como solucionarlo
Unir 2 objetos - Reescribiendo sus propiedades o manteniendo sus propiedades2:42
Veamos como unir 2 objetos con Object.assign() y otra forma para no perder los datos!
Template Strings4:47
En este video veamos que son los Template Strings!
Introducción a Arrays3:34
Veamos una breve introducción a Arrays
Manipular Arrays9:00
En este video veamos como manipular arrays
Destructuring de arrays5:06
También es posible aplicar destructuring de arrays, veamos como hacerlo
Iteradores de Arrays5:55
Veamos algunos iteradores en JS, más en concreto forEach y Map
Funciones con Function Declararation7:40
Vamos a comenzar con funciones; en este video veremos primero Function Declaration
Funciones con Function Expression2:27
Ahora veamos el otro tipo de funciones que son más comunes; function expression
Arrow Functions y sus caracteristicas5:29
En este video veamos los arrow functions y algunas de sus caracteristicas!
Array Methods con Arrow Functions6:47
Veamos los array methods con arrow functions
Código Condicional en JavaScript3:53
Veamos un poco sobre código condicional en JS
Operadores de Comparación == y === y porque evaluan diferente las variables3:47
Veamos los operadores de comparación y porque entregan una evaluación diferente
Múltiples condiciones con OR y AND6:37
Veamos como agrupar múltiples condiciones para ejecutar el mismo código
Operador Ternario4:16
Un operador ternario permite simplificar en una linea una condición, evaluarla y ejecutar código, veamos como hacerlo!
Optional Chaining3:44
En este video veamos el optional chaining, de lo más nuevo en JS
Scope3:28
En este video videos que es el Scope de las variables
Seleccionando Elementos del DOM con querySelector6:33
En este video veamos como seleccionar elementos con querySelector
Modificando Textos en JS4:06
Veamos como modificar textos en JS
Eventos en JS - Clicks7:42
Los eventos más comunes en JS son los clicks, veamos como ejecutar código cuando ocurra uno
Eventos en JS - Input8:02
En este video veamos el otro tipo de eventos que es muy común; Input!
Eventos en JS - Submit6:08
Finalmente veamos el evento de tipo Submit
Ejercicio: Validación de Formularios en JS9:05
En este video veamos un poco de validación de formularios con JS
Modulos JS o ESM9:15
Los modulos en JS son una gran adición y muy utilizados en Vue.js, veamos como usarlos!
Fetch API con Promises7:44
En este video veamos que es Fetch API con Promises!
Fetch API con Async Await5:33
Ahora veamos Fetch API con Async Await
Recomendaciones para múltiples Fetch con Async Await7:10
Veamos como trabajar con múltiples async await y evitar este error!

El Proyecto que vamos a construir (descarga código final aquí)2:17
Veamos el proyecto de este capítulo!
Creando nuestro primer Proyecto con Vite6:05
Creando el primer proyecto de Vue.js!
Single File Components (SFA) en Vue.js - CSS, JS y HTML en un solo archivo5:50
Veamos que son los Single File Components en Vue.js
Conociendo la estructura de Vue.js5:16
De HTML a Vue.js ( Descarga materiales aquí)3:52
API Styles en Vue.js - Composition API y Options API7:05
En Vue.js hay diferentes formas de escribir código, veamos cuales y sus caracteristicas
¿Qué es el State en Vue.js? y diferencias entre ref y reactive7:52
Veamos las API's para manejar el state en Vue.js
Añadiendo Datos al state con reactive (enlace gist aquí)3:49
Veamos como añadir datos al State utilizando Reactive
Añadiendo Datos al state con ref5:12
Ahora veamos sobre el state con Ref
Iterando sobre el State y que son las Directivas en Vue.js5:03
Veamos sobre las directivas de Vue.js
Creando un Componente en Vue.js y pasando datos con Props7:16
Veamos como crear un componente y pasarle datos via props
Finalizando el Componente de Guitarra, atributos dinamicos y más4:04
Veamos que son los atributos dinamicos en Vue.js
Eventos en Vue.js - Inline Handlers y Method Handlers5:36
Veamos los eventos en Vue.js; Inline y method!
Eventos en Componentes Personalizados6:35
Veamos que son los component events, o básicamente crear tus propios eventos!
Pasar información de un componente hijo al padre con $emit2:19
Veamos como pasar información del hijo al padre via Emits
Emitiendo un Evento para añadir elementos al carrito2:36
Emitiendo y agregando elementos al carrito
Creando el Header y el Footer2:38
Veamos como crear Header y Footer
Detectando el si el carrito esta vacio o tiene elementos6:51
Veamos como etectar si el carrito esta vacio o tiene elementos
Mostrando el Contenido del carrito3:31
Veamos como mostrar el contenido del carrito
Evitar Elementos Duplicados en el carrito4:25
Veamos como evitar elementos duplicados en el carrito
Añadiendo 2 eventos nuevos: Añadir y Disminuir la cantidad de artículos3:48
Veamos como añadir control de cantidades para elementos del carrito
Actualizando las Cantidades del Carrito4:27
En este video veremos como actualizar las cantidades del carrito
Mostrando la Información de la guitarra principal4:55
En este video veremos como añadir la guitarra principal al Header
Calculando el Total a pagar con un Computed Property6:07
Veamos como utilizar los Computed Properties para calcular el total a pagar
Eliminar Articulos del Carrito3:18
En este video veremos como eliminar articulos del carrito!
RETO 01 - Vaciar Carrito0:36
Veamos un reto para este curso!
SOLUCIÓN RETO 01 - Vaciar Carrito2:21
En este video veremos la solución al reto!
Almacenar Carrito en LocalStorage3:27
Veamos como almacenar el carrito a Storage
Añadiendo watch para observar los cambios en un state y recapitulando5:40
Veamos como utilizar watch en vue.js
Deployment de Proyectos de Vue.js en Netlify5:42
Veamos como realizar el Deployment de este proyecto hacia Netlify!

El Proyecto que vamos a construir (descarga código final aquí)3:13
Veamos el proyecto incluido en este capítulo
Creando el Proyecto1:27
Configurando Tailwindcss 43:48
Primeros pasos con Tailwind y el Proyecto2:05
Creando el Componente para el Formulario3:29
Vamos a comenzar a crear nuestro componente de formulario
Primeros pasos con el Formulario5:26
Vamos a continuar añadiendo el formulario
Finalizando el Formulario3:55
En este video vamos a finalizar el Formulario
Como leer datos ingresados a los Inputs en Vue.js5:47
En este video veremos como leer los datos ingresados en un input!
Simplificar la Lectura de un input con v-model1:15
v-model simplifica mucho la lectura de datos en un input, veamos como utilizarlo
Colocando los datos ingresados en el State3:01
Veamos como colocar los datos en el State!
Añadiendo el resto de campos al State1:10
Veamos como añadir el resto de campos al state!
Submit de Formularios y Event Modifiers3:23
Veamos como manejar el submit en Vue.js
Validando Formularios en Vue.js3:03
Veamos como añadir validación a nuestro formulario
Creando un State de Alertas para mensajes de error2:58
Vamos a colocar las alertas en un state!
Creando un componente para mostrar las alertas3:14
Vamos a crear el componente que mostrará las alertas!
Añadiendo dinamismo a nuestra alerta5:59
Veamos como añadir mayor dinamismo a nuestra alerta
Primeros pasos con el listado de pacientes2:59
Vamos a comenzar con el listado de pacientes
Recomendaciones para manejar el State en tus proyectos4:10
Veamos algunas recomendaciones para el State!
Actualizar un State desde el Formulario en otro componente4:50
Veamos como actualizar el state que esta en otro componente
Leer y Validar los datos ingresados desde el Componente hijo4:14
Veamos como leer y validar los datos desde el componente hijo
Emitir Eventos hacia el Padre4:14
Veamos como emitir un evento hacia el padre
Mostrando los Pacientes Agregados4:39
Veamos como mostrar los pacientes agregados
Reiniciar el Formulario una vez agregado el paciente3:00
Veamos como resetear el formulario una vez que fue agregado el paciente
Mostrar una alerta cuando un paciente es agregado correctamente2:16
Veamos como mostrar una alerta cuando un paciente se agrega correctamente
Generando un ID único para cada paciente2:59
Veamos como crear un identificador a cada paciente
Editar Pacientes - Identificar el Paciente a Editar2:53
Vamos a comenzar con la edición de pacientes
Editar Pacientes - Llenar el Formulario con los datos almacenados3:29
Veamos como cargar la información del paciente a editar
Detectando si es un paciente nuevo o edición para evitar registros duplicados5:48
Veamos como detectar si es paciente nuevo o edición
Cambiando la Interfaz si es un paciente nuevo o edición3:58
Veamos como cambiar los textos si es paciente nuevo o edición
Eliminar Pacientes y RETO 023:35
Veamos el reto 02 de este curso!
SOLUCIÓN RETO 024:14
Veamos la respuesta a este reto

El Proyecto que vamos a construir (descarga código final aquí)4:00
Veamos el proyecto que construiremos en este capítulo
Creando el Proyecto y Primeros pasos (Gist y Materiales aquí)3:35
Vamos a comenzar este proyecto
Como funciona <style> en los Single File Components? que es <style scoped> y más3:59
En este video veremos como funciona el style en los SFC
Añadiendo CSS global2:46
Veamos como añadir CSS Global!
Primeros pasos con el Formulario de Presupuesto4:40
Vamos a comenzar con el formulario
Finalizando el Formulario de Presupuesto4:49
Vamos a finalizar el formulario de presupuesto
Validando el Presupuesto2:37
Veamos como validar el presupuesto
Mostrando una alerta de error si el presupuesto es invalido6:07
Veamos como mostrar un mensaje si el presupuesto es no válido
Mostrando de Forma Condicional un componente si el presupuesto es válido3:31
Veamos como ocultar el Formulario y mostrar la interfaz si el formulario es válido
Trabajando con la pantalla de Gastos, Disponible, Gastado y más4:25
Vamos a añadir elementos a la interfaz principal
CSS al Panel de Presupuesto7:50
Veamos como aplicar CSS al panel de presupuesto
Mostrando el Presupuesto y disponible2:35
Veamos como mostrar el presupuesto y disponible
Formatear Cantidades como Dinero3:20
Vamos a formatear las cantidades para que se vean mejor
Añadiendo un botón para Nuevos Gastos3:19
Vamos a añadir el botón para crear gastos
Creando el Componente para Modal2:53
En este video estaremos creando el Componente de Modal
CSS al Componente de Modal4:17
Veamos como añadir CSS al Componente de Modal
Añadiendo el Formulario en el Modal3:49
Veamos como añadir el formulario en el Modal
CSS al Formulario del Modal3:44
Vamos a añadir código CSS al formulario
Añadiendo una Animación al Modal6:08
Veamos como añadir el Modal
Creando el State para los Gastos3:42
Vamos a comenzar con el State de Gastos
Escribiendo en el State principal desde el Modal con $emit2:47
Veamos como emitir hacia el state principal
Validando los Nuevos Gastos5:44
Vamos a añadir validación a nuevos gastos
Emitiendo Gastos hacia el Componente padre2:12
Veamos como emitir hacia el componente padre
Almacenando Gastos en el State2:23
Vamos a guardar el gasto en el state
Generando un ID único sin dependencias3:33
Veamos como añadir un ID para cada gasto sin dependencias
Ocultar Modal y reiniciar formulario una vez se agrega un gasto1:49
Veamos como cerrar el modal una vez agreguemos un gasto
Primeros pasos mostrando los Gastos3:42
Vamos a comenzar a mostrar los gastos
Mostrar los gastos e Iconos de categorías8:37
Veamos como formatear la fecha de un gasto
Aplicando CSS a los gastos5:11
Vamos a darle estilos a los gastos!
Fijar el Modal si tenemos muchos gastos2:47
Vamos a fijar el modal en caso de que haya múltiples gastos
Calcular el Total Gastado en base a los Gastos y RETO 035:34
Veamos como calcular lo gastado y el reto 03!
SOLUCIÓN RETO 031:47
Veamos la solución al reto 03
Validar que el Usuario no Gaste más de lo disponible2:51
Veamos como validar que el usuario no gaste más de lo que definió
Detectando un Gasto a Editar4:36
Vamos a comenzar con edición de gastos
Reiniciar el Formulario cada que el Modal se cierre3:54
Tenemos que reiniciar el formulario cada que se cierre el modal, veamos como hacerlo
Evitar Registros Duplicados4:06
Veamos como evitar que los registros se dupliquen!
Ajustando el Calculo del Presupuesto restante en edición y RETO 047:12
Veamos como solucionar un detalle en nuestro presupuesto cuando estamos editando y reto 04
SOLUCIÓN RETO 042:34
Veamos la solución al reto 04
Creando un botón para eliminar Gastos2:22
Veamos como crear el botón para eliminar gastos
Eliminando un Gasto3:27
Veamos como eliminar un gasto
Creando un Componente para filtrar gastos por categoría5:23
Veamos como crear un componente para filtrar los gastos por categoría
Mostrando los gastos de la categoría seleccionada4:15
Veamos como mostrar los gastos de la categoría seleccionada
Almacenando Datos en Local Storage y RETO 054:00
Veamos como tener gastos persistentes con storage
SOLUCIÓN RETO 052:04
Veamos la solución a este reto
Reiniciar la aplicación para definir un nuevo presupuesto y gastos2:25
Veamos como reiniciar la app para volver a utilizarla
Graficar el avance en el gasto5:15
Vamos a comenzar con el gráfico que reporta el avance de gastos
Mostrando un Porcentaje de gastos7:43
Veamos como mostrar el porcentaje de lo gastado

El Proyecto que vamos a construir (descarga código final aquí)3:12
Veamos el proyecto que vamos a construir
¿Qué son las API's?4:36
En este video estaremos viendo que son las API's
Creando el Proyecto y Copiando Materiales2:53
Veamos como arrancar este proyecto y mover los materiales hacia el recién creado proyecto
Comenzando con Nuestra aplicación4:31
Vamos a comenzar con nuestro proyecto!
Consultando la API para obtener las criptomonedas con mayor volumen7:19
Veamos como obtener las Criptomonedas que tienen mayor volumen de transacciones
Mostrando las Criptomonedas en el Formulario3:24
Veamos como mostrar las Criptomonedas en el Formulario
Leyendo los valores que deseamos cotizar2:02
Veamos como leer los datos del Formulario para enviarlos hacia la API y obtener la cotización
Validar el Formulario3:51
Vamos a validar este formulario
Construir la URL para cotizar3:06
Veamos como construir la URL que va a obtener la cotización
Obtener el resultado de la cotización dinamicamente7:08
Veamos como obtener los datos de la cotización realizada
Mostrar el Resultado de la cotización y RETO 065:37
Vamos a mostrar el resultado de la cotización y un reto
SOLUCIÓN RETO 062:38
Vamos a solucionar este reto
Mostrar un Spinner en lo que obtenemos una cotización5:50
Veamos como mostrar un Spinner en lo que obtenemos la cotización
¿Qué son los Composables en Vue.js?5:03
Veamos que son los Composables en Vue.js
Moviendo nuestro código a un Composable7:41
Vamos a mover el código hacia un Composable
Limpiando nuestro Template con Componentes y composables6:01
Veamos como limpiar un poco nuestro código con los composables!

El Proyecto que vamos a construir (descarga código finalizado aquí)2:11
Veamos el Proyecto que vamos a construir!
Creando el Proyecto y obteniendo un API Key3:58
Vamos a obtener nuestro API Key!
Creando el Formulario Principal3:58
Vamos a crear el componente de Formulario
Colocando en el State los datos ingresados1:44
Veamos como colocar en el state los datos ingresados
Validando el Formulario3:57
Veamos como validar el formulario y mostrar la alerta
Creando un Composable para el Clima2:51
Una vez que vimos que son los composables, vamos a crear uno para el Clima
Pasando el State hacia el Composable1:56
Vamos a mover el state hacia el composable
Añadiendo el API Key en variables de entorno4:34
Veamos como ocultar el API key en una variable de entorno
Primer llamado hacia la API2:30
Veamos como realizar el primer llamado hacia la API
Extrayendo Valores de la consulta previa2:42
Veamos como leer ciertos valores de la consulta anterior para enviarlos al endpoint de clima
Consultando el Clima2:13
Veamos como consultar y obtener el clima
Creando el Componente para Mostrar el Clima3:23
Vamos a crear un componente para el clima
Mostrando el Clima5:17
En este video mostraremos el clima
Añadiendo un Spinner de Carga3:24
Veamos como añadir el spinner de carga!
Mostrando un Mensaje si no hay resultados3:00
Veamos como mostrar un mensaje cuando no hay resultados
Deployment del Proyecto9:46
Veamos como subir este proyecto que utiliza un API Key

El Proyecto que vamos a construir (Descarga código final aquí)4:03
Routing en Vue con Vue Router1:09
Veamos que es el Routing en Vue.js
Creando un Proyecto con Routing incluido2:29
Veamos como crear un proyecto que ya incluya Routing
Primeros pasos con Vue Router8:08
Veamos que incluye un proyecto con Vue Router
Creando nuestra primer vista4:10
Vamos a añadir nuestra primer vista
Instalando TailwindCSS 41:22
En Este video veremos como instalar Tailwind!
Creando el Header2:34
Vamos a añadir el Header de nuestro proyecto!
Creando la Vista y Ruta para Nuevos Clientes5:10
Vamos a añadir la lista y ruta del Nuevo Cliente
Añadiendo Links para poder navegar a lo largo de diferentes páginas4:35
Veamos como se puede navegar a lo largo de diferentes páginas
Mostrando el Nombre de la página actual2:32
Veamos como mostrar el nombre de la página actual
¿Cómo pasar Props desde el Router hasta la vista?2:29
Veamos como pasar props hacia la vista
¿Qué es FormKit?1:01
En este video veremos que es Formkit
Instalando FormKit y nuestro primer Formulario3:59
Vamos a instalar Formkit
Agregando el primer campo del Formulario y que incluye Formkit5:50
Veamos como añadir el primer campo a nuestro formulario
Añadiendo un Tema para el CSS de Formkit3:16
Formkit contiene algunos temas para el CSS, veamos como habilitar alguno de ellos
Agregando Campos al formulario y más reglas de validación de FormKit3:46
FormKit tiene validación incluida, veamos como añadirla
Validaciones Complejas en FormKit3:48
Veamos como realizar validaciones complejas en Formkit
Configuraciones Adicionales al Form3:18
Veamos algunas configuraciones extras que podemos hacerle al Form
Manejando el Submit y Leer Datos del Formulario3:43
Veamos como trabajar con el Submit y leer los datos ingresados
Pre-llenar un Formulario con FormData2:15
Veamos como utilizar formData para llenar un formulario
¿Qué son las REST API?3:25
En este video veremos que son las REST API
Creando una REST API en menos de 5 minutos con JSON-Server5:39
Veamos como crear una REST API en menos de 5 minutos con JSON-Server
Consultando la REST API en Vue.js3:00
Veamos como consultar una REST API En Vue.js
Otras formas de consultar la API5:02
Veamos otras formas de obtener datos en una REST API
Creando un Computed property que revise si tenemos clientes2:21
Veamos como crear un Computed que revise si tenemos clientes en nuestra api
Registrando Nuevos clientes con Formkit, Axios y JSON Server3:26
Veamos como enviar una petición para añadir nuevos clientes
Redireccionando al Usuario después de añadir un cliente5:02
Veamos como re-direccionar a un usuario una vez que añade un nuevo cliente
Mostrando la información de Clientes (Parte 1 de 2)3:00
Vamos a mostrar la información de Clientes
Mostrando la información de Clientes (Parte 2 de 2)5:01
Vamos a finalizar este componente
Simplicando los llamados Axios con una url base para consultas2:30
Veamos como simplificar los llamados axios cuando la URL es la misma
Centralizando las URL's de nuestra API en un Servicio2:42
Veamos como mover los endpoints a un servicio
Moviendo el Endpoint para crear nuevos clientes hacia el Servicio2:33
Veamos como mover el endpoint de nuevos clientes hacia el servicio
Detectando el Estado del Cliente3:35
Veamos como detectar el estado del cliente para cambiarlo al valor contrario
Comenzando con la edición de Clientes y Routing Dinamico en Vue-router5:09
Veamos como habilitar routing dinamico en Vue-Router
Obteniendo el ID del Cliente a Editar2:53
Veamos como obtener el ID del Cliente a Editar
Consultando la API para obtener la información del Cliente a editar2:57
Primer paso es obtener los datos del cliente a editar!
Llenando el Formulario del Usuario a editar (Parte 1 de 2)2:52
Una vez que obtenemos los datos del cliente, debemos llenar el formulario, veamos como hacerlo
Llenando el Formulario del Usuario a editar (Parte 2 de 2)3:01
Una vez que obtenemos los datos del cliente, debemos llenar el formulario, veamos como hacerlo
Actualizando un Cliente y diferencias entre PUT y PATCH6:25
Veamos las diferencias entre PUT y PATCH
Cambiando el Estado de un cliente7:08
Veamos como cambiar el estado de un cliente
Eliminando Clientes4:35
Vamos a finalizar este video eliminando a los clientes

El Proyecto que vamos a construir (descarga código final aquí)3:32
Veamos el proyecto que vamos a construir
¿Qué es Pinia? Creando el Proyecto y el primer Store4:50
Primeros ajustes en el proyecto1:19
Instalando tailwindcss1:07
Creando el Formulario de búsqueda5:37
Vamos a añadir el formulario de búsqueda
Añadiendo la página de favoritos y routing entre páginas6:42
Veamos como añadir routing entre páginas
Detectando la página de inicio3:45
Veamos como detectar la página de inicio para solo ahí tener el formulario
Creando nuestro primer store2:19
Vamos a añadir nuestro primer Store
Como consumir un Store en Views o Componentes2:38
Veamos como podrás acceder a los datos de Stores y componentes
Llamando a nuestra API desde el Store y mostrando Categorias en el Formulario6:23
Veamos como mandar llamar a nuestra API
Creando un State en el Store y escribiendo en el2:59
Veamos como escribir en el State del Store
Comunicando el Submit con el Store2:28
Veamos como comunicar el submit del formulario con el store
Creando los Services para la API y Config de Axios3:09
Veamos como crear el servicio en axios para simplificar llamados
Consultando la API con los valores ingresados en el Formulario4:01
Veamos como consultar nuestra API una vez que leemos los datos ingresados
Primeros pasos mostrando los resultados de la consulta3:26
Veamos ocmo mostrar los resultados de la consulta
Finalizando el Componente que muestra la bebida6:01
Vamos a finalizar el componente que muestra cada bebida
Obtener la Receta Completa al dar click en una receta4:30
Cada receta la vamos a mostrar en un Modal; veamos como identificar su ID
Instalando y Configurando Headless UI4:24
Veamos como instalar y configurar Headless UI
Creando un Store para el Modal3:38
Vamos a añadir un Store para el Modal
Comunicación entre Stores para Mostrar y ocultar el Modal3:48
Veamos como comunicar stores!
Mostrando información de la receta en el Modal5:20
Veamos como mostrar la información de la receta
Iterando en Ingredientes e Instrucciones7:43
Veamos como mostrar ingredientes e instrucciones
Creando el Store de Favoritos3:05
Veamos como tener favoritos en su store!
Agregando Recetas a Favoritos2:38
Veamos como añadir recetas a favoritos
Almacenando Favoritos en LocalStorage1:48
Veamos como almacenar favoritos en storage
Mostrando los Favoritos3:34
Veamos como mostrar los favoritos
Evitar Favoritos Duplicados3:47
Veamos como evitar tener favoritos duplicados
Cambiando el Texto si un favorito ya se encuentra agregado4:06
Veamos como mostrar si un favorito ya esta en favoritos entonces cambiar su texto
Eliminar Favoritos3:51
Veamos como eliminar favoritos
Realizando algunas mejoras a la experiencia de usuario3:28
Veamos como realizar algunos ajustes
Mostrando Texto cuando no hay favoritos1:40
Veamos como mostrar un texto cuando no hay favoritos
Mostrando Texto cuando no hay recetas o el usuario no ha buscado1:43
Veamos como mostrar texto condicional cuando el usuario aún no realiza la búsqueda
Notificaciones en Vue.js3:09
Veamos como tener notificaciones en nuestro proyecto
Mostrando Notificación de agregado5:28
Veamos como mostrar la notificación de agregado
Reseteando el State en Pinia4:00
Veamos como resetear el state de Pinia
Mostrando Notificación cuando un elemento se elimina5:30
Veamos como eliminar un elemento de favoritos y mostrar su notificación
Mostrando la validación del Formulario en una validación4:20
Veamos como re-utilizar el sistema de notificaciones para mostrar la validación del formulario

Primeros pasos creando la ruta y diseño2:24
Generando el API KEY e instalando dependencias5:10
Configurando la API de IA2:22
Creando un Store para todo lo relacionado con la IA3:06
Añadiendo validación a las búsquedas3:50
Creando el Servicio para interacturar con la IA4:33
Eligiendo el Modelo a consultar y enviando la petición6:13
Probando diferentes Modelos de IA Generativa7:03
Últimos ajustes al proyecto6:07
Añadir comportamiento a la IA6:48

Requirements

Conocimientos sólidos de HTML y CSS
Bases de JavaScript ( Se incluye introducción o recordatorio en este curso )
Visual Studio Code y Chrome ya instalados
Conocimientos de desarrollo web en general como URL's, Dev Tools, etc

Description

Si eres de las personas que aprenden mejor cuando creas proyectos reales este curso es para ti

Algunos de los temas que vas a aprender en este curso incluyen:

State con Ref y Reactive
Computed Properties
Watchers en Vue.js
Ciclo de Vida de los componentes
Single File Components - Template - Script y Style en un mismo archivo.
Directivas en Vue.js incluyendo v-for v-if v-else
Eventos y Eventos Personalizados
Emits y Props
Pinia para manejar un estado global
Vue Router para crear proyectos con múltiples páginas.
Crear y Consumir API's y REST API's en Vue.js
Firebase para guardar datos, archivos y autenticación de usuarios
MEVN - MongoDB Express Vue.js y Node.js creando una aplicación Full Stack con panel de administración, API, y mucho más
Integrar tailwindcss a Vue.js
Utilizar Vuetify
Crear y definir composables para separación y re-utilización de código.

Los proyectos están diseñados para ir de menor a mayor complejidad, puedes utilizar estos proyectos para un portafolio, venderlos a un cliente pero no pueden formar parte de un curso ya que se tomarán acciones legales.

01 .- GuitarLA

El Primer proyecto del curso, haremos un carrito de compras para una tienda de guitarras, el usuario puede añadir guitarras, cambiar sus cantidades, eliminarlas, veremos como calcular el total con un computed property y aprenderás sobre State, Single File Components, Eventos y Emits, props, watches y mucho más!

02.- Admin de Pacientes

Segundo proyecto del curso, estaremos aprendiendo mucho sobre formularios y manejo de state en Vue.js, le permitiremos al usuario actualizar sus registros que sin duda añadirá mayor complejidad a este proyecto; es el primer proyecto que utiliza tailwindcss

03.- Control de Gastos

En este proyecto añadiremos mayor cantidad de componentes y operaciones; sacaremos máximo provecho de las API's reactivas de Vue.js para crear una aplicación muy dinamica e interactiva. Aprenderás más de los fundamentos de JS.

04.- Cotizador de Criptomonedas

Este es el primer proyecto que consume una API externa algo que será muy común en tu carrera como dev: enviar parametros a API's y consumirlos para presentarlos.

05.- App de Clima

Similar al Proyecto Anterior en este estaremos creando una aplicación de clima que se conecta a una API externa, esta API requiere un Key y enviar los datos de cierta forma; una vez enviada la petición veremos como obtener los datos y presentarlos.

06.- Registro de Clientes

Las API's anteriores reciben datos y entregan información; pero en este estaremos creando una REST API, a diferencia de las anteriores las REST API tienen la caracteristica que reciben peticiones para obtener datos, crearlos, eliminarlos y actualizarlos. También es el primer proyecto con Vue Router.

07.- Buscador de Recetas de Bebidas

Este proyecto ya incluye un Stack con más herramientas: Vue Router, Tailwindcss y Pinia para manejar un estado global en nuestra aplicación.

08.- Bienes Raices

Primer proyecto Full Stack; utilizaremos firebase para el backend; con firebase podemos subir archivos, crear datos en una base de datos real, autenticar usuarios sin tener conocimientos de backend, ideal para proyectos de clientes, pruebas técnicas o para aprender más sobre backend.

09.- Punto de Venta

El Punto de Venta es el segundo proyecto Full Stack, en este añadiremos una mayor cantidad de funciones, colecciones y dependencias para sacar máximo provecho de firebase, agregaremos diferentes Stores, más páginas, diferentes áreas, un panel de administración y mucho más.

10.- App Salon

El Proyecto MEVN que incluye un backend hecho en Node.js / Express / MongoDB / REST API / Model View Controller y en el frontend incluye TailwindCSS, Vue Router, Pinia, es sin duda el proyecto más complejo de todos; un proyecto de reservaciones que deshabilita las horas ya tomadas por los usuarios, además tiene una autenticación profesional con Creación de Cuentas, Login, Confirmar cuentas y recuperar password en caso de olvidarlo.

Who this course is for:

Alumnos con conocimientos en HTML, CSS y JavaScript que quieran aprender su primer Framework
Si aprendes con proyectos este curso es para ti
Si deseas convertirte en frontend developer este curso es para ti
Si sabes React o Node y quieres añadir una herramienta adicional a tus habilidades, este curso es para ti

Vue.js 3 - La Guía Completa - Composition Pinia MEVN 10 Apps

What you'll learn

Explore related topics

Course content

Introducción al Curso - Proyectos que construiremos5 lectures • 46min

¿Cuánto JavaScript debo saber para aprender Vue.js?34 lectures • 3hr 9min

PROYECTO - GuitarLA - Carrito de Compras en Vue.js30 lectures • 2hr 19min

PROYECTO - Administrador de Pacientes de Veterinaria31 lectures • 1hr 51min

PROYECTO - Administrador de Gastos Con Vite y Vue.js47 lectures • 3hr 10min

PROYECTO - Cotizador de Criptomonedas con API en tiempo real16 lectures • 1hr 15min

PROYECTO - Aplicación que obtiene el clima de una ciudad en tiempor real16 lectures • 57min

PROYECTO - Proyecto CRM Con Routing y REST API41 lectures • 2hr 32min

PROYECTO - Buscador de Bebidas con Pinia, Vue-Router, API's37 lectures • 2hr 22min

PROYECTO - Añadiendo IA al Proyecto de Bebidas10 lectures • 48min

Requirements

Description

Who this course is for: