TwoSlash Vue

This package added the support for TwoSlash to handle Vue Single File Component files.

For example:

TwoSlash Rendered

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

Input Code

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

Installation

npm

npm i -D twoslash-vue

pnpm

pnpm i -D twoslash-vue

yarn

yarn add -D twoslash-vue

bun

bun add -D twoslash-vue

Usage

TwoSlash Rendered

import { createTwoSlasher } from 'twoslash' 
import { createTwoSlasher } from 'twoslash-vue' 

const code = `
<script setup>
const msg = 'Hello Vue 3!'
</script>

<template>
  <div>
    <h1></h1>
  </div>
</template>
`

const twoslasher = createTwoSlasher()
const result = twoslasher(code, 'vue') 

Input Code

// @noErrors
import { createTwoSlasher } from 'twoslash'
import { createTwoSlasher } from 'twoslash-vue'

const code = `
<script setup>
const msg = 'Hello Vue 3!'
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
`

const twoslasher = createTwoSlasher()
const result = twoslasher(code, 'vue')