If you work through Anirudh Sanjeevs' excellent tutorial on setting up a Vue.js project with Webpack and some other goodies, you'll probably hit a handful of minor problems. The tutorial was written a year ago and things have changed a lot since then which naturally explains the issues. So let's tackle them one by one.
The first problem is that Vue.js fails to mount the app component and raises the following error:
Failed to mount component: template or render function not defined. (found in root instance)
This happens because the template defined in app.vue cannot be compiled with
the runtime-only build of Vue.js that the NPM package exports by default. It
is missing the template compiler that, instead, can be found from the
standalone build. So to use the standalone build we need to add the following
alias to webpack.config.js:
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}The differences between the runtime-only and standalone builds are discussed in more detail in the installation documentatien of Vue.js.
But Vue.js still fails to mount the app component. This time with a different error though:
Do not mount Vue to or - mount to normal elements instead.
The obvious fix is to mount to the <app></app> element instead. So we
change src/main.js to:
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'app',
components: { App }
})After this fix the component mounts but there is still one issue remaining. The browser renders only the message element missing the "Increment" link and the framework reports the following error:
Component template should contain exactly one root element ...
The obvious fix this time is to wrap the template inside a <div></div>. So
we change src/app.vue to:
<template>
<div>
<div class="message">Value is: {{ count }}</div>
<a href="#" @click.prevent="increment">Increment</a>
</div>
</template>
...Now it works.
Thanks! Was stuck with the same issue (first)!