Vue 3 JS: De cero a experto creando aplicaciones reales

Introducción4 clases

Introducción

PROYECTO: Simulador de Tweets

PROYECTO: Gestor de nominas

PROYECTO: E-commerce

Entorno de desarrollo6 clases

Seleccionando del navegador

Seleccionando Editor de Código

Extensiones para Visual Studio Code

Instalando Node JS

Instalando YARN para el manejo de dependencias

Instalando Vue CLI

Conceptos básicos15 clases

¿Que es Vue JS?

Creando nuestra primera app

Analizando el proyecto

Nuestro primer Componente

Options API y Composition API

Variables

Bucles: v-for

If Else: v-if v-else

Evento de Click

Binding

¿Que son los props?

Pasando props entre componentes

Pasando funciones por los props

Custom event: Emit

Añadiendo Vue a un proyecto existente

Estilos CSS y SASS3 clases

Crear un proyecto con SASS

Añadir SASS al proyecto existente

Encapsular CSS

Sistema de Rutas6 clases

Crear un proyecto con Router

Analizando el sistema de rutas

Creando nuestra primera página

Rutas dinámicas

Cambio de ruta desde el scripts

Página Error404

Vuex10 clases

¿Que es Vuex?

Crear un proyecto con Vuex

Analizando Vuex

Nuestro primer state global

Añadiendo Bootstrap al proyecto

Action para obtener los memes de un API REST

Mutation, guardando memes en el estado

Renderizando todos los memes

Selector de cantidad

Obteniendo el total de memes selecionados

PROYECTO: Simulador de Tweets18 clases

Resultado final de la aplicación

Repositorio de la aplicación

Generando la aplicación

Añadiendo Bootstrap

Menu Web

Formulario de Tweets

Hook para controla el formulario

Abrir y cerrar el formulario

Recuperando datos del formulario

Guardando Tweet

Guardando más de un tweet

Lodash

TweetList template

Renderizando tweets

Formateando fecha

SVG como Componente

Función para eliminar tweets

Desplegando aplicación

PROYECTO: Gestor de nominas43 clases

Resultado final de la aplicación

Repositorio de la aplicación

Generando la aplicación

Añadiendo Semantic UI

Creando un proyecto nuevo en Firebase

Conectando Vue con Firebase

Zona de Usuario logeado y no logeado

Zona de Login y Registro

Formulario de registro de usuarios

Recuperando datos del formulario de registro

Validando formulario de registro con Yup

Registrando usuario en Firebase

Formulario de login

Recuperando datos y validándolos

Realizando login en firebase

Creando el layout

Creando el menu web

Añadiendo logica al menu

Creando la página de Account

Formulario para cambiar nombre y apellidos

Recuperando y validando datos del formulario

Actualizando DisplayName en Firebase

Refrescando los datos del usuario

Formulario para cambiar email

Recuperando y validando datos del formulario

Reautenticando usuario para poder cambiar el email

Actualizando el Email en Firebase

Formulario para cambiar la contraseña

Recuperando y validando datos del formulario

Actualizando la contraseña en Firebase

Formulario para subir nominas

Animando formulario

Recuperando datos del formulario

Validando formulario

Subiendo nomina al Storage de firebase

Subiendo los datos de la nomina a firestore

Feedback de la subida de la nomina

Obteniendo todas las nominas del usuario

Pintando todas las nominas

Recargando nominas al subir una nueva

Descargando nominas

Eliminando nominas

Desplegando aplicación

PROYECTO: E-commerce50 clases

Resultado final de la aplicación

Repositorio de la aplicación

Generando el back con Strapi

Generando el front con Vue 3

Añadiendo Semantic UI

Layout

Menu Web

Páginas de login y registro

Formulario de registro de usuarios

Recuperando datos del formulario de registro

Validando formulario

Creando el usuario en Strapi

Formulario de login

Obteniendo y validando datos del formulario

Realizando login

Gestionado sesión con JWT

Mostrando diferentes menus

Cerrando sesión

Creando la colección de categorias

Generando los endpoints

Obteniendo todas las categorías

Pintando todas las categorías

Creando rutas dinámicas

Creando la colección de productos

Obteniendo todos los productos

Renderizando todos los productos

Estilos a los productos

Obteniendo productos de una categoria

Obteniendo productos al cambiar de categoría

Pintando los productos de la categoría

Añadir productos al carrito

Acumulando los productos en el carrito

Creando carrito y abriéndolo

Cerrando carrito y añadiendo una animación

Header del carrito

Obteniendo todos los productos del carrito

Pintando productos en el carrito

Incrementando productos en el carrito

Decrementando productos en el carrito

Botón para ir al resumen del carrito

Pintando todos los productos en la página del carrito

Obteniendo el total

Eliminando un producto del carrito

Colección para generar pedidos

Generando pedido

Limpiando carrito

Obteniendo todos los pedidos del usuario

Pintando pedidos

Desplegando server

Desplegando client

Vue 3 JS: De cero a experto creando aplicaciones reales

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso