From 030c23035b2e8670f6b7fafe40b2652d6711113d Mon Sep 17 00:00:00 2001
From: DorZuberi <admin@dorzki.io>
Date: Sat, 6 Jun 2026 12:48:58 +0200
Subject: [PATCH 1/2] Add Vue language support with patterns, injections, and
 integration into Highlighter.

---
 src/Highlighter.php                           |  4 +-
 .../Injections/VueInterpolationInjection.php  | 28 ++++++++++
 .../Injections/VueScriptSetupInjection.php    | 24 +++++++++
 .../Injections/VueStyleScopedInjection.php    | 24 +++++++++
 .../Vue/Injections/VueStyleScssInjection.php  | 24 +++++++++
 .../Vue/Injections/VueTypeScriptInjection.php | 24 +++++++++
 .../Patterns/VueDirectiveArgumentPattern.php  | 24 +++++++++
 .../Vue/Patterns/VueDirectivePattern.php      | 24 +++++++++
 .../VueDirectiveShorthandArgumentPattern.php  | 24 +++++++++
 .../Patterns/VueDirectiveShorthandPattern.php | 24 +++++++++
 src/Languages/Vue/VueLanguage.php             | 51 +++++++++++++++++++
 11 files changed, 274 insertions(+), 1 deletion(-)
 create mode 100644 src/Languages/Vue/Injections/VueInterpolationInjection.php
 create mode 100644 src/Languages/Vue/Injections/VueScriptSetupInjection.php
 create mode 100644 src/Languages/Vue/Injections/VueStyleScopedInjection.php
 create mode 100644 src/Languages/Vue/Injections/VueStyleScssInjection.php
 create mode 100644 src/Languages/Vue/Injections/VueTypeScriptInjection.php
 create mode 100644 src/Languages/Vue/Patterns/VueDirectiveArgumentPattern.php
 create mode 100644 src/Languages/Vue/Patterns/VueDirectivePattern.php
 create mode 100644 src/Languages/Vue/Patterns/VueDirectiveShorthandArgumentPattern.php
 create mode 100644 src/Languages/Vue/Patterns/VueDirectiveShorthandPattern.php
 create mode 100644 src/Languages/Vue/VueLanguage.php

diff --git a/src/Highlighter.php b/src/Highlighter.php
index aacf3dd..1961d6b 100644
--- a/src/Highlighter.php
+++ b/src/Highlighter.php
@@ -33,6 +33,7 @@
 use Tempest\Highlight\Languages\Text\TextLanguage;
 use Tempest\Highlight\Languages\Twig\TwigLanguage;
 use Tempest\Highlight\Languages\TypeScript\TypeScriptLanguage;
+use Tempest\Highlight\Languages\Vue\VueLanguage;
 use Tempest\Highlight\Languages\Xml\XmlLanguage;
 use Tempest\Highlight\Languages\Yaml\YamlLanguage;
 use Tempest\Highlight\Themes\CssTheme;
