2021-12-24 vitesse-lite clone

src/components/Counter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>()
+
+const { count, inc, dec } = useCounter(props.initial)
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>

src/components/Footer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { isDark, toggleDark } from '~/composables'
+</script>
+
+<template>
+  <nav text-xl mt-6 inline-flex gap-2>
+    <button class="icon-btn !outline-none" @click="toggleDark()">
+      <div v-if="isDark" i-carbon-moon />
+      <div v-else i-carbon-sun />
+    </button>
+
+    <a
+      class="icon-btn"
+      i-carbon-logo-github
+      rel="noreferrer"
+      href="https://github.com/antfu/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
+  </nav>
+</template>

src/components/README.md

@@ -0,0 +1,9 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+### Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
+
+It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.