From e586d7d704d475afe3373a1de6ae20d504f79d6d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 5 Jun 2025 14:25:23 +0000
Subject: Sync from a8e1c0a7402940e0fc5beef669522b315052df1b

---
 .../src/components/vue/VueCounter.vue              | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 examples/framework-multiple/src/components/vue/VueCounter.vue

(limited to 'examples/framework-multiple/src/components/vue')

diff --git a/examples/framework-multiple/src/components/vue/VueCounter.vue b/examples/framework-multiple/src/components/vue/VueCounter.vue
new file mode 100644
index 000000000..74820f7f0
--- /dev/null
+++ b/examples/framework-multiple/src/components/vue/VueCounter.vue
@@ -0,0 +1,33 @@
+<template>
+	<!--
+		Seeing type errors on the word `class`?
+		This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally.
+		There's currently no way to prevent this when using both Vue and React with TypeScript in the same project.
+		You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592
+	-->
+	<div class="counter">
+		<button @click="subtract()">-</button>
+		<pre>{{ count }}</pre>
+		<button @click="add()">+</button>
+	</div>
+	<div class="counter-message">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+	setup() {
+		const count = ref(0);
+		const add = () => (count.value = count.value + 1);
+		const subtract = () => (count.value = count.value - 1);
+
+		return {
+			count,
+			add,
+			subtract,
+		};
+	},
+};
+</script>
-- 
cgit v1.2.3