Vue Integration

Twoslash Vue is a Twoslash integration that added support for Twoslash to handle Vue Single File Component files.

This is an example taken from the Twoslash Vue documentation website.

Before

```vue twoslash
<script setup>
import { onMounted, ref } from 'vue'
//                   ^?

// Reactive state.
const count = ref(0)

// Functions that mutate state and trigger updates.
function increment() {
  count.value++
}

// Lifecycle hooks.
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>
```

After

<script setup>
import { onMounted, ref } from 'vue'
function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property .value that points to the inner value.
@param ― value - The object to wrap in the ref.
@see ― https://vuejs.org/api/reactivity-core.html#ref

// Reactive state.
const count = ref(0)

// Functions that mutate state and trigger updates.
function increment() {
  count.value++
}

// Lifecycle hooks.
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}
  </button>
</template>