Vue 3 JS: De cero a experto creando aplicaciones reales

Seleccionaremos el navegador que vamos a utilizar durante todo el curso.

Vamos a seleccionar un editor de código con el que vamos a programar todas nuestras apps.

Vamos a ver que extensiones vamos a usar en Visual Studio Code para codificar más rápido.

Instalaremos Node.js para poder luego crear Apps con React.

Instalaremos YARN para descargar todas las dependencias de terceros que usaremos en nuestros proyectos.

Vamos a instalar Vue CLI para poder generar nuestros proyectos.

Vamos a ver que es Vue JS y que podemos hacer con él.

Veremos como crear nuestra primera app de Vue 3 con Vue CLI

Vamos a analizar el proyecto de Vue que acabamos de crear.

Crearemos nuestro primer componente con Vue.

Vamos a ver que es el Option API y el Composition API.

Veremos como se declaran las variables.

Veremos los bucles usando el v-for de Vue.

Veremos como podemos hacer if else usando el v-if y el v-else.

Crearemos varios eventos de click para ver como funcionan.

Veremos el binding que tiene Vue js.

Veremos que son los props en vue y para qué sirven.

Veremos como pasar props entre los componentes de Vue.

Veremos como podemos pasar props dinámicos entre los componentes.

Vamos a ver como podemos pasar funciones entre los props.

Vamos a ver como podemos integrar Vue en un proyecto que ya tengamos funcionando.

Vamos a crear un nuevo proyecto donde lleve integrado SASS.

Veremos como añadir SASS a un proyecto de Vue ya creado.

Veremos como podemos hacer que el CSS no se comparte con otros componentes.

Vamos a crear un nuevo proyecto donde lleve integrado el Sistema de Rutas.

Vamos a ver que nuevo tiene nuestro proyecto para generar el sistema de rutas.

Vamos a crear nuestra primera página con Vue Router.

Veremos como podemos crear rutas dinámicas.

Veremos como usando el hook useRouter podemos movernos entre las páginas.

Veremos como configurar una página de error404.

Vamos a ver una breve explicación sobre Vuex.

Veremos como se puede crear un proyecto que tenga Vuex.

Vamos a analizar un poco los ficheros generados para el uso de Vuex.

Vamos a crear nuestro primer estado global y a obtenerlo.

Vamos a ver como podemos añadir Bootstrap a nuestro proyecto.

Vamos a usar un API REST de memes y con un action vamos a ejecutar una petición HTTP y obtener todos los memes.

Vamos a guardar los memes obtenidos en el estado mediante el uso de los mutation.

Vamos a pintar cada uno de los memes obtenidos en nuestro template.

Vamos a crear un selector para poder cambiar la cantidad de memes que queremos visualizar.

Vamos a obtener el total de memes seleccionados por el usuario.

Veremos un resultado final de la app ya terminada.

Links de los repositorios de la app.

Vamos a generar y limpiar la aplicación donde trabajaremos.

Vamos a ver como podemos añadir Bootstrap a nuestro proyecto.

Vamos a crear el menu de nuestra web.

Vamos a crear el formulario para poder crear tweets.

Vamos a crear un hook personalizado para controlar el formulario

Vamos a escribir la lógica necesaria para poder cerrar y abrir el formulario desde otro componente.

Vamos a recuperar los datos del formulario para poder enviar el tweet.

Vamos a guardar el tweet en el localStorage.

Vamos a ver como podemos guardar más de un tweet en el localStorage.

Vamos a ver el uso de Lodash.

Componente para pintar tweets.

Vamos a renderizar todos los tweets guardados en el localStorage.

Vamos a formatear la fecha para que se vea mucho mejor.

Vamos a añadir el botón de eliminar con un SVG tratándolo como un componente.

Vamos a desplegar la app en Netlify.

Veremos un resultado final de la app ya terminada.

Links de los repositorios de la app.

Vamos a generar y limpiar la aplicación donde trabajaremos.

Vamos a añadir Semantic UI a nuestro proyecto.

Vamos a generar el proyecto en firebase y configurarlo.

Vamos a ver como podemos conectar Vue con nuestra app de Firebase.

Vamos a crear zonas independientes para usuarios que hayan iniciado sesión y los que no.

Vamos a crear las zonas de login y registros y darle la funcionalidad para poder cmabie entre ellas.

Vamos a crear la estructura del formulario de registro de usuarios.

Vamos a ver como podemos recuperar los datos del formulario de registro de usuarios.

Vamos a validar nuestro formulario antes de enviarlo usando Yup.

Vamos a mandar los datos del usuario a firebase para registrarlo.

Vamos a crear el formulario para que los usuarios puedan iniciar sesion.

Vamos a recuperar los datos del formulario de login y a validarlos.

Vamos a mandarlos los datos para realizar el login.

Vamos a crear al layout de nuestra app.

