Applying custom validation to a Nuxt application

Let's apply the custom validation to the Contact page in the sample website that we already have. You have probably noticed that the existing contact form has already installed the validation from Foundation (Zurb). Using Foundation's form validation is another great way to spice up our HTML form validation.

If you are interested in knowing more about Foundation, you can find out more from their official guide at https://foundation.zurb.com/sites/docs/abide.html.

But if we want to do the custom validation with VeeValidate, which we have just learned for use in the Vue app, then let's install and set up what we need for Nuxt in the following steps:

1. Install VeeValidate via npm:

$ npm i vee-validate

2. Create a plugin file in the /plugins/ directory and add the rules we need, as follows:

// plugins/vee-validate.js
import { extend } from 'vee-validate'
import {
  required,
  email
} from 'vee-validate/dist/rules&apos...