@@ -88,7 +89,8 @@ public function __construct(
             ->addLanguage(new DotEnvLanguage())
             ->addLanguage(new IniLanguage())
             ->addLanguage(new TwigLanguage())
-            ->addLanguage(new SvelteLanguage());
+            ->addLanguage(new SvelteLanguage())
+            ->addLanguage(new VueLanguage());
 
         $this->parseTokens = new ParseTokens();
         $this->groupTokens = new GroupTokens();
diff --git a/src/Languages/Vue/Injections/VueInterpolationInjection.php b/src/Languages/Vue/Injections/VueInterpolationInjection.php
new file mode 100644
index 0000000..72cf983
--- /dev/null
+++ b/src/Languages/Vue/Injections/VueInterpolationInjection.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+use Tempest\Highlight\PatternTest;
+
+#[PatternTest(input: '{{ name }}', output: ' name ')]
+#[PatternTest(input: '{{ user.id }}', output: ' user.id ')]
+#[PatternTest(input: '{{ count + 1 }}', output: ' count + 1 ')]
+final class VueInterpolationInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '\{\{(?<match>[\s\S]*?)\}\}';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'typescript');
+    }
+}
diff --git a/src/Languages/Vue/Injections/VueScriptSetupInjection.php b/src/Languages/Vue/Injections/VueScriptSetupInjection.php
new file mode 100644
index 0000000..adec40d
--- /dev/null
+++ b/src/Languages/Vue/Injections/VueScriptSetupInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class VueScriptSetupInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '<script\s+setup\s*>(?<match>[\s\S]*?)<\/script>';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'javascript');
+    }
+}
diff --git a/src/Languages/Vue/Injections/VueStyleScopedInjection.php b/src/Languages/Vue/Injections/VueStyleScopedInjection.php
new file mode 100644
index 0000000..e80abd6
--- /dev/null
+++ b/src/Languages/Vue/Injections/VueStyleScopedInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class VueStyleScopedInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '<style\s+[^>]*\bscoped\b[^>]*>(?<match>[\s\S]*?)<\/style>';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'css');
+    }
+}
diff --git a/src/Languages/Vue/Injections/VueStyleScssInjection.php b/src/Languages/Vue/Injections/VueStyleScssInjection.php
new file mode 100644
index 0000000..b333ba3
--- /dev/null
+++ b/src/Languages/Vue/Injections/VueStyleScssInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class VueStyleScssInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '<style[^>]*\blang="s[ac]ss"[^>]*>(?<match>[\s\S]*?)<\/style>';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'scss');
+    }
+}
diff --git a/src/Languages/Vue/Injections/VueTypeScriptInjection.php b/src/Languages/Vue/Injections/VueTypeScriptInjection.php
new file mode 100644
index 0000000..a9e45c1
--- /dev/null
+++ b/src/Languages/Vue/Injections/VueTypeScriptInjection.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Injections;
+
+use Tempest\Highlight\Highlighter;
+use Tempest\Highlight\Injection;
+use Tempest\Highlight\IsInjection;
+
+final class VueTypeScriptInjection implements Injection
+{
+    use IsInjection;
+
+    public function getPattern(): string
+    {
+        return '<script[^>]*\blang="ts"[^>]*>(?<match>[\s\S]*?)<\/script>';
+    }
+
+    public function parseContent(string $content, Highlighter $highlighter): string
+    {
+        return $highlighter->parse($content, 'typescript');
+    }
+}
diff --git a/src/Languages/Vue/Patterns/VueDirectiveArgumentPattern.php b/src/Languages/Vue/Patterns/VueDirectiveArgumentPattern.php
new file mode 100644
index 0000000..f762ab7
--- /dev/null
+++ b/src/Languages/Vue/Patterns/VueDirectiveArgumentPattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class VueDirectiveArgumentPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '\sv-(?:bind|on|slot|model):(?<match>[\w-]+)';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Vue/Patterns/VueDirectivePattern.php b/src/Languages/Vue/Patterns/VueDirectivePattern.php
new file mode 100644
index 0000000..134f2c3
--- /dev/null
+++ b/src/Languages/Vue/Patterns/VueDirectivePattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class VueDirectivePattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '(?<=\s)(?<match>v-(?:if|else-if|else|for|show|model|bind|on|html|text|pre|cloak|once|slot|memo))\b';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Vue/Patterns/VueDirectiveShorthandArgumentPattern.php b/src/Languages/Vue/Patterns/VueDirectiveShorthandArgumentPattern.php
new file mode 100644
index 0000000..ffe3375
--- /dev/null
+++ b/src/Languages/Vue/Patterns/VueDirectiveShorthandArgumentPattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class VueDirectiveShorthandArgumentPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '\s[:@#](?<match>[\w-]+)';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Vue/Patterns/VueDirectiveShorthandPattern.php b/src/Languages/Vue/Patterns/VueDirectiveShorthandPattern.php
new file mode 100644
index 0000000..afec31a
--- /dev/null
+++ b/src/Languages/Vue/Patterns/VueDirectiveShorthandPattern.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\Tokens\TokenTypeEnum;
+
+final readonly class VueDirectiveShorthandPattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '(?<=\s)(?<match>[:@#])[\w-]+';
+    }
+
+    public function getTokenType(): TokenTypeEnum
+    {
+        return TokenTypeEnum::PROPERTY;
+    }
+}
diff --git a/src/Languages/Vue/VueLanguage.php b/src/Languages/Vue/VueLanguage.php
new file mode 100644
index 0000000..7bce6be
--- /dev/null
+++ b/src/Languages/Vue/VueLanguage.php
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Vue;
+
+use Override;
+use Tempest\Highlight\Languages\Html\HtmlLanguage;
+use Tempest\Highlight\Languages\Vue\Injections\VueInterpolationInjection;
+use Tempest\Highlight\Languages\Vue\Injections\VueScriptSetupInjection;
+use Tempest\Highlight\Languages\Vue\Injections\VueStyleScopedInjection;
+use Tempest\Highlight\Languages\Vue\Injections\VueStyleScssInjection;
+use Tempest\Highlight\Languages\Vue\Injections\VueTypeScriptInjection;
+use Tempest\Highlight\Languages\Vue\Patterns\VueDirectiveArgumentPattern;
+use Tempest\Highlight\Languages\Vue\Patterns\VueDirectivePattern;
+use Tempest\Highlight\Languages\Vue\Patterns\VueDirectiveShorthandArgumentPattern;
+use Tempest\Highlight\Languages\Vue\Patterns\VueDirectiveShorthandPattern;
+
+class VueLanguage extends HtmlLanguage
+{
+    #[Override]
+    public function getName(): string
+    {
+        return 'vue';
+    }
+
+    #[Override]
+    public function getInjections(): array
+    {
+        return [
+            ...parent::getInjections(),
+            new VueTypeScriptInjection(),
+            new VueScriptSetupInjection(),
+            new VueStyleScssInjection(),
+            new VueStyleScopedInjection(),
+            new VueInterpolationInjection(),
+        ];
+    }
+
+    #[Override]
+    public function getPatterns(): array
+    {
+        return [
+            ...parent::getPatterns(),
+            new VueDirectivePattern(),
+            new VueDirectiveArgumentPattern(),
+            new VueDirectiveShorthandPattern(),
+            new VueDirectiveShorthandArgumentPattern(),
+        ];
+    }
+}

