Menu
I'm using Vue Router and instead of loading the component it throws me this vague error:
Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
Here is my entry point (app.js) (note I'm using multiple entries in combination with the CommonsChunksPlugin):
import Vue from 'vue'
import '../../../assets/css/main.css'
import App from './app.vue'
new Vue(App).$mount('#app')
The Html File (app.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div id="app"></div>
</body>
</html>
(app.vue)
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import {
router,
} from './bootstrap.js';
export default {
router,
};
</script>
The Router:
import Vue from 'vue';
import VueRouter from 'vue-router';
var routes = [
{
path: '/login',
name: 'login.index',
component: require('./index/index.vue'),
},
{
path: '/',
redirect: '/login',
},
];
Vue.use(VueRouter);
export const router = new VueRouter({
routes,
});
Vue.router = router;
export default {
router,
};
And Finally the Component:
<template>
<div>
<h1>Test</h1>
</div>
</template>
<script>
export default {}
</script>
I get redirected to /login as expected but the component won't load.
909
You might be running into the breaking change described here: https://github.com/vuejs/vue-loader/releases/tag/v13.0.0
Try adding .default to the end of your require().
component: require('./index/index.vue').default
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
