Initial commit

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: antfu

.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log
+dist
+.output
+.nuxt
+.env
+.idea/

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true

.stackblitzrc

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

.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,45 @@
+{
+  "files.associations": {
+    "*.css": "postcss"
+  },
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": false
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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>
+
+<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/unocss/unocss) - The instant on-demand atomic CSS engine.
+
+- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/unocss/unocss).
+
+- 🔥 The `<script setup>` syntax.
+
+- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), 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.
+
+- 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto-update behavior.
+
+## Plugins
+
+### Nuxt Modules
+
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
+- [ColorMode](https://github.com/nuxt-modules/color-mode) - dark and Light mode with auto detection made easy with Nuxt.
+- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://github.com/vuejs/pinia) - intuitive, type safe, light and flexible Store for Vue.
+- [VitePWA](https://github.com/vite-pwa/nuxt) - zero-config PWA Plugin for Nuxt 3.
+- [DevTools](https://github.com/nuxt/devtools) - unleash Nuxt Developer Experience.
+
+## 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](https://vuejs.github.io/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
+```

app.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { appName } from '~/constants'
+
+useHead({
+  title: appName,
+})
+</script>
+
+<template>
+  <VitePwaManifest />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+html,
+body,
+#__nuxt {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+</style>

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 rounded-full p-2 btn @click="dec()">
+      <div i-carbon-subtract />
+    </button>
+    <div font="mono" w="15" m-auto inline-block>
+      {{ count }}
+    </div>
+    <button rounded-full p-2 btn @click="inc()">
+      <div i-carbon-add />
+    </button>
+  </div>
+</template>

components/DarkToggle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const color = useColorMode()
+
+useHead({
+  meta: [{
+    id: 'theme-color',
+    name: 'theme-color',
+    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
+  }],
+})
+
+function toggleDark() {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark">
+    <div class="i-carbon-sun dark:i-carbon-moon" />
+  </button>
+</template>

components/Footer.vue

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

components/InputEntry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const name = ref('')
+
+const router = useRouter()
+function 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>

components/Logos.vue

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

components/PageView.vue

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

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,
+  }
+}