I'm following the Vue getting started guide, and would like to make this simple example work:
HTML:
<div id="counter">
Counter: {{ counter }}
</div>
Typescript:
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
To do this I've installed:
npm install vue@next
and I'm importing it with:
import * as Vue from "vue";
The HTML snippet and Typescript script are put into an index.html
file. This is bundled with parcel
and hosted locally with serve
.
Vue ships Typescript types and if I import Vue like this, they are correctly picked up. However, when I open the hosted project, there's an error message:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.
I followed the advice and changed my import to:
import * as Vue from "vue/dist/vue.esm-bundler";
This makes the sample code work as expected. But now the typing information is lost.
What is the correct way to combine Vue with Typescript and a bundler, while allowing for runtime compilation?