From 785b5d81eef3bcd1141404a2174d1ab6cb0f8f85 Mon Sep 17 00:00:00 2001
From: DorZuberi <admin@dorzki.io>
Date: Sat, 6 Jun 2026 12:49:10 +0200
Subject: [PATCH 2/2] Add Vue language tests, fixtures, and benchmarks

---
 tests/Bench/Fixtures/vue.txt            |  79 ++++++++++++
 tests/Bench/HighlighterBench.php        |   1 +
 tests/Languages/Vue/VueLanguageTest.php | 165 ++++++++++++++++++++++++
 tests/targets/vue.md                    |  81 ++++++++++++
 4 files changed, 326 insertions(+)
 create mode 100644 tests/Bench/Fixtures/vue.txt
 create mode 100644 tests/Languages/Vue/VueLanguageTest.php
 create mode 100644 tests/targets/vue.md

diff --git a/tests/Bench/Fixtures/vue.txt b/tests/Bench/Fixtures/vue.txt
new file mode 100644
index 0000000..8752a70
--- /dev/null
+++ b/tests/Bench/Fixtures/vue.txt
@@ -0,0 +1,79 @@
+<!-- A Vue 3 SFC counter-and-list component -->
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+type Todo = { id: number; text: string; done: boolean }
+
+const props = defineProps<{
+	title: string
+	initial?: Todo[]
+}>()
+
+const emit = defineEmits<{
+	update: [todos: Todo[]]
+}>()
+
+const draft = ref('')
+const todos = ref<Todo[]>(props.initial ?? [])
+const filter = ref<'all' | 'active' | 'done'>('all')
+
+const visible = computed(() => {
+	switch (filter.value) {
+		case 'active': return todos.value.filter((t) => !t.done)
+		case 'done':   return todos.value.filter((t) => t.done)
+		default:       return todos.value
+	}
+})
+
+const remaining = computed(() => todos.value.filter((t) => !t.done).length)
+
+watch(todos, (next) => {
+	emit('update', next)
+}, { deep: true })
+
+function add() {
+	if (!draft.value.trim()) return
+	todos.value.push({ id: Date.now(), text: draft.value, done: false })
+	draft.value = ''
+}
+</script>
+
+<template>
+	<h1>{{ title }}</h1>
+
+	<form @submit.prevent="add">
+		<input v-model="draft" placeholder="What needs doing?" />
+		<button type="submit">Add</button>
+	</form>
+
+	<select v-model="filter">
+		<option value="all">All</option>
+		<option value="active">Active</option>
+		<option value="done">Done</option>
+	</select>
+
+	<ul>
+		<li v-for="todo in visible" :key="todo.id" :class="{ done: todo.done }">
+			<input type="checkbox" v-model="todo.done" />
+			{{ todo.text }}
+		</li>
+	</ul>
+
+	<p v-if="filter === 'all'">Showing everything.</p>
+	<p v-else-if="filter === 'active'">Showing active todos.</p>
+	<p v-else>Showing {{ remaining }} remaining.</p>
+</template>
+
+<style scoped lang="scss">
+h1 {
+	color: red;
+
+	&:hover {
+		color: blue;
+	}
+}
+
+.done {
+	text-decoration: line-through;
+}
+</style>
diff --git a/tests/Bench/HighlighterBench.php b/tests/Bench/HighlighterBench.php
index d242f0f..30c17bd 100644
--- a/tests/Bench/HighlighterBench.php
+++ b/tests/Bench/HighlighterBench.php
@@ -42,6 +42,7 @@ final class HighlighterBench
         'terraform' => 'terraform.txt',
         'typescript' => 'typescript.txt',
         'twig' => 'twig.txt',
