Agregar validaciones a un formulario en Vue 3 con Yup | Curso de Vue.js 3 - 06

Sobre esta lección

En el sexto video del curso GRATIS para aprender Vue 3 con Composition API desde cero, nivel principiante a experto, aprenderás a modularizar tu proyecto de este framework frontend para una mejor organización y mantenimiento del código. Además, te guiaré en la instalación y uso de las dependencias VeeValidate y Yup para crear esquemas de validación robustos. Crearemos un formulario en Vue.js 3 y le daremos estilo para mejorar su apariencia (un poco). También aprenderás a crear un esquema de validación con Yup y a cambiar el "html form" por el componente Form de VeeValidate y los inputs del formulario por el componente Field de VeeValidate para una validación más dinámica. Finalmente, probaremos las validaciones del esquema creando con Yup para asegurarnos de que todo funcione correctamente. ¡No te pierdas este video para mejorar tus habilidades en la creación de formularios con Vue.js 3! 00:00 Subiendo avances del proyecto a GitHub con la app Sourcetree 01:20 Cómo crear módulos en vue.js 3 con composition api 02:58 Creando un módulo para un formulario de registro de datos 03:33 Cómo instalar VeeValidate y Yup en un proyecto de Vue JS 3 04:28 Arreglando las rutas de Vue-Router 05:34 Cómo crear un formulario de registro en Vue 3 con Script Setup 08:01 Agregando nuevo componente a las rutas y sidebar con Router Link 10:05 Mejorando HTML y Agregando estilos CSS a un formulario de registro en Vue 13:07 Cómo importar el componente Form de VeeValidate en un componente Vue 13:59 Cómo crear un esquema de validación con Yup en Vue 3 16:06 Cómo utilizar el componente Field de VeeValidate en Vuejs 17:23 Cómo agregar el esquema de validación en el componente Form 18:04 La directiva de Vue para formularios: "@submit" 18:59 Cómo agregar un mensaje de error en la vista de un formulario en Vue 3 19:43 Probando el resultado: formulario con validaciones en Vue.js 3 Página oficial de la documentación de Vue 3: https://vuejs.org Página oficial de la documentación de VeeValidate y Yup: https://vee-validate.logaretm.com/v4/ (debe ser la versión 4 de VeeValidate) Herramientas que ocupamos en este curso: Visual Studio Code: https://code.visualstudio.com/ + Instalar la extensión oficial de Vue (la puedes buscar como VOLAR) Sourcetree: https://www.sourcetreeapp.com/ | Esta herramienta nos permite utilizar GIT sin comandos. En google Chrome instala la extensión oficial de Vue.js 3, llamada vue.js devtools ¡No te pierdas esta oportunidad de dominar Vue.js 3 de manera clara y efectiva! Más adelante, crearemos un login añadiendo CSS y el framework Bootstrap 5, utilizando Pinia, Vue-Router, VeeValidate y Yup, esto haciendo peticiones a un Backend mediante API con Axios. Para más contenido como este, tutoriales de Vue 3 u otros frameworks de desarrollo web frontend (Angular, React) (También de desarrollo Web full Stack con Nuxt o Laravel), dale "Me gusta", comparte el vídeo y suscríbete. Si te sirvió el vídeo o quieres opinar sobre qué deberíamos ver en este curso de Vue 3, deja tu comentario. #cursodevue #vuejs #router