Vuetify With Vue 3

Posted on  by admin

Most websites today have signup, login, or contact forms that ask for a user’s information. Because most forms don’t provide enough feedback in times of error-handling, validating these forms helps improve users’ overall experience.

For example, when a user fills out a form that has a mistake in it, the user doesn’t know the error exists until after the form has been submitted — meaning that he or she must complete and re-submit the form again. But, using Vuetify, a material design component framework for Vue.js, we can implement quality form validation.

In this blog post, we’ll learn how to build a registration form and validate it using Veutify. First, let start by creating a Vue.js project. We’ll use Vue CLI to create a Vue app. If you don’t have Vue CLI installed in your local system, run the npm command below to install it:. After the command has finished running, we can create a Vue.js project by running the command below.

Implementing the password and checkbox field

  • Afterward, we’ll be asked if we want a default preset or manual setup.
  • In this project, we’ll use the default preset.
  • Let’s now add Vuetify to the project.

Building the registration form interface

Vuetify provides users with everything necessary to build rich and engaging web and mobile applications. To add Vuetify, navigate to the project folder cd vuetify-form-validation.

Then run the command below to add Vuetify:. When the Vuetify command starts running, it’ll again ask to select which preset you want.

Select the default preset. In this article, we’ll build a registration form, which will have the following fields:. Re-type Password.

We’re also going to learn how to validate each of those form fields.

First, let’s design the form page. Open the component folder, delete the HelloWorld.vue file, and create RegistrationForm.vue.

We are going to use Vuetify grid components to divide our page into two columns.

Conclusion

Inside the RegistrationForm.vue template, write the following code:.

Notice that we wrapped the entire section with .

is a Vuetify container that we can use to center or horizontally pad a website and bind a property of fluid to the so that it can fully extend our container in any screen size that we want when building the site.

It also makes it responsive. We also used to wrap the entire section. allows us to use flex properties so it can control the flow of the way we want it to align.

We also added , passed a property of cols, and gave it a value of 6 because we only want to divide the page into two columns.

Implementing the email field

Note that Vuetify cols is only limited to 12 columns.The left column has a class attribute with value purple, giving our UI purple as a background color.

It has a style property with a value of height 100vh.

Inside the left column, we have an

tag with text inside of it. In the right column, there’s a class property with a value of text-center and a prop of style with a value of height 100vh.

Building the registration form

Inside the right cols, we have an

tag with a text and a

tag.

  • We pass a property of style with a value of height 100vh to both columns because we want our form to take up the full website page.
  • Now, let’s build our form. Inside the right column, below the

    tag, write the code below:.

The is a Vuetify form component and makes it easy for us to validate form inputs.

Next we’ll implement form input fields. The first field is the first and last name input field.

Let’s also implement its validation. Inside the v-form, write this code:. In the code above, we started by wrapping our inside a row just as we did when dividing our web page into two columns.

We want our form inputs to be in the second column. The next step we took was to add the first name and last name input fields. The has a property of , which is a Vue.js property that receives a value from an input.

has a property of :rules, which takes the function nameRules as its value. The nameRules function is used to set a condition that checks if the value that was passed to the input field is valid or invalid.

Validating password fields

The has a property of label, which by default acts like an input placeholder and label. The value is the type of input it is.

Vuetify v-input by default has a type of text so you can choose to ignore it or not.

The Last Name field also has the same conditions as the First Name field, except for the label and the v-model.

If we serve our app now and put the cursor on the two input fields, nothing happens.

  • That’s because the validation function has not been assigned to the inputs. Now, we are going to add a required validation to both inputs that says that the input cannot be empty.
  • Next, we’ll write the validation function for the nameRules that we declared.

Go to the script tag outside the template tag and write the code below:. In this code, we declared the firstname and lastname variables that hold the value of both name input fields as a string.

After that, we declared the nameRules variable that we passed as a variable to the :rules property on the input tag.

ThenameRules variable has a condition that checks if the value that was passed to the input field is a valid value. If it’s not, nameRules should always show an error.

If we run our app now and try to type inside the first and last name fields and remove the cursor, you’ll receive an error saying that a name is required. The next field we’ll look at is the email field and its validation. Below the last name field, write the following code:.

In the email field, we pass v-model that takes the value of the email, the :rule property that holds the validation function, and the label that tells the user what kind of input it is.

Write the following code to trigger the email validation:. In it, we declared an email variable that holds both the value of the email and the emailRules variable that checks if the value input is a valid or invalid value before sending it to the server.

Another validation we have is one that checks if the input is empty and automatically prompts an error message to the user if it is. Lastly, let’s implement password and checkbox fields and their validations. Write the code below.

Notice that the password field has a v-model property that takes the value of the input field and the :rule property that takes the validating function.

Experience your Vue apps exactly how a user does

The v-checkbox also has a v-model property that takes the value of the checkbox input field. The checkbox :rule property takes the validation rule directly without passing it through any variable.

Add form fields

Write the code below to validate the password field. The passwordRule variable is the same thing as the email and name rules array we’ve been declaring, but each function is given its own task to perform.

The password rule checks to see if the password contains an uppercase letter, lowercase letter, special character, and a number.

Working with Veutify validation, we can still validate input fields through a button without passing the :rule prop. Here’s an example:.

Validating first name and last name fields

The code above is a Vuetify button component. The button component has a submitForm function that’s connected to a click event. Whenever the event is fired, it calls the Vuetify this.$refs.form.validate() method, which checks if the values that are passed to the input fields are valid. If the input fields are empty, it’ll prompt an error message to users.

This is another way we can validate a form using Vuetify. In this blog post, we learned how to validate a form using Vuetify in a Vue app, as well as saw the two different ways we can validate a Vuetify form.

If you’d like to check out the code or learn more, visit Github. TypeScript 34,181 MIT 6,209 1,007 (35 issues need help) 61 Updated May 11, 2022.

Creating a Vue.js app

JavaScript 41312189 Updated May 3, 2022.

TypeScript 0 MIT 7200 Updated Apr 27, 2022. JavaScript 410 MIT 669(1 issue needs help)1 Updated Mar 3, 2022.

Pinned

JavaScript 0 ISC 0 00 Updated Feb 22, 2022. JavaScript 34668 Updated Feb 12, 2022. JavaScript 2 MIT 0 1 5 Updated Feb 12, 2022. 1,344 MIT 204015 Updated Feb 11, 2022.

Modified30 days ago. I initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify with the command vue add vuetify, but received the following error. Any ideas on how to solve it? 9393 bronze badges. Currently possible with Vuetify 3 Alpha:. In order for the installation to proceed correctly, vue-cli 4.0 is required.

Further instructions are available at vue-cli.

(check with vue -V). Once installed, generate a project with the following command using the vue-cli 4.0:.

Validating the email field

When prompted, choose Vue 3 Preview:. It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.

Once prompted, choose v3 (alpha):. With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed.