2021-12-24 vitesse-lite clone

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>