Vamos a crear el menú de nuestra app.

Vamos a añadir la logica de los datos de usuario y logout a nuestro menú.

Vamos a crear la página de account para que el usuario pueda cambiar sus datos personales.

Vamos a crear el formulario para poder que el usuario pueda modificar su nombre ya apellidos.

Vamos a ver como recuperar los datos del formulario y validarlos.

Vamos a mandar los datos del nuevo nombre del usuario a firebase para actualizarlo.

Vamos a repintar los nuevos datos del usuario.

Vamos a crear el formulario para poder que el usuario pueda modificar su email.

Vamos a ver como recuperar los datos del formulario y validarlos.

Vamos a crear una función para poder reautenticar al usuario.

Vamos a mandar los datos del nuevo email del usuario a firebase para actualizarlo.

Vamos a crear el formulario para poder que el usuario pueda modificar su contraseña.

Vamos a ver como recuperar los datos del formulario y validarlos.

Vamos a mandar los datos de la nueva contraseña del usuario a firebase para actualizarlo.

Vamos a crear el formulario para poder subir nominas.

Vamos a animar el formulario para que se cierre y se abra al hacer click en el botón.

Vamos a recuperar todos los datos del formulario.

Vamos a validar nuestro formulario.

Vamos a subir el fichero al storage de firebase.

Ahora vamos a subir los datos de la nómina junto con la URL de la nómina a firestore.

Vamos a añadir un Feedback cuando se este subiendo la nomina o se haya subido.

Vamos a hacer una petición a firebase para obtener todas las nóminas del usuario.

Vamos a pintar en pantalla todas las nominas del usuario.

Vamos a ver como repintar las nóminas cuando se suba una nueva.

Vamos a implementar la función para descargar nóminas.

Vamos a añadir la funcionalidad de eliinar nominas.

Vamos a desplegar la app en Netlify.

Veremos un resultado final de la app ya terminada.

Links de los repositorios de la app.

Vamos a crear nuestro backend con strapi.

Vamos a generar con Vue 3 el front para nuestro E-Commerce.

Vamos a añadir Semantic UI a nuestro proyecto.

Vamos a crear el layout de la app.

Vamos a crear el menú de nuestra web.

Vamos a crear y a añadir al sistema de ruta las páginas de login y registro de usuario.

Vamos a crear la estructura del formulario de registro de usuarios.

Vamos a recuperar todos los datos del formulario de registro y los guardáramos en un estado.

Vamos a validar el formulario de registro.

Vamos a mandar los datos a Strapi para crear el nuevo usuario.

Vamos a crear la estructura del formulario de login.

Vamos a obtener los datos del formulario de login y a validarlos.

Vamos a realizar login contra en endpoint de Strapi.

Vamos a ver como podemos decirle a la app que el usuario esta logeado o no.

Vamos a mostrar diferentes menús dependiendo si el usuario esta logeado o no.

Vamos a habilitar la logica para poder cerrar sesion.

Vamos a crear en strapi la colección para poder generar categorías.

Vamos a generar los endpoint para que el front pueda obtener los datos de las categorias.

Vamos a usar el endpoint que hemos creado para obtener las categorías en el front.

Vamos a renderizar todas las categorías obtenidas.

Veremos como podemos generar rutas dinámicas.

Vamos a crear la colección de productos en strapi.

Vamos a obtener todos los productos de strapi en el front.

Vamos a renderizar todos los productos que hemos obtenido.

Vamos a hacer que cada uno de los productos se vea correctamente.

Vamos a obtener todos los productos que pertenezcan a la categoría que estamos visualizando.

Vamos a ver como podemos volver a obtener los productos cuando el usuario cambie de categoría.

Vamos a ver como podemos añadir productos al carrito.

Vamos a hacer que se puedan acumular los productos en el carrito.

Vamos a crear el carrito y a darle la funcionalidad de abrir.

Vamos a añadir la funcionalidad de cerrar el carrito y a añadirle una animación de apertura y cierre.

Vamos a crear la cabecera del carrito.

Vamos a obtener todos los productos de carrito con todos sus datos mediante el ID.

Vamos a ver como pintar los productos en el carrito.

Vamos a habilitar la opción de incrementar productos desde el mismo carrito.

Vamos a habilitar la opción de decrementar productos desde el mismo carrito.

Vamos a crear un botón para ir la resumen del carrito

Vamos a pintar el resumen del carrito.

Vamos a obtener el total del carrito.

Vamos a eliminar un producto del carrito

Vamos a crear la logica para generar pedidos.

Vamos a limpiar el carrito al generar correctamente el pedido.

Vamos a obtener todos los pedidos del usuario.

Vamos a pintar todos los pedidos del usuario.

Vamos a desplegar la parte del servidor en heroku.

Vamos a desplegar la aplicación client en Netlify.