vue-router: Failed to mount component: template or render function not defined. (found in root instance)

I write it in this case, but it is wrong. http://router.vuejs.org/en/essentials/getting-started.html

"vue": "^2.0.1",
"vue-router": "^2.0.0",
"vuex": "^2.0.0"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- <router-link> will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
</body>
</html>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 0. If using a module system, call Vue.use(VueRouter)

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for routes: routes
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!

open url http://localhost:3000/admin/#/bar

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 29
Comments: 39 (4 by maintainers)

Links to this issue

Most upvoted comments

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

Vue.use(Router)

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

if you use require in router, you need add a .default after require expression.

+206

wspl on Nov 1, 2017

Hi, thanks for filling this issue. If you import Vue from 'vue'; you get the runtime only build that cannot compile templates (either in-dom templates or template option). In this case you need the standalone build, here is a helpful section explaining this: https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

+152

fnlctrl on Oct 2, 2016

一群中国人在这里用英语交流，也是醉了哈

+89

sxei on Dec 6, 2017

If you’re using Webpack 2 to build your application, here is what I did to resolve the problem:

From webpack.config.js:

module.exports = {
    ...
    resolve: {
        extensions: ['.js'],
        alias: {
            'vue': 'vue/dist/vue.common.js'
        }
    },
    ...
}

From there, you are able to install Vue as you would expect using ES6 syntax:

import Vue from 'vue';

+31

zcdziura on Feb 7, 2017

For anyone still finding this thread, this is how I ended up getting past this error for my browserify and typescript setup:

import * as Vue from 'vue/dist/vue.common.js';

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

+18

ubershmekel on Dec 17, 2016

@wspl thanks 正解 the right answers add the require .default routes: [ { path: ‘/’, component: require(‘…/pages/Main.vue’).default } ]

+15

toshcn on Dec 19, 2017

@xqyww123 If you’re using the runtime-only build, anything put inside html cannot be compiled. Therefore, you’ll need the mount method

A simple example:

// your entry js
import App from './App.vue';
new Vue(App).mount('#app');

<body>
  <div id="app"></div>
</body>

If you need to add a router/store instance to the root instance, it’ll have to be slightly modified:

// your entry js
import App from './App.vue';
import store from './store';
import router from './router';

new Vue({
   ...App // ES7 Object rest spread operator (or Object.assign)
   router,
   store
}).mount('#app');

The above is the javascript approach. However, if you want to avoid the rest spread operator / Object.assign, another approach would be using vue’s render functions:

// your entry js
import App from './App.vue';
import store from './store';
import router from './router';

new Vue({
   router,
   store,
   render: h => h(App)
}).mount('#app');

+14

fnlctrl on Dec 4, 2016

@SageSanyue 你可以尝试使用webpack的动态导入语法：

component: () => import (‘./HelloWorld’)


const routes = [{
path: '/',
component: () => import('./components/member.vue')
}]

上述代码在webpack^3.0中正常工作。

0x1af2aec8f957 on Jul 11, 2018

删除你的module文件夹，重新更新安装所有依赖（使用npm进行安装）。请不要通过cnpm进行安装依赖，这会导致有些包找不到地址（无法正常找到）。推荐使用npm，更换镜像地址即可！

0x1af2aec8f957 on Nov 7, 2017

I was getting the same error but adding .default helped as well. Here is my app.js in case it helps anyone else:

import Vue from "vue";
Vue.component("my-component", require("./components/my-component.vue").default);

new Vue({
  el: "#app"
});

codegeek1001 on Nov 11, 2019

i ran into same issue, but my solution was this:

https://stackoverflow.com/questions/49138501/vue-warn-failed-to-mount-component-template-or-render-function-not-defined-i

i think it’s same as in @molerat619 example

PayteR on Sep 18, 2018

Smilar problem, when I write:

let routes = [{ path: ‘/’, component: require(‘./components/member.vue’) }] it failed:[Vue warn]: Failed to mount component: template or render function not defined. add “.default”, it works!

let routes = [{ path: ‘/’, component: require(‘./components/member.vue’).default }] PS:“vue”: “^2.5.2”,“vue-router”: "^3.0.1"“vue-loader”: “^13.3.0”,

SageSanyue on Jul 11, 2018

I solve mine by adding default after closing curly bracket. ‘.default’. e.g. const routes = [ { path: ‘/foo’, component: Foo }.default, { path: ‘/bar’, component: Bar }.default ]

isofttechn on Dec 27, 2018

@skinnn, maybe you must be missing default keyword when you use like that: require(‘./components/Example.vue’).default

egulhan on Oct 24, 2019

as @wspl commented, it would work well.

another option is ‘import’ as following:

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

import Main from '../pages/Main.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

jacky-jiang on Nov 1, 2017

It works!!! good!

ModleIory on Nov 28, 2016

In my case, I imported my component (in router) as:

import bsw from 'common-mod/src/components/webcommon/webcommon'

It is simply solved if I changed it to

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'

askanhan on Oct 25, 2018

@molerat619 你可以换一种提问题的方式？

期望 -> 现状 -> 结果

—代码—

—问题描述—

你应该尽可能详细的描述你遇到的问题。

0x1af2aec8f957 on Aug 2, 2018

I got this error because I had empty style section. Fill the style section or remove it and the problem will solved.

NickCashFlow on Feb 9, 2021

I still have this issue. This is my app.js:

components/index.js:

I get this issue only when I enable esModul in webpack like so: mix.config.vue.esModule = true;

How can I fix this? The routes should be fine, I use import.

molerat619 on Aug 2, 2018

@ubershmekel Not to take us too off-topic, but how do you get typings with that setup?

seanfisher on Jan 2, 2017

@fnlctrl Therefore, you'll need the mount method. You mean instance method $mount can compiled anything inside html? I make a demo and find this wrong. Runtime-only build with method $mount cann’t compiled anything inside html. My code:

// index.html

<div id="app">
  {{ message }}
</div>

// main.js

import App from './App.vue'
new Vue({
  data: {
    message: 'hello, kitty!'
  }
}).$mount('#app') // Noted, it's "$mount" instead "mount", $mount is vue instance method

// result vue.runtime.common.js:519 [Vue warn]: Failed to mount component: template or render function not defined. Your demo is very nice, thanks.

AnsonHwang86 on Dec 14, 2016