Integrating with Nuxt

In VeeValidate 2.x releases, there was a few gotchas to keep in mind when using Nuxt.js. This is no longer the case and you can directly integrate vee-validate by importing its components.

You still need to setup the rules you need in your project, we will do this by using a Nuxt.js "plugin".

This is a basic snippet for a ~/plugins/vee-validate file:

import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";

// install the 'required' rule.
extend("required", {
  ...required,
  message: "This field is required"
});

Depending on your Nuxt config, You might get this error "Unexpected token export". This is because the node_modules folder is excluded from transpilation.

We will need to add an exception for the vee-validate/dist/rules.js file inside the build block in the nuxt.config.js:

  build: {
    // Add exception
    transpile: [
      "vee-validate/dist/rules"
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

This is a live example: