Useful Tools In Vue.js Web Development


This prop is used in setting the position you want notifications to appear from in your app. Some of the available options are top left, top right, top center, bottom right, bottom left, and bottom center.

We can add these props to our component in App.vue so it now looks like this;

We also add styling for the different notification types that we would be using in our application. Note that other than group, we can pass each of the remaining props on the fly whenever we want to display a notification and it would still work accordingly. To display a notification in any of your Vue files, you can do the following.


group: “demo”,

type: “error”,

text: “This is an error notification”,

Here, we create a notification of type error under the group notification of demo. The property text accepts the message you want the notification to contain and in this case, the message is ‘This is an error notification’. This is what the notification would look like in your app.

You can find out the other available props and other ways to configure the notification on the official docs page.

One of the most common elements used on the web are form elements (input[type=’text’], input[type=’email’], input[type=’password’], and so on) and there is always a need to validate user input to make sure they’re sending the right data and/or using the right format in the input field. With Vuelidate, you can add validation to the forms in your Vue.js application, saving time and benefitting from the time put into this package. I had been hearing about Vuelidate for a while but I was a little reluctant to take a look at it because I thought it would be too complex which meant I was writing validations from scratch for most of the form fields in the apps I worked on.

When I eventually looked at the docs, I found out it was not difficult to get started with and I could validate my form fields in no time and move on to the next thing.

You can install Vuelidate using any of the following package managers.

yarn add vuelidate

npm install vuelidate –save

After installation, the next thing would be to add it to your app’s config in the main.js file so you can use it in your vue files.

import Vuelidate from ‘vuelidate’


Assuming you have a form that looks like this in your app;

Now to validate this type of form, you first need to decide on what type of validation you need for each form field. For instance, you can decide you need the minimum length of the fullName to be 10 and the minimum age to be 18.

Vuelidate comes with built-in validators that we only need to import it to use. We can also choose to validate the password field based on a particular format, e.g Password should contain at least a lower case letter, an upper case letter, and a special character. We can write our own little validator that does this and plug it into the list of Vuelidate’s plugin.

Let’s take it step by step.

Here, we import some validators that we need to properly validate our form. We also add a validations property where we define the validation rules for each form field that we want to validate.

At this point, if you inspect the devTools for your app, you should see something that looks like this;

The $v computed property contains a number of methods that are useful in confirming the validity of our form but we’re only going to focus on a few of them: