6

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?

lhk
  • 27,458
  • 30
  • 122
  • 201

0 Answers0