"Unexpected token export" when importing validation rules in Nuxt.js

[chrislentz]

Versions

• vee-validate: 3.0.2
• vue: 2.6.10
• nuxt: 2.9.1

Describe the bug
When I try to import the "required" rule inside a Nuxt.js plugin, I am receiving a Unexpected token export error. If I comment out the "required" import or the "required" extend lines, the issue go away.

Customer Nuxt.js Plugin Code

import Vue from 'vue';
import { ValidationProvider, extend, configure } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

configure({
  classes: {
    invalid: 'is-danger'
  }
});

Vue.component('ValidationProvider', ValidationProvider);

[HEXLAB-KODAMA]

I don't know why...for now

nuxt.config.js

module.exports = {
  build: {
    transpile: [
      'vee-validate'
    ]
  }
}

[oritwoen]

Everything is thoroughly explained in documentation, including the error that occurs and the correct integration.

Link: https://baianat.github.io/vee-validate/examples/nuxt.html

[logaretm]

Thank you @ririen for linking the documentation. Closing...

[raapperez]

@ririen The link doesn't work anymore.

Also found this one: https://logaretm.github.io/vee-validate/examples/nuxt.html

[danirod]

Both links are broken at the moment. I've done my homework and researched the solution in the project history. Adding the solution here because links cannot be trusted.

"vee-validate/dist/rules" needs to be added to the transpile item in the build key of the nuxt.config.js file.

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

[logaretm]

The docs were re-structured recently, there is the new link:

https://logaretm.github.io/vee-validate/guide/rules.html#importing-rules-in-nuxt-js