+        'vue' => 'vue.txt',
         'xml' => 'xml.txt',
         'yaml' => 'yaml.txt',
     ];
diff --git a/tests/Languages/Vue/VueLanguageTest.php b/tests/Languages/Vue/VueLanguageTest.php
new file mode 100644
index 0000000..3e70eab
--- /dev/null
+++ b/tests/Languages/Vue/VueLanguageTest.php
@@ -0,0 +1,165 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Tests\Languages\Vue;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\TestCase;
+use Tempest\Highlight\Highlighter;
+
+class VueLanguageTest extends TestCase
+{
+    #[DataProvider('provide_highlight_cases')]
+    public function test_highlight(string $content, string $expected): void
+    {
+        $highlighter = new Highlighter();
+
+        $this->assertSame(
+            $expected,
+            $highlighter->parse($content, 'vue'),
+        );
+    }
+
+    public static function provide_highlight_cases(): iterable
+    {
+        return [
+            [
+                '<p>{{ user.name }}</p>',
+                '&lt;<span class="hl-keyword">p</span>&gt;{{ user.<span class="hl-property">name</span> }}&lt;/<span class="hl-keyword">p</span>&gt;',
+            ],
+            [
+                '<p>Total: {{ items.length }}</p>',
+                '&lt;<span class="hl-keyword">p</span>&gt;Total: {{ items.<span class="hl-property">length</span> }}&lt;/<span class="hl-keyword">p</span>&gt;',
+            ],
+            [
+                '<p v-if="x === 1">one</p>',
+                '&lt;<span class="hl-keyword">p</span> <span class="hl-property">v-if</span>=&quot;x === 1&quot;&gt;one&lt;/<span class="hl-keyword">p</span>&gt;',
+            ],
+            [
+                <<<'TXT'
+                <p v-if="x === 1">one</p>
+                <p v-else-if="x === 2">two</p>
+                <p v-else>other</p>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">p</span> <span class="hl-property">v-if</span>=&quot;x === 1&quot;&gt;one&lt;/<span class="hl-keyword">p</span>&gt;
+                &lt;<span class="hl-keyword">p</span> <span class="hl-property">v-else-if</span>=&quot;x === 2&quot;&gt;two&lt;/<span class="hl-keyword">p</span>&gt;
+                &lt;<span class="hl-keyword">p</span> <span class="hl-property">v-else</span>&gt;other&lt;/<span class="hl-keyword">p</span>&gt;
+                TXT,
+            ],
+            [
+                '<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>',
+                '&lt;<span class="hl-keyword">li</span> <span class="hl-property">v-for</span>=&quot;(item, i) in items&quot; <span class="hl-property">:key</span>=&quot;i&quot;&gt;{{ item.<span class="hl-property">name</span> }}&lt;/<span class="hl-keyword">li</span>&gt;',
+            ],
+            [
+                '<input v-model="value" />',
+                '&lt;<span class="hl-keyword">input</span> <span class="hl-property">v-model</span>=&quot;value&quot; /&gt;',
+            ],
+            [
+                '<a v-bind:href="url" v-on:click="go">link</a>',
+                '&lt;<span class="hl-keyword">a</span> <span class="hl-property">v-bind:href</span>=&quot;url&quot; <span class="hl-property">v-on:click</span>=&quot;go&quot;&gt;link&lt;/<span class="hl-keyword">a</span>&gt;',
+            ],
+            [
+                '<button @click="handler" :class="cls">x</button>',
+                '&lt;<span class="hl-keyword">button</span> <span class="hl-property">@</span><span class="hl-property">click</span>=&quot;handler&quot; <span class="hl-property">:class</span>=&quot;cls&quot;&gt;x&lt;/<span class="hl-keyword">button</span>&gt;',
+            ],
+            [
+                '<MyComp #default="slotProps">x</MyComp>',
+                '&lt;<span class="hl-keyword">MyComp</span> <span class="hl-property">#</span><span class="hl-property">default</span>=&quot;slotProps&quot;&gt;x&lt;/<span class="hl-keyword">MyComp</span>&gt;',
+            ],
+            [
+                <<<'TXT'
+                <script setup lang="ts">
+                import { ref } from "vue"
+                const count = ref(0)
+                </script>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">script</span> setup <span class="hl-property">lang</span>=&quot;ts&quot;&gt;
+                <span class="hl-keyword">import</span> { ref } <span class="hl-keyword">from</span> <span class="hl-value">&quot;vue&quot;</span>
+                <span class="hl-keyword">const</span> count = <span class="hl-property">ref</span>(0)
+                &lt;/<span class="hl-keyword">script</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <script setup>
+                const x = 1
+                </script>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">script</span> setup&gt;
+                <span class="hl-keyword">const</span> <span class="hl-property">x</span> = 1
+                &lt;/<span class="hl-keyword">script</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <style scoped>
+                h1 { color: red; }
+                </style>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">style</span> scoped&gt;<span class="hl-keyword">
+                h1 </span>{ <span class="hl-property">color</span>: red; }
+                &lt;/<span class="hl-keyword">style</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <style lang="scss" scoped>
+                h1 { color: red; }
+                </style>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">style</span> <span class="hl-property">lang</span>=&quot;scss&quot; scoped&gt;<span class="hl-keyword">
+                h1 </span>{ <span class="hl-property">color</span>: red; }
+                &lt;/<span class="hl-keyword">style</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <template>
+                  <h1>Hello {{ name }}</h1>
+                </template>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">template</span>&gt;
+                  &lt;<span class="hl-keyword">h1</span>&gt;Hello {{ name }}&lt;/<span class="hl-keyword">h1</span>&gt;
+                &lt;/<span class="hl-keyword">template</span>&gt;
+                TXT,
+            ],
+            [
+                <<<'TXT'
+                <script setup lang="ts">
+                import { ref } from "vue"
+                const count = ref(0)
+                </script>
+
+                <template>
+                  <button @click="count++">{{ count }}</button>
+                </template>
+
+                <style scoped>
+                button { color: red; }
+                </style>
+                TXT,
+                <<<'TXT'
+                &lt;<span class="hl-keyword">script</span> setup <span class="hl-property">lang</span>=&quot;ts&quot;&gt;
+                <span class="hl-keyword">import</span> { ref } <span class="hl-keyword">from</span> <span class="hl-value">&quot;vue&quot;</span>
+                <span class="hl-keyword">const</span> count = <span class="hl-property">ref</span>(0)
+                &lt;/<span class="hl-keyword">script</span>&gt;
+
+                &lt;<span class="hl-keyword">template</span>&gt;
+                  &lt;<span class="hl-keyword">button</span> <span class="hl-property">@</span><span class="hl-property">click</span>=&quot;count++&quot;&gt;{{ count }}&lt;/<span class="hl-keyword">button</span>&gt;
+                &lt;/<span class="hl-keyword">template</span>&gt;
+
+                &lt;<span class="hl-keyword">style</span> scoped&gt;<span class="hl-keyword">
+                button </span>{ <span class="hl-property">color</span>: red; }
+                &lt;/<span class="hl-keyword">style</span>&gt;
+                TXT,
+            ],
+        ];
+    }
+}
diff --git a/tests/targets/vue.md b/tests/targets/vue.md
new file mode 100644
index 0000000..d58be2b
--- /dev/null
+++ b/tests/targets/vue.md
@@ -0,0 +1,81 @@
+```vue
+<!-- A Vue 3 SFC counter-and-list component -->
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+type Todo = { id: number; text: string; done: boolean }
+
+const props = defineProps<{
+	title: string
+	initial?: Todo[]
+}>()
+
+const emit = defineEmits<{
+	update: [todos: Todo[]]
+}>()
+
+const draft = ref('')
+const todos = ref<Todo[]>(props.initial ?? [])
+const filter = ref<'all' | 'active' | 'done'>('all')
+
+const visible = computed(() => {
+	switch (filter.value) {
+		case 'active': return todos.value.filter((t) => !t.done)
+		case 'done':   return todos.value.filter((t) => t.done)
+		default:       return todos.value
+	}
+})
+
+const remaining = computed(() => todos.value.filter((t) => !t.done).length)
+
+watch(todos, (next) => {
+	emit('update', next)
+}, { deep: true })
+
+function add() {
+	if (!draft.value.trim()) return
+	todos.value.push({ id: Date.now(), text: draft.value, done: false })
+	draft.value = ''
+}
+</script>
+
+<template>
+	<h1>{{ title }}</h1>
+
+	<form @submit.prevent="add">
+		<input v-model="draft" placeholder="What needs doing?" />
+		<button type="submit">Add</button>
+	</form>
+
+	<select v-model="filter">
+		<option value="all">All</option>
+		<option value="active">Active</option>
+		<option value="done">Done</option>
+	</select>
+
+	<ul>
+		<li v-for="todo in visible" :key="todo.id" :class="{ done: todo.done }">
+			<input type="checkbox" v-model="todo.done" />
+			{{ todo.text }}
+		</li>
+	</ul>
+
+	<p v-if="filter === 'all'">Showing everything.</p>
+	<p v-else-if="filter === 'active'">Showing active todos.</p>
+	<p v-else>Showing {{ remaining }} remaining.</p>
+</template>
+
+<style scoped lang="scss">
+h1 {
+	color: red;
+
+	&:hover {
+		color: blue;
+	}
+}
+
+.done {
+	text-decoration: line-through;
+}
+</style>
+```