Import into a vue.js component

Question

I'm trying to import a library of the Vuelidate plugin into my newsletter.vue.js component.

But this import returns an error: Uncaught SyntaxError: Unexpected identifier

How can I import this into my vue.js component?

First to all, I´m using webpack and call first Vuelidate:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');


window.Vue = require('vue');

import BootstrapVue from 'bootstrap-vue'
import Vuelidate from 'vuelidate'

Vue.use(BootstrapVue)
Vue.use(Vuelidate)

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
});

window.onload = function(){
    app.$mount('#app');
}

Then I see that I have to import 'vuelidate/lib/validators' into the component in order to use it.

Like this example.

The problem is that I can't do an import inside my component vue, it always gives me error.

This is the code of my component:

import validators from 'vuelidate/lib/validators';//this return me error

Vue.component('newsletter', {

    template :  '<div>\
      <b-form @submit="onSubmit">\
        \
          \
        <b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">\
          <b-form-select\
            id="exampleInput2"\
            :options="foods"\
            :state="$v.form.food.$dirty ? !$v.name.$error : null"\
            v-model="form.food"\
          />\
  \
          <b-form-invalid-feedback id="input2LiveFeedback">\
            This is a required field\
          </b-form-invalid-feedback>\
        </b-form-group>\
  \
        <b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>\
      </b-form>\
    </div>',

    props : ['route_post'],

    data: function()
    {
        return {
            foods: ['apple', 'orange'],
            form: {}
          }
    },  

    validations: {
      form: {
        name: {
          required: validators.required,
          minLength: validators.minLength(3)
        }
      }
    },

});

Off-topic but please use template literals rather than double or single quotes for your template strings as they support newline characters. — Yom T.
– Yom T., Commented Mar 13, 2019 at 7:43
Do you use webpack? Imports do not work without proper setup. Have you used Vue CLI to setup the project? — Slim
– Slim, Commented Mar 13, 2019 at 9:22

codejockie · Accepted Answer · 2019-10-20 23:47:18Z

1

The error you got is as a result of not correctly importing what you want to use. There are several ways to import this library.

Import and use globally:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Alternatively, import a mixin directly to components:

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

Or

import { required, maxLength } from 'vuelidate/lib/validators'

Or import them individually to reduce import size:

import required from 'vuelidate/lib/validators/required'
import maxLength from 'vuelidate/lib/validators/maxLength'

You could also use require:

const { required, minLength } = require('vuelidate/lib/validators')

For your use case, validators doesn't exist in 'vuelidate/lib/validators' as it is not a property/member.

Update: From the Bootstrap example link you provided, it is possible an older version of vuelidate.

Vuelidate does not provide a default export hence this import style import validators from 'vuelidate/lib/validators' doesn't work. Using named imports on the other hand works just fine.

edited Oct 20, 2019 at 23:47

answered Mar 13, 2019 at 8:10

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

codejockie Over a year ago

Can you create a sandbox and I will have a look at it?

codejockie Over a year ago

Please create a sandbox at codesandbox.io so I can look into what you're doing wrong. The code you have in the question is not sufficient.

TodMcfRle Over a year ago

It's laravel 5.7 with its stack of webpack and vuejs, it's impossible to create a sandbox that simulates it.

codejockie Over a year ago

Create just the Vue part that you want to have Vuelidate for.

SrAxi · Accepted Answer · 2019-03-13 07:45:37Z

0

You first have to add it to your app like this:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Then, you can use it by destructuring, like this:

import { validators } from 'vuelidate'

answered Mar 13, 2019 at 7:45

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

1 Comment

TodMcfRle Over a year ago

I have webpack with a app.js file and this instructions: import BootstrapVue from 'bootstrap-vue' import Vuelidate from 'vuelidate' Vue.use(BootstrapVue) Vue.use(Vuelidate)

vahdet · Accepted Answer · 2019-03-13 08:09:51Z

0

ES6

Use named import and change the validations section as follows:

import { validators, minLength } from 'vuelidate/lib/validators';

Vue.component('newsletter', {

    template :  `<div>
      <b-form @submit="onSubmit">
        <b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">
          <b-form-select
            id="exampleInput2"
            :options="foods"
            :state="$v.form.food.$dirty ? !$v.name.$error : null"
            v-model="form.food"
          />
          <b-form-invalid-feedback id="input2LiveFeedback">
            This is a required field
          </b-form-invalid-feedback>
        </b-form-group>
        <b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
      </b-form>
    </div>`,

    props : ['route_post'],

    data: function()
    {
        return {
            foods: ['apple', 'orange'],
            form: {}
          }
    },  

    validations: {
      form: {
        name: {
          required,
          minLength: minLength(3)
        }
      }
    },

});

edited Mar 13, 2019 at 8:09

answered Mar 13, 2019 at 7:49

vahdet

6,78910 gold badges62 silver badges116 bronze badges

4 Comments

TodMcfRle Over a year ago

import { validators } from 'vuelidate/lib/validators'; return me this error Uncaught SyntaxError: Unexpected token {

vahdet Over a year ago

Weird. it is a general es6 syntax. Is your environment ES6 compatible?

vahdet Over a year ago

ES5 equivalent for import myModule from './myModule'; is sth like var myModule = require('./myModule');.

vahdet Over a year ago

Or, you make use of Babel like: stackoverflow.com/questions/34747693/…

Nikola Kirincic · Accepted Answer · 2019-03-13 09:13:11Z

0

First off, check in your node_modules if you have installed vuelidate at all:

npm install vuelidate --save

validators doesn't have exports default, you need to use destructuring to import each validation separately:

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

Vue.component('newsletter', {

... 
validations: {
name: {
  required,
  minLength: minLength(3)
},

edited Mar 13, 2019 at 9:13

answered Mar 13, 2019 at 8:17

Nikola Kirincic

3,7871 gold badge28 silver badges32 bronze badges

7 Comments

TodMcfRle Over a year ago

import validators from 'vuelidate/lib/validators';//this continues return me error

Nikola Kirincic Over a year ago

@AntonioMorales, I have edited, looks like it doesn't find the 'vuelidate/lib/validators' so try with const validators = require('vuelidate/lib/validators')

Nikola Kirincic Over a year ago

@AntonioMorales in addition to my answer, I have added note at the top, since I have doubts that you have installed vuelidate?

TodMcfRle Over a year ago

If I use require: Uncaught ReferenceError: require is not defined

Nikola Kirincic Over a year ago

@AntonioMorales, but did you installed node module at all?

|

hayreenfly · Accepted Answer · 2020-12-18 08:37:29Z

0

Are you using vscode and vetur? Not sure if we encountered the same problem. But how I solved my problem was adding a jsconfig.json file on my root project folder and putting this code inside.

 {
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
 }

I think the import problem was due to vscode and intellisense. Does not have anything to do with vuelidate.

After you create your jsconfig and save it...restart vscode.

answered Dec 18, 2020 at 8:37

hayreenfly

913 silver badges9 bronze badges

Collectives™ on Stack Overflow

Import into a vue.js component

5 Answers 5

4 Comments

1 Comment

4 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related