Vue

【Vue】Failed to mount component: template or render function not defined.の対処

Vueのエラーメモ

Failed to mount component: template or render function not defined.

VueRouterを使用したところ「Failed to mount component: template or render function not defined.」というエラーが出ました。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: require('../components/HelloWorld.vue')
    }
  ]
})

原因

vue-loderのバージョン13以上になるとこのエラーが出るようです。

Release v13.0.0 · vuejs/vue-loader

対処法

対処法はこちらに記載がありました。

下記に記載する3パターンのいずれでもエラーを回避出来ます。

requireのところで「default」を付ける

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: require('../components/HelloWorld.vue').default
    }
  ]
})

アロー関数を使用する。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import('../components/HelloWorld.vue')
    }
  ]
})

importをする

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import helloWorld from './components/HelloWorld.vue';
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: helloWorld 
    }
  ]
})