wip:

https://docs.docker.com/reference/build-checks/from-as-casing/

.eslintrc

@@ -1,6 +0,0 @@
-{
-  "extends": [
-    "@antfu",
-    "@unocss"
-  ]
-}

.github/FUNDING.yml

@@ -1 +1,2 @@
-github: antfu
+open_collective: antfu
+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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules
 *.log
 dist
@@ -5,3 +6,5 @@ dist
 .nuxt
 .env
 .idea/
+public/assets/fonts
+.rolldown

.npmrc

@@ -1,3 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
 shell-emulator=true
+auto-install-peers=false

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "antfu.goto-alias",
     "csstools.postcss",
     "dbaeumer.vscode-eslint",
-    "vue.volar"
+    "vue.volar",
+    "antfu.pnpm-catalog-lens"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,45 @@
 {
-  "prettier.enable": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
   "files.associations": {
     "*.css": "postcss"
   },
-  "editor.formatOnSave": false
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // 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"
+  ],
+  "interline-translate.knownPopularWordCount": 6000,
+  "iconify.annotations": true,
+  "iconify.inplace": true
 }

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS build-stage
+
+WORKDIR /app
+RUN corepack enable
+
+COPY .npmrc package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store \
+    pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+# SSR
+FROM node:20-alpine AS production-stage
+
+WORKDIR /app
+
+COPY --from=build-stage /app/.output ./.output
+
+EXPOSE 3000
+
+CMD ["node", ".output/server/index.mjs"]

README.md

@@ -3,23 +3,19 @@
 </p>
 
 <h2 align="center">
-<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 4
 </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>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt"><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.
+- 💚 [Nuxt 4](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 
 - ⚡️ Vite - Instant HMR.
 
@@ -29,9 +25,9 @@
 
 - 🔥 The `<script setup>` syntax.
 
-- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./composables/user.ts](./composables/user.ts).
+- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./app/composables/user.ts](./app/composables/user.ts).
 
-- 📑 [Layout system](./layouts).
+- 📑 [Layout system](./app/layouts).
 
 - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
 
@@ -39,8 +35,7 @@
 
 - 🦾 TypeScript, of course.
 
-- 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto update behavior.
-
+- 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto-update behavior.
 
 ## Plugins
 
