[Vuejs]-Vuejs : "template or render function not defined" of a single-file-component

by

0👍

Ah OK, if you’re using the build without the template compiler, you cannot use the template property. What you need to do instead is mount your base component (the one with router-view in it) to your main view instance using a render function:

import App from './components/App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App) // This mounts the base component (App.vue) on to `#app`
})

Remember that your base component should also be a .vue file.

I wrote a fairly detailed answer on setting up a Vue SPA the other day which might help you out: vue-router how to persist navbar?

0👍

Okay I finally solved the problem.

In https://forum.vuejs.org/t/vue-loader-with-webpack-not-supporting-commonjs-require/15014/4, Linus Borg says that with vue-loader doesn’t normalise exports.

let docsData = {};

function importAllDocs (r) {
  r.keys().forEach(function (key) {
    docsData[key.replace(/^\.\/(.+)\.vue$/, '$1')] = r(key).default;
  });
}

importAllDocs(require.context('../assets/docs', true, /\.vue$/));

Access r(key).default instead of r(key) solved the problem.

Leave a comment