├── .npmrc
├── .eslintrc
├── .eslintignore
├── tsconfig.json
├── .gitignore
├── public
    ├── nuxt.png
    └── vite.png
├── .stackblitzrc
├── server
    └── api
    │   └── pageview.ts
├── styles
    └── main.css
├── app.vue
├── netlify.toml
├── composables
    └── count.ts
├── pages
    ├── index.vue
    └── hi
    │   └── [id].vue
├── components
    ├── Footer.vue
    ├── DarkToggle.vue
    ├── PageView.vue
    ├── Counter.vue
    ├── Logos.vue
    └── InputEntry.vue
├── package.json
├── store
    └── user.ts
├── nuxt.config.ts
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu"
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .output
4 | .nuxt
5 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | dist
4 | .output
5 | .nuxt
6 | .env
7 | 


--------------------------------------------------------------------------------
/public/nuxt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mr-dev-dragon/vitesse-nuxt3/HEAD/public/nuxt.png


--------------------------------------------------------------------------------
/public/vite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mr-dev-dragon/vitesse-nuxt3/HEAD/public/vite.png


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "installDependencies": true,
3 |   "startCommand": "npm run dev"
4 | }
5 | 


--------------------------------------------------------------------------------
/server/api/pageview.ts:
--------------------------------------------------------------------------------
1 | const startAt = Date.now()
2 | let count = 0
3 | 
4 | export default defineEventHandler(() => ({
5 |   pageview: count++,
6 |   startAt,
7 | }))
8 | 


--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |   height: 100vh;
 5 |   margin: 0;
 6 |   padding: 0;
 7 | }
 8 | 
 9 | html.dark {
10 |   background: #222;
11 |   color: white;
12 | }
13 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="py-20 px-10 text-center">
 3 |     <NuxtPage />
 4 |     <Footer />
 5 |   </main>
 6 | </template>
 7 | 
 8 | <style>
 9 | @import '~/styles/main.css';
10 | </style>
11 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NPM_FLAGS = "--version"
 3 |   NODE_VERSION = "16"
 4 | 
 5 | [build]
 6 |   publish = "dist"
 7 |   command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
 8 | 
 9 | [[redirects]]
10 |   from = "/*"
11 |   to = "/index.html"
12 |   status = 200
13 | 


