How to do it...

We will continue our to-do list project or you can create a new Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem.

Now, follow these steps to add a form validation into your Vue project, and your form component:

1. To install Vuelidate, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install vuelidate --save

2. To add the Vuelidate plugin to the Vue application, we need to import and add it to Vue in the main.js file in the src folder:

import Vue from 'vue';
import App from './App.vue';
import Vuelidate from 'vuelidate';
import './style.css';

Vue.config.productionTip = false
Vue.use(Vuelidate);

new Vue({
  render: h => h(App),
}).$mount('#app')

3. In the TaskInput.vue file, we will add a new property to the Vue object. This property is interpreted...