chore: init

components/Counter.vue

@@ -0,0 +1,15 @@
+<script setup lang='ts'>
+const { count, inc, dec } = useCount()
+</script>
+
+<template>
+  <div m="y-3">
+    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="dec()">
+      dec
+    </button>
+    <span font="mono">{{ count }}</span>
+    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="inc()">
+      inc
+    </button>
+  </div>
+</template>

components/DarkToggle.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark()">
+    <div v-if="isDark" class="i-carbon-moon" />
+    <div v-else class="i-carbon-sun" />
+  </button>
+</template>

components/Hello.vue

@@ -0,0 +1,5 @@
+<template>
+  <div op-50 text-lg>
+    This is an auto imported component
+  </div>
+</template>