So you downloaded all the latest bits of Vue and you’re ready to get started building the next Amazon.com. Just to be sure you’re on the right track, you fire up your development server and browse to localhost:8080 and….nothing. After a couple of chin scratches and an audible groan you pop open dev tools in chrome and are met with the following error…
You are using the runtime-only build of Vue where the template compiler is not available.
You collapse back into your carefully chosen desk chair (good lumbar support is important ya know), your Amazon dreams smashed upon the rocks.
What’s happening you wonder.
When I started working with Vue I ran into this very error. I googled around with DuckDuckGo and found a few tips and discussions regarding this problem but none that really covered all the bases..so I thought I would write my own.
Depending on how you create your application dictates whether you will be using a run-time only version of Vue or a compiler + runtime version. The difference between the two is that, well, the compiler + runtime version includes the compiler while the other version does not. This seemingly obvious statement may have you wondering, OK…so what.
If you intend to use inline templates you must use the compiler + runtime version of the library. Lets look at an example:
Here is a super simple HTML page that links to the Vue library on a CDN:
<!DOCTYPE html>
<html>
<head>
<title>compiler versions</title>
</head>
<body>
<div id="app">
<input class="input" type="text" v-model="input" />
<br>
<p>{{ input }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
data: {
input: ''
}
})
</script>
</body>
</html>When you link to the Vue library as shown above, you get the compiler + runtime version of the library and the page above will happily display in a browser.
If, however, you were to use the Vue CLI to create your project, it automatically references the runtime only version of the library. That’s all well and good until you decide to reference the root html node from your Vue instance like so:
new Vue({
el: '#app',
data: {
input: ''
}
})and maybe you decided you would like to inline a template:
new Vue({
el: '#app',
data: {
input: ''
},
template:
`
<input type="text" v-model="input" >
`
})In both of these cases you need to have the compiler + runtime version of Vue or you will get the dreaded:
You are using the runtime-only build of Vue where the template compiler is not available.
So, what is one to do? Well, as we saw above, if you just linked to the CDN, you’re all set. Nothing more to worry about…..it’s Miller time!
If, however, you created your project using the Vue CLI , you have a little more configuration ahead of you. Its not much and you will be covered if you suddenly have an overwhelming desire to inline a template. OK…so maybe its just a casual desire but roll with me here.
So what do we do? Well, dear reader, it really depends on which version of the Vue CLI you used to create your project. Let’s look at each.
The latest Vue CLI – version 3 (as of Sept 2018)
In order to get the compiler + runtime version of Vue in this scenario, you need to add an additional config file to your project root. This files is called vue.config.js. You can read all about this file and its options here.
In this nifty new file you need to add the following code (as shown in the docs here) :
module.exports = {
runtimeCompiler: true
}Versions 1 & 2 of the Vue CLI
Earlier versions of the projects created by the CLI use the webpack.config.js file to configure Webpack. In order to get your project to run with the compiler + runtime, you need to edit the webpack.config.js file. (Check out all the cool stuff WebPack can do here) Within the resolve section, you need to add the following config:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},Notice how this alias references the vue/dist/vue.esm.js file. That is the one you want. You can read all the details about the different builds here.
And there you have it. Now you’re on your way to building awesome sites with Vue and using that spiffy compiler whenever you like.
You do want to be sure you dont run with the compiler in production as the runtime-only build is about 30% lighter.
Happy Viewing…uh….Vueing?….You get the idea.
Thanks for visiting!
