feat: add monorepo and frontend

.gitignore

@@ -1,3 +1,11 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env
+.turbo
+
 # Logs
 logs
 *.log
@@ -101,4 +109,4 @@ dist
 .dynamodb/
 
 # TernJS port file
-.tern-port
+.tern-port

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "antfu.iconify",
+    "antfu.unocss",
+    "antfu.goto-alias",
+    "csstools.postcss",
+    "dbaeumer.vscode-eslint",
+    "vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "prettier.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "editor.formatOnSave": false
+}

frontend/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}

frontend/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env

frontend/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

frontend/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

frontend/README.md

@@ -0,0 +1,80 @@
+<p align="center">
+<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
+</p>
+
+<h2 align="center">
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
+<br><br>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+</p>
+
+## Features
+
+- [💚 Nuxt 3](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
+
+- ⚡️ Vite - Instant HMR
+
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
+
+- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
+
+- 🔥 The `<script setup>` syntax
+
+- 🍍 [State Management via Pinia](https://pinia.esm.dev), see [./composables/user.ts](./composables/user.ts)
+
+- 📑 [Layout system](./layouts)
+
+- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
+
+- 🏎 Zero-config cloud functions and deploy
+
+- 🦾 TypeScript, of course
+
+## Plugins
+
+### Nuxt Modules
+
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
+- [ColorMode](https://github.com/nuxt-community/color-mode-module) - dark and Light mode with auto detection made easy with Nuxt.
+- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
+
+## IDE
+
+We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
+
+## Variations
+
+- [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
+- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
+- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
+- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
+
+## Try it now!
+
+### Online
+
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+
+### GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+
+### Clone to local
+
+If you prefer to do it manually with the cleaner git history
+
+```bash
+npx degit antfu/vitesse-nuxt3 my-nuxt3-app
+cd my-nuxt3-app
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```

frontend/app.vue

@@ -0,0 +1,29 @@
+<script setup>
+useHead({
+  title: 'Vitesse Nuxt 3',
+  link: [
+    {
+      rel: 'icon', type: 'image/png', href: '/nuxt.png',
+    },
+  ],
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+html, body , #__nuxt{
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+</style>

frontend/components/Counter.vue

@@ -0,0 +1,17 @@
+<script setup lang='ts'>
+const { count, inc, dec } = useCount()
+</script>
+
+<template>
+  <div inline-flex m="y-3">
+    <button btn p-2 rounded-full @click="dec()">
+      <div i-carbon-subtract />
+    </button>
+    <div font="mono" w="15" m-auto inline-block>
+      {{ count }}
+    </div>
+    <button btn p-2 rounded-full @click="inc()">
+      <div i-carbon-add />
+    </button>
+  </div>
+</template>

frontend/components/DarkToggle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="dark:i-carbon-moon i-carbon-sun" />
+  </button>
+</template>

frontend/components/Footer.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    text="xl gray4"
+    m-5
+    flex
+    justify-center
+    gap-3
+  >
+    <NuxtLink i-carbon-campsite to="/" />
+    <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="_blank" />
+    <DarkToggle />
+  </div>
+</template>

frontend/components/InputEntry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${encodeURIComponent(name.value)}`)
+}
+</script>
+
+<template>
+  <div>
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text" autocomplete="off"
+      p="x-4 y-2" m="t-5" w="250px"
+      text="center" bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
+    >
+    <div>
+      <button
+        m-3 text-sm btn
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
+  </div>
+</template>

frontend/components/Logos.vue

@@ -0,0 +1,20 @@
+<template>
+  <div inline-flex text-2xl font-300 cursor-default>
+    <div flex flex-col children:mx-auto>
+      <img w-18 h-18 inline-block src="/nuxt.png">
+      <span text-green5 mt--2>Nuxt 3</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      transition-all-500
+      transform
+      hover:rotate-135
+      i-carbon-add
+    />
+    <div flex flex-col children:mx-auto>
+      <img w-18 h-18 inline-block src="/vite.png">
+      <span text-purple5 mt--2>Vitesse</span>
+    </div>
+  </div>
+</template>

frontend/components/PageView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { data } = await useFetch('/api/pageview')
+
+const time = useTimeAgo(computed(() => data.value!.startAt))
+</script>
+
+<template>
+  <div text-gray:80>
+    <span font-500 text-gray>{{ data!.pageview }}</span>
+    page views since
+    <span text-gray>{{ time }}</span>
+  </div>
+</template>

frontend/composables/count.ts

@@ -0,0 +1,16 @@
+export function useCount() {
+  const count = useState('count', () => Math.round(Math.random() * 20))
+
+  function inc() {
+    count.value += 1
+  }
+  function dec() {
+    count.value -= 1
+  }
+
+  return {
+    count,
+    inc,
+    dec,
+  }
+}

frontend/composables/user.ts

@@ -0,0 +1,34 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  /**
+   * Current named of the user.
+   */
+  const savedName = ref('')
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value)
+      previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))

frontend/html.d.ts

@@ -0,0 +1,13 @@
+// for UnoCSS attributify mode compact in Volar
+// refer: https://github.com/johnsoncodehk/volar/issues/1077#issuecomment-1145361472
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    [key: string]: any
+  }
+}
+declare module '@vue/runtime-core' {
+  interface AllowedComponentProps {
+    [key: string]: any
+  }
+}
+export {}

frontend/layouts/README.md

@@ -0,0 +1,15 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```html
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+```
+
+Learn more on https://nuxt.com/docs/guide/directory-structure/layouts

frontend/layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>

frontend/layouts/home.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Home Layout]
+    </div>
+  </main>
+</template>