how to configure types for Typescript and Vue 3.0 (bundler and runtime compilation)

Viewed 348

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?

0 Answers
Related