--------------------------------------------------------------------------------
/composables/count.ts:
--------------------------------------------------------------------------------
 1 | export function useCount() {
 2 |   const count = useState('count', () => Math.round(Math.random() * 20))
 3 | 
 4 |   function inc() {
 5 |     count.value += 1
 6 |   }
 7 |   function dec() {
 8 |     count.value -= 1
 9 |   }
10 | 
11 |   return {
12 |     count,
13 |     inc,
14 |     dec,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Logos mb-6 />
 4 |     <Suspense>
 5 |       <PageView />
 6 |       <template #fallback>
 7 |         <div op50 italic>
 8 |           <span animate-pulse>Loading...</span>
 9 |         </div>
10 |       </template>
11 |     </Suspense>
12 |     <InputEntry />
13 |   </div>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     text="xl gray4"
 4 |     m-5
 5 |     flex
 6 |     justify-center
 7 |     gap-3
 8 |   >
 9 |     <NuxtLink i-carbon-campsite to="/" />
10 |     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
11 |     <DarkToggle />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/DarkToggle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const color = useColorMode()
 3 | function toggleDark() {
 4 |   color.value = color.value === 'dark' ? 'light' : 'dark'
 5 | }
 6 | </script>
 7 | 
 8 | <template>
 9 |   <button class="!outline-none" @click="toggleDark()">
10 |     <div class="dark:i-carbon-moon i-carbon-sun" />
11 |   </button>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/PageView.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { data } = await useFetch('/api/pageview')
 3 | 
 4 | const time = useTimeAgo(computed(() => data.value.startAt))
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div text-gray:80>
 9 |     <span font-500 text-gray>{{ data.pageview }}</span>
10 |     page views since
11 |     <span text-gray>{{ time }}</span>
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const { count, inc, dec } = useCount()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div inline-flex m="y-3">
 7 |     <button btn p-2 rounded-full @click="dec()">
 8 |       <div i-carbon-subtract />
 9 |     </button>
10 |     <div font="mono" w="15" m-auto inline-block>
11 |       {{ count }}
12 |     </div>
13 |     <button btn p-2 rounded-full @click="inc()">
14 |       <div i-carbon-add />
15 |     </button>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/components/Logos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div inline-flex text-2xl font-300 cursor-default>
 3 |     <div flex flex-col children:mx-auto>
 4 |       <img w-18 h-18 inline-block src="/nuxt.png">
 5 |       <span text-green5 mt--2>Nuxt 3</span>
 6 |     </div>
 7 |     <div
 8 |       text="3xl gray4"
 9 |       m="x-4 y-auto"
10 |       transition-all-500
11 |       transform
12 |       hover:rotate-135
13 |       i-carbon-add
14 |     />
15 |     <div flex flex-col children:mx-auto>
16 |       <img w-18 h-18 inline-block src="/vite.png">
17 |       <span text-purple5 mt--2>Vitesse</span>
18 |     </div>
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxi build",
 5 |     "dev": "nuxi dev",
 6 |     "start": "node .output/server/index.mjs",
 7 |     "lint": "eslint ."
 8 |   },
 9 |   "dependencies": {
10 |     "pinia": "^2.0.13"
11 |   },
12 |   "devDependencies": {
13 |     "@antfu/eslint-config": "^0.20.6",
14 |     "@iconify-json/carbon": "^1.1.3",
15 |     "@iconify-json/twemoji": "^1.1.3",
16 |     "@nuxtjs/color-mode": "^3.0.2",
17 |     "@pinia/nuxt": "^0.1.8",
18 |     "@unocss/nuxt": "^0.31.5",
19 |     "@vueuse/nuxt": "^8.2.6",
20 |     "eslint": "^8.13.0",
21 |     "nuxt3": "^3.0.0-27501460.04a72f8",
22 |     "typescript": "^4.6.3"
23 |   },
24 |   "pnpm": {
25 |     "overrides": {
26 |       "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
27 |       "@nuxt/kit-edge": "latest"
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/components/InputEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const name = ref('')
 3 | 
 4 | const router = useRouter()
 5 | const go = () => {
 6 |   if (name.value)
 7 |     router.push(`/hi/${encodeURIComponent(name.value)}`)
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <input
14 |       id="input"
15 |       v-model="name"
16 |       placeholder="What's your name?"
17 |       type="text"
18 |       autocomplete="false"
19 |       p="x-4 y-2"
20 |       m="t-5"
21 |       w="250px"
22 |       text="center"
23 |       bg="transparent"
24 |       border="~ rounded gray-200 dark:gray-700"
25 |       outline="none active:none"
26 |       @keydown.enter="go"
27 |     >
28 |     <div>
29 |       <button
30 |         class="m-3 text-sm btn"
31 |         :disabled="!name"
32 |         @click="go"
33 |       >
34 |         GO
35 |       </button>
36 |     </div>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/store/user.ts:
--------------------------------------------------------------------------------
 1 | import { acceptHMRUpdate, defineStore } from 'pinia'
 2 | 
 3 | export const useUserStore = defineStore('user', () => {
 4 |   /**
 5 |    * Current named of the user.
 6 |    */
 7 |   const savedName = ref('')
 8 |   const previousNames = ref(new Set<string>())
 9 | 
10 |   const usedNames = computed(() => Array.from(previousNames.value))
11 |   const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value))
12 | 
13 |   /**
14 |    * Changes the current name of the user and saves the one that was used
15 |    * before.
16 |    *
17 |    * @param name - new name to set
18 |    */
19 |   function setNewName(name: string) {
20 |     if (savedName.value)
21 |       previousNames.value.add(savedName.value)
22 | 
23 |     savedName.value = name
24 |   }
25 | 
26 |   return {
27 |     setNewName,
28 |     otherNames,
29 |     savedName,
30 |   }
31 | })
32 | 
33 | if (import.meta.hot)
34 |   import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
35 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from 'nuxt3'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   meta: {
 5 |     title: 'Vitesse Nuxt 3',
 6 |     link: [
 7 |       {
 8 |         rel: 'icon', type: 'image/png', href: '/nuxt.png',
 9 |       },
10 |     ],
11 |   },
12 |   modules: [
13 |     '@vueuse/nuxt',
14 |     '@unocss/nuxt',
15 |     '@pinia/nuxt',
16 |     '@nuxtjs/color-mode',
17 |   ],
18 |   autoImports: {
19 |     dirs: [
20 |       'composables',
21 |       'store',
22 |     ],
23 |   },
24 |   experimental: {
25 |     reactivityTransform: true,
26 |     // viteNode: true,
27 |   },
28 |   vueuse: {
29 |     ssrHandlers: true,
30 |   },
31 |   unocss: {
32 |     uno: true,
33 |     attributify: true,
34 |     preflight: true,
35 |     icons: {
36 |       scale: 1.2,
37 |     },
38 |     shortcuts: [
39 |       ['btn', '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'],
40 |     ],
41 |   },
42 |   colorMode: {
43 |     classSuffix: '',
44 |   },
45 | })
46 | 


