How to use Vue in an existing typescript application without modules?

Question

I'm trying to use Vue in "progressive enhancement" mode in an existing site, which already uses Typescript extensively.

The vue tutorial shows code like this:

<script type="module">
import { createApp, reactive, ref } from 'vue'

createApp({
  setup() {
    const counter = reactive({ count: 0 })
    const message = ref('Hello World!')

    return {
      counter,
      message
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</div>

But I don't want to have javascript in the html file, I want to relocate that code to a proper typescript file. But when I do this, I get compilation errors no matter how I try to arrange this.

---

If I don't qualify anything, I get errors like Error TS2304 (TS) Cannot find name 'createApp'. This makes sense because the whole point of Typescript is to type check and not let you reference unknown things.

---

So I try to import Vue like this:

import { Vue } from '../../node_modules/vue/dist/vue.global.js';

and change the call to Vue.createApp(...). This causes the browser error Cannot use import statement outside a module

---

If I try instead:

let { Vue } = require('../../node_modules/vue/dist/vue.global.js')

I get require is not defined.

---

I tried getting the vue.d.ts typings from https://github.com/vuejs/vue/blob/dev/types/vue.d.ts and referencing the file with /// <reference path="../../Scripts/vue.d.ts" />" />, but this just doesn't work, giving Error TS2304 (TS) Cannot find name 'Vue'.

---

I have tried many, many permutations of this but all of them run into one error or another.

So the question is: how can I retrofit Vue into an existing Typescript app without modules?