Vue 3 Forms

From login and registration screens to settings and checkout pages, forms are arguably the most important tool for interacting with the end users of our web applications, and collecting valuable information from them. Vue makes it fun and easy to build a wide array of forms, ranging from single-input forms like a search bar, to complicated schema-driven forms, all thanks to Vue’s component-driven architecture and reactivity system.

A component-based framework

Vue is of course a component-based framework, where we can create a piece of code and reuse it multiple times around our application. These components communicate with each other via  and , and through these connections we create a dynamic and interactive application.

Forms in particular benefit greatly from encapsulating the logic of elements into components. As our application grows, usually our forms grow, too, and having a form that is built without components usually becomes a ticking time bomb.

At some point, you may need to change the look and feel of all your input elements, or make them behave differently in relation to their label, or even introduce a different type of input validation. All of these scenarios become exponentially more complex when the inputs in your form are not encapsulated into components.

What you’ll learn

In this course, we will build a set of form components that will handle the most common use cases for form inputs. They’ll be highly reusable, able to be adapted and scaled for any of your application needs.

While building these components, you’ll learn the fundamental concepts of how these components communicate with your form and each other through ,  and .

We will learn some best practices on how to capture and submit our forms, and finally we will take a look at the basics of form accessibility.

With these concepts and new tools in your developer tool belt, you will be able to build and understand any range of forms for your own applications.

Prerequisites

In order to get the most out of this course, you should have experience with the following concept:

• A basic understanding of what  is and how it interacts with native form inputs. If you aren’t yet familiar with it, I recommend you check out our Intro to Vue 3 course.

In this course, we will review these concepts but not with the length and detail that this course does. Instead, we will incorporate these concepts while focusing on how Vue 3 simplifies and empowers form component composition.