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
lzxb
All 36 comments
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
fnlctrl
on 2 Oct 2016
thank you
lzxb
on 2 Oct 2016
Hello :D @fnlctrl @lzxb.
I follow @fnlctrl advice to fix the vue template compiler.
But another problem come out.
All the get start vue code copy from get-start-page
The different is webpack config.
Here is below:
const rucksack = require('rucksack-css');
const Webpack = require('webpack');
const path = require('path');
function makeWebpackConfig() {
return {
context: path.join(__dirname, './client'),
entry: {
js: './index.js',
html: './index.html',
vendor: [
'vue',
'vue-router',
]
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'vue$': 'vue/dist/vue.js'
}
},
postcss: [
rucksack({
autoprefixer: true
})
],
plugins: [
new Webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new Webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
})
],
devServer: {
contentBase: './client',
hot: true
}
};
}
And after the new Vue({ router }).$mount the div#app inner router-view display nothing, I try to compare the get start live example with mine but nothing found.
Can anyone give me some advice for this?
That's mine fault, it's need more { routes } in it. It's fixed already :D. Thanks.
vanpipy
on 9 Nov 2016
It works!!! good!
ModleIory
on 28 Nov 2016
Should I also use standalone build if I'm using Single File Components?
oleynikd
on 2 Dec 2016
@oleynikd No, single file components will have their templates compiled at build time. As long as you don't use the template: ... option or in-dom templates, you can use the lighter runtime-only build.
fnlctrl
on 3 Dec 2016
@fnlctrl so here is the problem. In main.js, which isn't a single file component so that can not be compiled, how can I declare the top component app under the body tag, without template: ... option in main.js or in-dom template in index.html
xqyww123
on 4 Dec 2016
@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');
```html
If you need to add a `router`/`store` instance to the root instance, it'll have to be slightly modified:
```javascript
// 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');
@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 14 Dec 2016
You mean instance method $mount can compiled anything inside html?
No. That's not what I said. Let me rephrase that: since the runtime-only build cannot compile anything (in-dom, template string), you can't put templates inside html, so you either use $mount or the el option to mount the component to the target.
fnlctrl
on 14 Dec 2016
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!'
}
});
ubershmekel
on 17 Dec 2016
@ubershmekel Not to take us too off-topic, but how do you get typings with that setup?
seanfisher
on 2 Jan 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';
zcdziura
on 7 Feb 2017
有中文的解答吗？ 看得不是很明白 ？？
aiqin-bao
on 27 Oct 2017
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.
wspl
on 1 Nov 2017
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 1 Nov 2017
删除你的module文件夹，重新更新安装所有依赖（使用npm进行安装）。请不要通过cnpm进行安装依赖，这会导致有些包找不到地址（无法正常找到）。推荐使用npm，更换镜像地址即可！
0x1af2aec8f957
on 7 Nov 2017
一群中国人在这里用英语交流，也是醉了哈
sxei
on 6 Dec 2017
@wspl thanks
正解
the right answers
add the require .default
routes: [
{
path: '/',
component: require('../pages/Main.vue').default
}
]
toshcn
on 19 Dec 2017
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 11 Jul 2018
@SageSanyue 你可以尝试使用webpack的动态导入语法：
component: () => import ('./HelloWorld')
const routes = [{
path: '/',
component: () => import('./components/member.vue')
}]
上述代码在webpack^3.0中正常工作。
0x1af2aec8f957
on 11 Jul 2018
thank you @noteScript
Deg5112
on 30 Jul 2018
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 2 Aug 2018
@molerat619 你可以换一种提问题的方式？
期望 -> 现状 -> 结果
---代码---
---问题描述---
你应该尽可能详细的描述你遇到的问题。
0x1af2aec8f957
on 2 Aug 2018
i ran into same issue, but my solution was this:
i think it's same as in @molerat619 example
PayteR
on 18 Sep 2018
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 25 Oct 2018
@askanhan solution worked perfect for me! Still I don't know why that caused the problem, the software I'm working on has been online for about 3 years and we are using Vue since 1 year ago but it worked fine :(
javierojeda94
on 25 Oct 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
]
IsoftTech
on 27 Dec 2018
@askanhan solution worked perfect for me! Still I don't know why that caused the problem, the software I'm working on has been online for about 3 years and we are using Vue since 1 year ago but it worked fine :(
Couldn't find any reason but I believe it has something to do with the updates of webpack or so
askanhan
on 3 Jan 2019
我遇到这个问题了， 打开router .js 然后 ctrl + s 就好了 ， 真是诡异
benmo1602
on 26 Feb 2019
@wspl Thanks, thanks really all I needed to fix the error:
[Vue warn]: Failed to mount component: template or render function not defined.
skinnn
on 2 Jul 2019
@skinnn, maybe you must be missing default keyword when you use like that: require('./components/Example.vue').default
egulhan
on 24 Oct 2019
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 11 Nov 2019
Adding .default works for me too.
In case yours doesn't change after adding .default try recompiling your code (.eg. npm run dev). Worked for me.
Kasre96
on 28 Jan 2020
Adding .default at the end of component line and worked
import VueRouter from "vue-router";
let routes = [
{
path: '/',
component: require('./components/Home').default
},
{
path: '/coupon',
component: require('./components/Coupon').default
}
];
export default new VueRouter({
routes
});
ahoraian
on 3 Mar 2020
You can do
import Home from './components/Home;
let routes = [
{
path: '/',
component: Home
},
]
chinela
on 25 Apr 2020
Related issues
kerlor
·
3Comments
saman
·
3Comments
rr326
·
3Comments
Lyfme
·
3Comments
shinygang
·
3Comments
Most helpful comment
if you use require in router, you need add a
.defaultafter require expression.