Failed to mount component: template or render function not defined

1
votes

I'm trying to use vue-router to display routed components below my navbar component but I get an error specified in the title.

Here is my code:

main.js

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

import app from './app';


Vue.use(VueRouter);


const foo = {
  template: '<div>foo</div>',
};

const bar = {
  template: '<div>bar</div>',
};

const routes = [
  {
    path: '/',
    component: foo,
  },
  {
    path: '/bar',
    component: bar,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(app),
});

app.vue

<template>
  <div id="app">
    <fs-navbar/>
    <main>
      <router-view/>
    </main>
  </div>
</template>

<style scoped lang="scss">

</style>

<script>
import fsNavbar from './components/fs-navbar';

export default {
  components: {
    fsNavbar,
  },
};
</script>

components/fs-navbar.vue

<template>
  <nav>...</nav>
</template>

<style scoped lang="scss">

</style>

<script>
import Vue from 'vue';

export default Vue.component('fs-navbar', {
  // logic
});
</script>

This app causes an error: 

vue.js?3de6:2574[Vue warn]: Failed to mount component: template or render function not defined. (found in component <fs-navbar>)

If I add fs-navbar template directly into app.vue's template everything is working as intended. Without router app is working as well.

I'm using vue-cli with this template(vuejs2)

2
vue.jsvuejs2vue-router

2 Answers

4
votes

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",

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

1
votes

Turns out, that Vue.component() return value isn't working with the router.

When changed:

export default Vue.component('component-name', {})

to:

export default {}

Everything is working fine.