chore: init

.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.output
+.nuxt

.eslintrc

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

.gitignore

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

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

README.md

@@ -0,0 +1,38 @@
+<p align="center">
+<img src="https://user-images.githubusercontent.com/11247099/109278332-6100e780-7853-11eb-9632-ce0b870017e0.png" width="500"/>
+</p>
+
+<h2 align="center">Vitesse for Nuxt 3</h2>
+
+<p align="center">
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+</p><br>
+
+> 🧪 Experimental
+
+## Features
+
+- [💚 Nuxt 3](https://v3.nuxtjs.org)
+
+- ⚡️ 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)
+
+- 🔥 Use the new `<script setup>` syntax in Vue 2
+
+- 📥 APIs auto importing - use Composition API and others directly
+
+- 🦾 TypeScript, of course
+
+## Plugins
+
+### Nuxt Modules
+
+- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
+- [UnoCSS](https://github.com/antfu/unocss) - on-demand atomic CSS engine - powers pure CSS Icons!
+
+## IDE Integration
+
+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).

components/Counter.vue

@@ -0,0 +1,15 @@
+<script setup lang='ts'>
+const { count, inc, dec } = useCount()
+</script>
+
+<template>
+  <div m="y-3">
+    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="dec()">
+      dec
+    </button>
+    <span font="mono">{{ count }}</span>
+    <button border="~ rounded gray-400" class="px-2 mx-2 hover:bg-gray-400/20 !outline-none" @click="inc()">
+      inc
+    </button>
+  </div>
+</template>

components/DarkToggle.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark()">
+    <div v-if="isDark" class="i-carbon-moon" />
+    <div v-else class="i-carbon-sun" />
+  </button>
+</template>

components/Hello.vue

@@ -0,0 +1,5 @@
+<template>
+  <div op-50 text-lg>
+    This is an auto imported component
+  </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,
+  }
+}

modules/uno.ts

@@ -0,0 +1,26 @@
+import { defineNuxtModule, extendViteConfig, extendWebpackConfig, addPluginTemplate } from '@nuxt/kit'
+import Unocss, { UnocssUserOptions } from 'unocss/vite'
+
+export default defineNuxtModule<UnocssUserOptions>({
+  name: 'unocss',
+  defaults: {},
+  configKey: 'unocss',
+  setup(options, nuxt) {
+    nuxt.options.alias['/_nuxt/@unocss-entry.css'] = '/@unocss-entry.css'
+
+    addPluginTemplate({
+      filename: 'unocss.mjs',
+      src: '',
+      getContents: () => 'import \'uno.css\';export default () => {};',
+    })
+
+    extendViteConfig((config) => {
+      config.plugins = config.plugins || []
+      config.plugins.unshift(...Unocss(options))
+    })
+
+    extendWebpackConfig(() => {
+      throw new Error('UnoCSS does not support Webpack at this moment')
+    })
+  },
+})

nuxt.config.ts

@@ -0,0 +1,24 @@
+import { defineNuxtConfig } from 'nuxt3'
+import { presetAttributify, presetUno } from 'unocss'
+import presetIcons from '@unocss/preset-icons'
+
+export default defineNuxtConfig({
+  buildModules: [
+    '@vueuse/core/nuxt',
+    '~/modules/uno.ts',
+  ],
+  css: [
+    '@unocss/reset/tailwind.css',
+    '~/styles/main.css',
+  ],
+  unocss: {
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+      }),
+    ],
+  },
+  components: true,
+})

package.json

@@ -0,0 +1,19 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.10.0",
+    "@iconify/json": "^1.1.422",
+    "@unocss/preset-icons": "^0.4.9",
+    "@unocss/reset": "^0.4.9",
+    "@vueuse/core": "^6.7.4",
+    "eslint": "^8.1.0",
+    "nuxt3": "latest",
+    "typescript": "^4.4.4",
+    "unocss": "^0.4.9"
+  }
+}

pages/hi/_id.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>Hi: {{ id }}</div>
+</template>
+
+<script>
+export default {
+  asyncData({ params }) {
+    return { id: params.id }
+  },
+}
+</script>

pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <main py-40 px-20 text-center>
+    <img w-16 inline-block src="/nuxt.png" />
+    <img w-16 inline-block src="/vite.png" />
+    <h1 mt-5 text-green-500 text-4xl cursor-default>
+      <span hover:text-white hover:bg-green-600>Nuxt 3</span>
+      <span text-gray-400>+</span>
+      <span text-purple-600>Vitesse</span>
+    </h1>
+    <Hello />
+    <Counter />
+    <div
+      text="3xl gray-500"
+      m-5
+      flex
+      justify-center
+      gap-2
+    >
+      <a i-carbon-campsite href="https://github.com/antfu/vitesse-nuxt" target="__blank" />
+      <DarkToggle />
+    </div>
+  </main>
+</template>

styles/main.css

@@ -0,0 +1,12 @@
+html,
+body,
+#app {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

windi.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'windicss/helpers'
+
+export default defineConfig({
+  attributify: true,
+})