0

I try to create a fiddle with vee-validate 3.0 using ValidationObserver, but I encounetred a problem, that trying to add lines :

import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import {required, email, url} from 'vee-validate/dist/rules'

I got error in console :

Uncaught SyntaxError: Cannot use import statement outside a module

This saved with error: https://jsfiddle.net/a6dL7yfc/2/

How can it done corectly ?

Borislav Ivanov
  • 4,684
  • 3
  • 31
  • 55
mstdmstd
  • 2,195
  • 17
  • 63
  • 140

1 Answers1

1

You can't use import when you're loading from a CDN. Instead everything is exposed as properties of a global VeeValidate object.

For example, ValidationObserver is VeeValidate.ValidationObserver.

Change these:

import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import {required, email, url} from 'vee-validate/dist/rules'

To this:

const {ValidationObserver, ValidationProvider, extend} = VeeValidate
const {required, email, url} = VeeValidate.Rules

The first line should now work but the second will still fail. To fix that you'll also need to change your vee-validate URL to be vee-validate.full.js instead of vee-validate.js. The full build includes the rules.

If you want to specify a template in the HTML section then the usual caveats around in-DOM templates apply. e.g. You'll need to use kebab-case for the component names in the template: <validation-observer>.

skirtle
  • 27,868
  • 4
  • 42
  • 57