CODEWITHSUNDEEP
laravelvue.js
Clinton Green
Clinton Green

Reputation: 9977

Vue js: Uncaught SyntaxError: Unexpected identifier at import line

I am trying to use vue plugins but everytime I do I always get an Unexpected Identifier on the import line. Any suggestions?

HTML

<div id="content">
  <h1>@{{ message }}</h1>
  <v-select :value.sync="selected" :options="options"></v-select>
</div>

JS

new Vue({
    el: '#content',
    data: {
    message: 'Hello Worldy'
    },
    import vSelect from "vue-select"
    export default {
        components: {vSelect},
        data() {
          return {
            selected: null,
            options: ['foo','bar','baz']
          }
        }
    }
});

Upvotes: 1

Views: 10134

Answers (3)

alexius
alexius

Reputation: 111

When you insert tag, which is related to your Vue.js component, in your blade file, PhpStorm indeed like Oluwatobi Samuel Omisakin wrote inserts such code 

     <script>
        import MyComponent from "../../../js/components/myComponent";
        export default {
           components: {MyComponent}
        }
     </script>

in the end of your blade file. And this is brings you error in console. Just delete it and make import in you app.js file.

Upvotes: 0

omitobi
omitobi

Reputation: 7334

Just in case another person encounter this same error sign in the console when using vue. As for me in my case, the import script was automatically created for one of the components I called in my Laravel blade template (by PhpStorm).

The importation is recommended to be called in the Js file where the instance of Vue is made, because of the need to compile import syntax of ES6 to ES5. See: https://medium.com/@thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac

Hope this helps someone save some time.

Upvotes: 1

darryn.ten
darryn.ten

Reputation: 6973

You can't import from where you're trying to

import vSelect from "vue-select"

new Vue({
  el: '#content',
  components: {
    vSelect: vSelect
  }
});

and then do the rest of it inside your component definition

Upvotes: 1

Related Questions