--------------------------------------------------------------------------------
/pages/hi/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | const user = useUserStore()
 4 | const name = route.params.id
 5 | 
 6 | watchEffect(() => {
 7 |   user.setNewName(route.params.id as string)
 8 | })
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <div i-twemoji:waving-hand text-4xl inline-block animate-shake-x animate-duration-5000 />
14 |     <h3 text-2xl font-500>
15 |       Hi,
16 |     </h3>
17 |     <div text-xl>
18 |       {{ name }}!
19 |     </div>
20 | 
21 |     <template v-if="user.otherNames.length">
22 |       <p text-sm my-4>
23 |         <span op-50>Also as known as:</span>
24 |         <ul>
25 |           <li v-for="otherName in user.otherNames" :key="otherName">
26 |             <router-link :to="`/hi/${otherName}`" replace>
27 |               {{ otherName }}
28 |             </router-link>
29 |           </li>
30 |         </ul>
31 |       </p>
32 |     </template>
33 | 
34 |     <Counter />
35 | 
36 |     <div>
37 |       <NuxtLink
38 |         class="btn m-3 text-sm"
39 |         to="/"
40 |       >
41 |         Back
42 |       </NuxtLink>
43 |     </div>
44 |   </div>
45 | </template>
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
 3 | </p>
 4 | 
 5 | <h2 align="center">
 6 | <a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
 7 | </h2><br>
 8 | 
 9 | <pre align="center">
10 | 🧪 Working in Progress
11 | </pre>
12 | 
13 | <p align="center">
14 | <br>
15 | <a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
16 | <br><br>
17 | <a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
18 | </p>
19 | 
20 | ## Features
21 | 
22 | - [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
23 | 
24 | - ⚡️ Vite - Instant HMR
25 | 
26 | - 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
27 | 
28 | - 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
29 | 
30 | - 🔥 The `<script setup>` syntax
31 | 
32 | - 🍍 [State Management via Pinia](https://pinia.esm.dev/)
33 | 
34 | - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
35 | 
36 | - 🏎 Zero-config cloud functions and deploy
37 | 
38 | - 🦾 TypeScript, of course
39 | 
40 | ## Plugins
41 | 
42 | ### Nuxt Modules
43 | 
44 | - [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
45 | - [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
46 | - [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
47 | 
48 | ## IDE
49 | 
50 | 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).
51 | 
52 | ## Variations
53 | 
54 | - [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
55 | - [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
56 | - [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) - Vitesse for Nuxt 3
57 | - [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
58 | - [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
59 | 
60 | ## Try it now!
61 | 
62 | ### Online
63 | 
64 | <a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
65 | 
66 | ### GitHub Template
67 | 
68 | [Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
69 | 
70 | ### Clone to local
71 | 
72 | If you prefer to do it manually with the cleaner git history
73 | 
74 | ```bash
75 | npx degit antfu/vitesse-nuxt3 my-nuxt3-app
76 | cd my-nuxt3-app
77 | pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
78 | ```
79 | 


--------------------------------------------------------------------------------