VueJS Component import failed

Question

I have a simple demo I wanna try out to learn more about VueJS components. But when I load my page, I receive the error: Unexpected Token Import, in this line

import GISView from './components/GISView.vue';

when I remove this, GISView is not defined. I use Laravel 5.4 and webpack for compiling the scripts. Why is the component not found?

Main.js

import GISView from './components/GISView.vue';

window.Vue = Vue;
window.Event = new class {
    constructor() {
        this.Vue = new Vue();
    }

    fire(event, data = null) {
        this.Vue.$emit(event, data);
    }

    listen(event, callback) {
        this.Vue.$on(event, callback);
    }
};

window.app = new Vue({
    el: '#app',
    components: {
        GISView: GISView
    },
    data: {
    },
    methods: {
        init: function() {
            this.$broadcast('MapsApiLoaded');
        }
    }
});

GISView.vue

<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps]
    }
</script>

I really got stuck for hours on this because just by the code, it should work I would say.

Please post the loaders section of your webpack config – David L May 10 '17 at 13:50 — David L, May 10 '17 at 13:50

roberto tomás · Answer 1 · 2017-05-10T17:23:15.767

-3

You are not using a proper parser like vueify to properly parse .vue files in your webpack/gulp script.

edited May 10 '17 at 17:23

answered May 09 '17 at 23:47

roberto tomás

4,435
5
42
71

How would I add that? – sesc360 May 09 '17 at 23:48
see the answers to my own question here: http://stackoverflow.com/questions/42005463/vueify-in-gulp-task-with-babel-transform-of-vue-files/42028255#42028255 – roberto tomás May 09 '17 at 23:54
This is incorrect. The OP doesn't appear to be using gulp and would be able to far more easily vue-loader over vueify into a webpack pipeline. In addition, this doesn't actually answer the OP's question At best it is a comment. – David L May 10 '17 at 06:05
Does anyone have an idea ? – sesc360 May 10 '17 at 06:09
@DavidL it is not complete, definitely, but no need to down vote. He needs an equivalent solution for his build process. Until he posts details on what that is, there's no way for me to improve my answer.. In fact if he is using gulp then my answer is very likely correct. – roberto tomás May 10 '17 at 17:26

VueJS Component import failed

1 Answers1