Quasar form validation with Vuelidate

I really like how Quasar handle form validations with the “rules” on a QInput, but I wanted to use Vuelidate instead of the default validation. The only examples I could find were wrapping the form in a component to display the error messages and/or using vuelidate-error-extractor.

Steps to follow:

1. Install the Vuelidate package.

$ yarn add vuelidate

2. Once the package is installed, create a new boot file for it (using Quasar-cli)

$ quasar new boot vuelidate

in /src/boot/vuelidate.js

import Vuelidate from 'vuelidate';

export default ({ Vue }) => {
  Vue.use(Vuelidate);
};

3. then in your Vue file you can have multiple rules validated by Vuelidate like so:

<q-input filled
    v-model.trim="email"
    :label="Your Email..."
    @input="$v.email.$touch()"
    :rules="[
        val => $v.email.required || "Email is required",
        val => $v.email.email || "Invalid email format",
    ]"
/>

and in the script part you add your validations (see doc for Vuelidate)

import { required, email } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      email: '',
    };
  },
  validations: {
    email: {
      required,
      email,
    },
    password: {
      required,
    },
  },
  // ...
};

That way you have a different error message for each invalid rule.

the @input force vuelidate to process the new value.

Hope this can help someone.