feat: add counter to demo

demo/components/Counter.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
+    <button
+      border="r gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >-</button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >+</button>
+  </div>
+</template>

packages/create-app/template/components/Counter.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
+    <button
+      border="r gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >-</button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l gray-400 opacity-50"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >+</button>
+  </div>
+</template>

packages/create-app/template/slides.md

@@ -105,6 +105,13 @@ You can use Vue components directly inside your slides.
 
 We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly use. And add your custom components are also super easy.
 
+```md
+<Counter :count="10" />
+```
+
+<!-- ./components/Counter.vue -->
+<Counter :count="10" m="t-4" />
+
 Check out [the guides](https://sli.dev/custom/#components) for more.
 
 </div>