chore: init

src/App.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useHead } from '@vueuse/head'
+
+// https://github.com/vueuse/head
+// you can use this to manipulate the document head in any components,
+// they will be rendered correctly in the html results with vite-ssg
+useHead({
+  title: 'Vitesse Lite',
+  meta: [
+    { name: 'description', content: 'Opinionated Vite Starter Template' },
+  ],
+})
+</script>
+
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <router-view />
+    <Footer />
+  </main>
+</template>

src/components/Footer.vue

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

src/components/README.md

@@ -0,0 +1,10 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-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 [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.

src/logic/dark.ts

@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

src/logic/index.ts

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

src/main.ts

@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
+import { createHead } from '@vueuse/head'
+import App from './App.vue'
+
+// windicss layers
+import 'virtual:windi-base.css'
+import 'virtual:windi-components.css'
+import './styles/main.css'
+import 'virtual:windi-utilities.css'
+
+// register vue composition api globally
+import 'vue-global-api'
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+const head = createHead()
+app.use(head)
+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 '../../../../logic'
+```
+
+now, you can use
+
+```ts
+import { isDark } from '~/logic'
+```

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    Not Found
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>

src/pages/hi/[name].vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{ name: string }>()
+const router = useRouter()
+</script>
+
+<template>
+  <div>
+    <p class="text-4xl">
+      <carbon-pedestrian class="inline-block" />
+    </p>
+    <p>
+      Hi, {{ props.name }}
+    </p>
+    <p class="text-sm opacity-50">
+      <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,54 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <div>
+    <p class="text-4xl">
+      <carbon-campsite class="inline-block" />
+    </p>
+    <p>
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank">
+        Vitesse Lite
+      </a>
+    </p>
+    <p>
+      <em class="text-sm opacity-75">Opinionated Vite Starter Template</em>
+    </p>
+
+    <div class="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/shims.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-duplicates */
+
+declare interface Window {
+  // extend the window
+}
+
+// with vite-plugin-md, markdowns can be treat as Vue components
+declare module '*.md' {
+  import { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

src/styles/main.css

@@ -0,0 +1,41 @@
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #121212;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  @apply bg-teal-600 opacity-75;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+.btn {
+  @apply px-4 py-1 rounded inline-block
+    bg-teal-600 text-white cursor-pointer
+    hover:bg-teal-700
+    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
+}
+
+.icon-btn {
+  @apply inline-block cursor-pointer select-none
+    opacity-75 transition duration-200 ease-in-out
+    hover:opacity-100 hover:text-teal-600;
+  font-size: 0.9em;
+}