Twoslash Vue Integration

Added in 0.6.0

Included in Expressive code twoslash, Twoslash Vue is a Twoslash integration that added support for Twoslash to handle Vue Single File Component files.

Usage of this integration requires installing the vue package as a dependency in your project, as it’s a peer dependency of Twoslash-Vue. You can install it using npm, pnpm, or yarn:

npm install vue

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

Rendered Output
Markdown

<script setup>
import { 
const onMounted: CreateHook<any>
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 
const count: Ref<number, number>
count = 
ref<number>(value: number): Ref<number, number> (+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
ref(0)

// Functions that mutate state and trigger updates.
function 
function increment(): void
increment() {
  
const count: Ref<number, number>
count.
Ref<number, number>.value: number
value++
}

// Lifecycle hooks.
function onMounted(hook: any, target?: ComponentInternalInstance | null): void
onMounted(() => {
  
var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@see ― source
console.
Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@since ― v0.1.100
log(`The initial count is ${
const count: Ref<number, number>
count.
Ref<number, number>.value: number
value}.`)
})
</script>

<template>
  <
button: ButtonHTMLAttributes & ReservedProps
button @
onClick?: ((payload: PointerEvent) => void) | undefined
click="
function increment(): void
increment">
    Count is: {{ 
const count: Ref<number, number>
count }}
  </
button: ButtonHTMLAttributes & ReservedProps
button>
</template>

```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>
```