@@ -50,12 +45,12 @@
 - [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.
+- [VitePWA](https://github.com/vite-pwa/nuxt) - zero-config PWA Plugin for Nuxt 4.
 - [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 if you have it).
+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
 
@@ -68,18 +63,18 @@ We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https:
 
 ### Online
 
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt"><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).
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt/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
+npx degit antfu/vitesse-nuxt my-nuxt-app
+cd my-nuxt-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```

app/app.vue

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

app/components/Counter.vue

@@ -4,13 +4,13 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div inline-flex m="y-3">
-    <button rounded-full p-2 btn @click="dec()">
+    <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 rounded-full p-2 btn @click="inc()">
+    <button btn p-2 rounded-full @click="inc()">
       <div i-carbon-add />
     </button>
   </div>

app/components/InputEntry.vue

@@ -14,7 +14,8 @@ function go() {
       id="input"
       v-model="name"
       placeholder="What's your name?"
-      type="text" autocomplete="off"
+      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"
@@ -23,7 +24,7 @@ function go() {
     >
     <div>
       <button
-        m-3 text-sm btn
+        text-sm btn m-3
         :disabled="!name"
         @click="go"
       >

app/components/Logos.vue

@@ -1,8 +1,8 @@
 <template>
-  <div inline-flex cursor-default text-2xl font-300>
+  <div text-2xl font-300 inline-flex cursor-default>
     <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>
+      <img h-18 w-18 inline-block src="/nuxt.svg">
+      <span text-green-400 mt--2>Nuxt 4</span>
     </div>
     <div
       text="3xl gray4"
@@ -10,8 +10,8 @@
       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>
+      <img h-18 w-18 inline-block src="/vite.png">
+      <span text-purple-500 mt--2>Vitesse</span>
     </div>
   </div>
 </template>

app/components/PageView.vue

@@ -6,7 +6,7 @@ const time = useTimeAgo(() => data.value?.startAt || 0)
 
 <template>
   <div text-gray:80>
-    <span font-500 text-gray>{{ data?.pageview }}</span>
+    <span text-gray font-500>{{ data?.pageview }}</span>
     page views since
     <span text-gray>{{ time }}</span>
   </div>

app/config/pwa.ts

@@ -1,4 +1,5 @@
 import type { ModuleOptions } from '@vite-pwa/nuxt'
+import process from 'node:process'
 import { appDescription, appName } from '../constants/index'
 
 const scope = '/'

app/constants/index.ts

@@ -0,0 +1,2 @@
+export const appName = 'Vitesse for Nuxt 4'
+export const appDescription = 'Vitesse for Nuxt 4'

app/layouts/README.md

@@ -4,7 +4,7 @@ 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
+```vue
 <script setup lang="ts">
 definePageMeta({
   layout: 'home',

app/layouts/default.vue

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

app/layouts/home.vue

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

app/pages/hi/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const route = useRoute()
+const route = useRoute<'hi-id'>()
 const user = useUserStore()
 const name = route.params.id
 
@@ -14,7 +14,7 @@ definePageMeta({
 
 <template>
   <div>
-    <div i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
+    <div i-twemoji:waving-hand text-4xl inline-block animate-shake-x animate-duration-5000 />
     <h3 text-2xl font-500>
       Hi,
     </h3>
@@ -23,7 +23,7 @@ definePageMeta({
     </div>
 
     <template v-if="user.otherNames.length">
-      <p my-4 text-sm>
+      <div text-sm my-4>
         <span op-50>Also as known as:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
@@ -32,14 +32,14 @@ definePageMeta({
             </router-link>
           </li>
         </ul>
-      </p>
+      </div>
     </template>
 
     <Counter />
 
     <div>
       <NuxtLink
-        class="m-3 text-sm btn"
+        class="text-sm btn m-3"
         to="/"
       >
         Back

app/pages/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+
+<template>
+  <div>
+    <h1 text-xl>
+      Demo App
+    </h1>
+    <InputEntry />
+  </div>
+</template>

constants/index.ts

@@ -1,2 +0,0 @@
-export const appName = 'Vitesse for Nuxt 3'
-export const appDescription = 'Vitesse for Nuxt 3'

eslint.config.js

@@ -0,0 +1,12 @@
+// @ts-check
+import antfu from '@antfu/eslint-config'
+import nuxt from './.nuxt/eslint.config.mjs'
+
+export default antfu(
+  {
+    unocss: true,
+    formatters: true,
+    pnpm: true,
+  },
+)
+  .append(nuxt())

modules/vite.ts

@@ -0,0 +1,39 @@
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import { DevTools } from '@vitejs/devtools'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'vite',
+  },
+  setup() {
+    addVitePlugin(DevTools())
+    addVitePlugin({
+      name: 'nuxt:devtools',
+      devtools: {
+        setup(ctx) {
+          ctx.docks.register({
+            id: 'vitest',
+            type: 'iframe',
+            icon: 'https://vitest.dev/logo.svg',
+            title: 'Vitest',
+            url: 'http://localhost:51204/__vitest__/#/',
+          })
+          ctx.docks.register({
+            id: 'nuxt',
+            type: 'iframe',
+            icon: 'https://nuxt.com/assets/design-kit/icon-green.svg',
+            title: 'Nuxt',
+            url: '/__nuxt_devtools__/client/',
+          })
+          ctx.docks.register({
+            id: 'unocss',
+            type: 'iframe',
+            icon: 'https://unocss.dev/logo.svg',
+            title: 'Vitest',
+            url: '/__unocss',
+          })
+        },
+      },
+    })
+  },
+})

netlify.toml

@@ -1,11 +1,11 @@
-[build.environment]
-  NODE_VERSION = "16"
-
 [build]
-  publish = "dist"
-  command = "pnpm run build"
+publish = "dist"
+command = "pnpm run build"
+
+[build.environment]
+NODE_VERSION = "20"
 
 [[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
+from = "/*"
+to = "/index.html"
+status = 200

nuxt.config.ts

@@ -1,5 +1,4 @@
-import { pwa } from './config/pwa'
-import { appDescription } from './constants/index'
+import { appDescription } from './app/constants/index'
 
 export default defineNuxtConfig({
   modules: [
@@ -7,36 +6,11 @@ export default defineNuxtConfig({
     '@unocss/nuxt',
     '@pinia/nuxt',
     '@nuxtjs/color-mode',
-    '@vite-pwa/nuxt',
+    '@nuxt/eslint',
   ],
 
-  experimental: {
-    // when using generate, payload js assets included in sw precache manifest
-    // but missing on offline, disabling extraction it until fixed
-    payloadExtraction: false,
-    inlineSSRStyles: false,
-    renderJsonPayloads: true,
-  },
-
-  css: [
-    '@unocss/reset/tailwind.css',
-  ],
-
-  colorMode: {
-    classSuffix: '',
-  },
-
-  nitro: {
-    esbuild: {
-      options: {
-        target: 'esnext',
-      },
-    },
-    prerender: {
-      crawlLinks: false,
-      routes: ['/'],
-      ignore: ['/hi'],
-    },
+  devtools: {
+    enabled: true,
   },
 
   app: {
@@ -51,13 +25,52 @@ export default defineNuxtConfig({
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         { name: 'description', content: appDescription },
         { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+        { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
+        { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
       ],
     },
   },
 
-  pwa,
+  colorMode: {
+    classSuffix: '',
+  },
 
-  devtools: {
-    enabled: true,
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  experimental: {
+    // when using generate, payload js assets included in sw precache manifest
+    // but missing on offline, disabling extraction it until fixed
+    payloadExtraction: false,
+    renderJsonPayloads: true,
+    typedPages: true,
+  },
+
+  compatibilityDate: '2024-08-14',
+
+  nitro: {
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+  },
+
+  vite: {
+    build: {
+      rollupOptions: {
+        debug: {},
+      },
+    },
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+      nuxt: {
+        sortConfigKeys: true,
+      },
+    },
   },
 })

package.json

@@ -1,33 +1,52 @@
 {
+  "type": "module",
   "private": true,
-  "packageManager": "pnpm@8.5.1",
+  "packageManager": "pnpm@10.17.1",
   "scripts": {
-    "build": "nuxi build",
-    "dev": "nuxi dev",
-    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
+    "build": "nuxt build",
+    "dev:pwa": "VITE_PLUGIN_PWA=true nuxt dev",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "prepare": "nuxt prepare",
+    "preview": "nuxt preview",
     "start": "node .output/server/index.mjs",
-    "typecheck": "vue-tsc --noEmit",
+    "start:generate": "npx serve .output/public",
     "lint": "eslint .",
-    "postinstall": "nuxi prepare",
-    "generate": "nuxi generate",
-    "start:generate": "npx serve .output/public"
+    "test": "vitest",
+    "typecheck": "nuxt typecheck"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.6",
-    "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/twemoji": "^1.1.11",
-    "@nuxt/devtools": "^0.4.6",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@pinia/nuxt": "^0.4.11",
-    "@unocss/eslint-config": "^0.51.13",
-    "@unocss/nuxt": "^0.51.13",
-    "@vite-pwa/nuxt": "^0.0.8",
-    "@vueuse/nuxt": "^10.1.2",
-    "vue-tsc": "^1.6.5",
-    "consola": "^3.1.0",
-    "eslint": "^8.40.0",
-    "nuxt": "^3.5.0",
-    "pinia": "^2.1.1",
-    "typescript": "^5.0.4"
+    "@antfu/eslint-config": "catalog:dev",
+    "@iconify-json/carbon": "catalog:icons",
+    "@iconify-json/twemoji": "catalog:icons",
+    "@nuxt/devtools": "catalog:build",
+    "@nuxt/eslint": "catalog:build",
+    "@nuxt/kit": "catalog:build",
+    "@nuxtjs/color-mode": "catalog:build",
+    "@pinia/nuxt": "catalog:build",
+    "@pnpm/logger": "catalog:",
+    "@unocss/eslint-config": "catalog:build",
+    "@unocss/nuxt": "catalog:build",
+    "@vite-pwa/nuxt": "catalog:build",
+    "@vitejs/devtools": "catalog:",
+    "@vitest/ui": "catalog:",
+    "@vueuse/core": "catalog:frontend",
+    "@vueuse/nuxt": "catalog:build",
+    "eslint": "catalog:dev",
+    "eslint-plugin-format": "catalog:dev",
+    "nuxt": "catalog:build",
+    "pinia": "catalog:frontend",
+    "typescript": "catalog:dev",
+    "unocss": "catalog:build",
+    "vitest": "catalog:",
+    "vue": "catalog:frontend",
+    "vue-tsc": "catalog:dev"
+  },
+  "resolutions": {
+    "@nuxt/devtools": "catalog:build",
+    "@nuxt/kit": "catalog:build",
+    "nuxt": "catalog:build",
+    "unplugin": "catalog:build",
+    "vite": "catalog:build"
   }
 }

pages/index.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const online = useOnline()
-</script>
-
-<template>
-  <div>
-    <Logos mb-6 />
-    <Suspense>
-      <ClientOnly>
-        <PageView v-if="online" />
-        <div v-else text-gray:80>
-          You're offline
-        </div>
-      </ClientOnly>
-      <template #fallback>
-        <div italic op50>
-          <span animate-pulse>Loading...</span>
-        </div>
-      </template>
-    </Suspense>
-    <InputEntry />
-  </div>
-</template>

pnpm-workspace.yaml

@@ -0,0 +1,41 @@
+packages: []
+
+catalog:
+  '@pnpm/logger': ^1001.0.0
+  '@vitejs/devtools': 0.0.0-alpha.6
+  '@vitest/ui': ^3.2.4
+  vitest: ^3.2.4
+
+catalogs:
+  build:
+    '@nuxt/devtools': ^2.6.5
+    '@nuxt/eslint': ^1.9.0
+    '@nuxt/kit': ^4.1.2
+    '@nuxtjs/color-mode': ^3.5.2
+    '@pinia/nuxt': ^0.11.2
+    '@unocss/eslint-config': ^66.5.2
+    '@unocss/nuxt': ^66.5.2
+    '@vite-pwa/nuxt': ^1.0.4
+    '@vueuse/nuxt': ^13.9.0
+    nuxt: ^4.1.2
+    unocss: ^66.5.2
+    unplugin: ^2.3.10
+    vite: npm:rolldown-vite@^7.1.14
+  dev:
+    '@antfu/eslint-config': ^5.4.1
+    eslint: ^9.36.0
+    eslint-plugin-format: ^1.0.2
+    typescript: ^5.9.3
+    vue-tsc: ^3.1.0
+  frontend:
+    '@vueuse/core': ^13.9.0
+    pinia: ^3.0.3
+    vue: ^3.5.22
+  icons:
+    '@iconify-json/carbon': ^1.2.13
+    '@iconify-json/twemoji': ^1.2.4
+
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - unrs-resolver

uno.config.ts

@@ -1,10 +1,11 @@
+import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
 import {
   defineConfig,
   presetAttributify,
   presetIcons,
   presetTypography,
-  presetUno,
   presetWebFonts,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -15,7 +16,7 @@ export default defineConfig({
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
   ],
   presets: [
-    presetUno(),
+    presetWind4(),
     presetAttributify(),
     presetIcons({
       scale: 1.2,
@@ -27,6 +28,7 @@ export default defineConfig({
         serif: 'DM Serif Display',
         mono: 'DM Mono',
       },
+      processors: createLocalFontProcessor(),
     }),
   ],
   transformers: [