2021-12-24 vitesse-lite clone

src/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
+    <router-view />
+    <Footer />
+  </main>
+</template>

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.

src/composables/dark.ts

@@ -0,0 +1,2 @@
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

src/composables/index.ts

@@ -0,0 +1 @@
+export * from './dark'

src/main.ts

@@ -0,0 +1,17 @@
+// register vue composition api globally
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
+import App from './App.vue'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+app.use(router)
+app.mount('#app')

src/pages/README.md

@@ -0,0 +1,20 @@
+## File-based Routing
+
+Routes will be auto-generated for Vue files in this dir with the same file structure.
+Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
+
+### Path Aliasing
+
+`~/` is aliased to `./src/` folder.
+
+For example, instead of having
+
+```ts
+import { isDark } from '../../../../composables'
+```
+
+now, you can use
+
+```ts
+import { isDark } from '~/composables'
+```

src/pages/[...all].vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    Not Found
+  </div>
+</template>

src/pages/hi/[name].vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{ name: string }>()
+const router = useRouter()
+</script>
+
+<template>
+  <div>
+    <div i-carbon-pedestrian text-4xl inline-block />
+    <p>
+      Hi, {{ props.name }}
+    </p>
+    <p text-sm op50>
+      <em>Dynamic route!</em>
+    </p>
+
+    <div>
+      <button
+        class="btn m-3 text-sm mt-8"
+        @click="router.back()"
+      >
+        Back
+      </button>
+    </div>
+  </div>
+</template>

src/pages/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <div>
+    <div i-carbon-campsite text-4xl inline-block />
+    <p>
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank">
+        Vitesse Lite
+      </a>
+    </p>
+    <p>
+      <em text-sm op75>Opinionated Vite Starter Template</em>
+    </p>
+
+    <div py-4 />
+
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text"
+      autocomplete="false"
+      p="x-4 y-2"
+      w="250px"
+      text="center"
+      bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
+    >
+
+    <div>
+      <button
+        class="m-3 text-sm btn"
+        :disabled="!name"
+        @click="go"
+      >
+        Go
+      </button>
+    </div>
+  </div>
+</template>

src/styles/main.css

@@ -0,0 +1,11 @@
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #121212;
+}