[Vue warn]: Failed to mount component: template or render function not defined.

タイトルのようなエラーが出ていろいろ調べたけど自分の場合と該当せず。
なんとか自分で解決したのでお知らせします。

状況

LaravelでVue.jsとvue-routerを使って開発をしようとしたらタイトルのエラーが出て表示されない。
vue-routerを使わずにサンプルのexample-componentだけだったら表示される。

解決方法

問題のあるコード↓

import Vue from 'vue'
import VueRouter from 'vue-router'
require('./bootstrap');
Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        { 
            path: '/', 
            component: require('./components/ExampleComponent.vue')
        },
    ]
})

const app = new Vue({
    router,
    el: '#app'
});

解決したコード↓

import Vue from 'vue'
import VueRouter from 'vue-router'
require('./bootstrap');
Vue.use(VueRouter)

import Example from './components/ExampleComponent.vue' // <- VueRouterの外でimportする

const router = new VueRouter({
    mode: 'history',
    routes: [
        { 
            path: '/', 
            component: Example
        },
    ]
})

const app = new Vue({
    router,
    el: '#app'
});

上記のような修正で動くようになりました。
つまりnew VueRouter内でrequireせず、外でimportしました。

Tweet