Integrating with Nuxt

Create a vee-validate plugin

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', {
  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: [
     ** You can extend webpack config here
    extend(config, ctx) {}

This is a live example:

Integrating with nuxt-i18n module

Using the nuxt-i18n module is a very common case, here is an example on how to integrate the module's localization with vee-validate: