"Failed To Mount Component” Error On Laravel 5.3.10 + Vue.js 2.0.1

I have been working on Laravel + Vue.js. I would like to develop Vue components onto Laravel Blade template, but when I tried doing that, the following error occured, and it doesn�

Solution 1:

You need to register the InputText component in order to use it within your root component. Here it is using the ES2015 shorthand.

import Vue from 'vue'
import InputText from './components/InputText.vue'

new Vue({
    components: {
        InputText
    },

    render(h) {
      return h(InputText)
    }
}).$mount('#app')

Solution 2:

Add esModule: true next to loaders under vue in your webpack.config.js and you should be good to go.

Alternatively you may use const Vue = require('vue') instead of import Vue from 'vue' which tries to load the default export from the generated module from your component, and it is unable to do so, unless you tell the vue-loader to generate compatible code.

Actually it is a more general incompatibility between the specs, where export default foo doesn't mean the same as module.exports = foo. When you require the former, it will give you an object { default: foo } whereas the latter will return foo unencapsulated.

That's why you have to tell vue-loader if you are using either of the specs.