Formularios en Vue 3

En este curso aprenderás a desarrollar formularios en Vue 3 utilizando Composition API, desde cosas 'sencillas' hasta formularios con múltiples pasos (Wizard), campos dependientes y mucho más que a continuación te explico.

Desarrollaremos un total de cinco formularios para cubrir muchos casos de uso, todos ellos utilizando las mismas dependencias pero de diferentes formas. Las dependencias utilizadas son estables y están 100% actualizadas, algo de lo que me he preocupado para que tengas las mejores herramientas para trabajar con formularios en Vue 3.

Todo el curso se llevará a cabo utilizando Tailwind CSS, te explicaré cómo configurarlo de forma completa en Vue 3 para que lo puedas exprimir al máximo.

También te explicaré cómo configurar ESLint en IntellIj o WebStorm. Si no sabes nada acerca de ESLint, simplemente debes saber que es una herramienta que nos ayuda a escribir mejor código. Formulario para números de teléfono El primer formulario será algo sencillo con un único campo para introducir un número de teléfono. Para que sea algo realmente útil, haremos uso de máscaras, también aplicaremos del código del país, en España por ejemplo es +34. Así forzaremos al usuario que nos visita que utilice un teléfono con el formato que nosotros deseamos.

Este formulario tendrá deshabilitado el botón de submit hasta que haya pasado la validación, que en este caso será el formato del teléfono. Formulario para coincidencia y fortaleza de contraseñas El segundo formulario es un caso muy utilizado en la web, la meta es aprender a validar la fortaleza de una contraseña añadiendo componentes para que visualmente el usuario que utiliza dicho formulario sepa si su contraseña es débil o fuerte.

Además, también aprenderemos a validar la coincidencia de contraseñas, es decir, que la confirmación haga match con la contraseña introducida, algo completamente necesario para evitar errores futuros de acceso. Formulario con campos dependientes Aunque en todo momento estaremos trabajando con Vue 3, prepararemos una serie de datos en archivos .json que consumiremos en esta sección del curso. Aquí aprenderás a construir formularios que tengan dependencia entre ellos mismos. La idea es ir filtrando los siguientes campos conforme el usuario va seleccionando opciones.

Al finalizar el proceso completo del formulario le brindaremos los resultados que hemos encontrado para sus intereses, un campo muy típico en muchas aplicaciones. Formulario para pagar con tarjeta Los formularios de pago están a la orden del día desde hace ya demasiado. En este bloque aprenderás a crear el tuyo propio de forma completa, pero recuerda, siempre en el cliente, no nos comunicamos con APIs ni nada parecido.

En este formulario tendremos varios datos sensibles que controlar, a nivel de interfaz pero también de validación, tales como titular de tarjeta, número de tarjeta, fecha de expiración y código de verificación. Hasta que todos estos campos no sean correctos no podremos realizar el pago, como la vida misma. Formulario Wizard con múltiples pasos La guinda del pastel para el final, un formulario con múltiples pasos pero que únicamente valide los datos para cada paso, y no para todo el esquema de validación definido. La idea es simple, si en pantalla sólo vemos dos campos, ¿por qué validar el resto?

En este bloque además de aprender a crear formularios Wizard con Vue 3, aprenderás otras muchas cosas por el camino que estoy seguro te resultarán muy útiles en tu día a día, sinceramente no tiene desperdicio.

Gracias a este curso dominarás los formularios en Vue 3 como un master, y mira que no me gusta nada esa palabra, pero te garantizo que lo que aprenderás aquí te va a facilitar el trabajo de una forma tremenda en tu día a día.

Si quieres aprender a crear formularios en Vue 3 ni lo dudes, suscríbete ahora a la plataforma y accede al path de Vue 3, que junto con este curso te brindan todo lo necesario para ser un PRO en el mejor framework para desarrollar interfaces en el cliente con JavaScript y HTML. 

Haber seguido los cursos anteriores de la ruta de aprendizaje con Vue 3.

Desarrolladores que trabajen con Vue 3 y Composition API y deseen adentrarse de lleno en el trabajo con formularios de forma correcta.