chore: comment out parcel

.eslintrc

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

.github/FUNDING.yml

@@ -1,2 +1 @@
-open_collective: antfu
+github: antfu
-github: [antfu]

.github/workflows/ci.yml

@@ -1,43 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-
-  pull_request:
-    branches:
-      - main
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v7
-      - uses: pnpm/action-setup@v6
-      - uses: actions/setup-node@v7
-        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@v7
-      - uses: pnpm/action-setup@v6
-      - uses: actions/setup-node@v7
-        with:
-          node-version: lts/*
-          cache: pnpm
-
-      - name: Install
-        run: pnpm install
-
-      - name: Typecheck
-        run: pnpm run typecheck

.gitignore

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

.npmrc

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,45 +1,10 @@
 {
+  "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

@@ -1,22 +0,0 @@
-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

@@ -1,21 +1,25 @@
 <p align="center">
-<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" alt="Vitesse" width="600"/>
+<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 4
+<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-nuxt"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz" /></a>
+<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 4](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
+- 💚 [Nuxt 3](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
 
 - ⚡️ Vite - Instant HMR.
 
@@ -25,9 +29,9 @@
 
 - 🔥 The `<script setup>` syntax.
 
-- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./app/composables/user.ts](./app/composables/user.ts).
+- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia), see [./composables/user.ts](./composables/user.ts).
 
-- 📑 [Layout system](./app/layouts).
+- 📑 [Layout system](./layouts).
 
 - 📥 APIs auto importing - for Composition API, VueUse and custom composables.
 
@@ -35,7 +39,8 @@
 
 - 🦾 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
 
@@ -45,12 +50,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 4.
+- [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).
+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
 
@@ -63,18 +68,18 @@ We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https:
 
 ### Online
 
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+<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-nuxt/generate).
+[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-nuxt my-nuxt-app
+npx degit antfu/vitesse-nuxt3 my-nuxt3-app
-cd my-nuxt-app
+cd my-nuxt3-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```

app.vue

@@ -14,15 +14,14 @@ useHead({
 </template>
 
 <style>
-html,
+html, body , #__nuxt{
-body,
-#__nuxt {
   height: 100vh;
   margin: 0;
   padding: 0;
 }
 
 html.dark {
-  color-scheme: dark;
+  background: #222;
+  color: white;
 }
 </style>

app/constants/index.ts

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

app/pages/index.vue

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

components/Counter.vue

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

components/InputEntry.vue

@@ -14,8 +14,7 @@ function go() {
       id="input"
       v-model="name"
       placeholder="What's your name?"
-      type="text"
+      type="text" autocomplete="off"
-      autocomplete="off"
       p="x-4 y-2" m="t-5" w="250px"
       text="center" bg="transparent"
       border="~ rounded gray-200 dark:gray-700"
@@ -24,7 +23,7 @@ function go() {
     >
     <div>
       <button
-        text-sm btn m-3
+        m-3 text-sm btn
         :disabled="!name"
         @click="go"
       >

components/Logos.vue

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

components/PageView.vue

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

config/pwa.ts

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

constants/index.ts

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

eslint.config.js

@@ -1,12 +0,0 @@
-// @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())

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

layouts/default.vue

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

layouts/home.vue

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

netlify.toml

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

nuxt.config.ts

@@ -1,5 +1,5 @@
-import { pwa } from './app/config/pwa'
+import { pwa } from './config/pwa'
-import { appDescription } from './app/constants/index'
+import { appDescription } from './constants/index'
 
 export default defineNuxtConfig({
   modules: [
@@ -8,48 +8,24 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@nuxtjs/color-mode',
     '@vite-pwa/nuxt',
-    '@nuxt/eslint',
   ],
 
-  devtools: {
-    enabled: true,
-  },
-
-  app: {
-    head: {
-      viewport: 'width=device-width,initial-scale=1',
-      link: [
-        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
-        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
-        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
-      ],
-      meta: [
-        { 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' },
-      ],
-    },
-  },
-
-  colorMode: {
-    classSuffix: '',
-  },
-
-  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,
+    inlineSSRStyles: false,
     renderJsonPayloads: true,
-    typedPages: true,
+    // watcher: 'parcel',
   },
 
-  compatibilityDate: '2024-08-14',
+  css: [
+    '@unocss/reset/tailwind.css',
+  ],
+
+  colorMode: {
+    classSuffix: '',
+  },
 
   nitro: {
     esbuild: {
@@ -64,14 +40,25 @@ export default defineNuxtConfig({
     },
   },
 
-  eslint: {
+  app: {
-    config: {
+    head: {
-      standalone: false,
+      viewport: 'width=device-width,initial-scale=1',
-      nuxt: {
+      link: [
-        sortConfigKeys: true,
+        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
-      },
+        { rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
+        { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
+      ],
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: appDescription },
+        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+      ],
     },
   },
 
   pwa,
+
+  devtools: {
+    enabled: true,
+  },
 })

package.json

@@ -1,40 +1,34 @@
 {
-  "type": "module",
   "private": true,
-  "packageManager": "pnpm@11.22.0",
+  "packageManager": "pnpm@8.5.1",
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxi build",
-    "dev:pwa": "VITE_PLUGIN_PWA=true nuxt dev",
+    "dev": "nuxi dev",
-    "dev": "nuxt dev",
+    "dev:pwa": "VITE_PLUGIN_PWA=true nuxi dev",
-    "generate": "nuxt generate",
-    "prepare": "nuxt prepare",
-    "preview": "nuxt preview",
     "start": "node .output/server/index.mjs",
-    "start:generate": "npx serve .output/public",
+    "typecheck": "vue-tsc --noEmit",
     "lint": "eslint .",
-    "typecheck": "nuxt typecheck"
+    "postinstall": "nuxi prepare",
+    "generate": "nuxi generate",
+    "start:generate": "npx serve .output/public"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "catalog:dev",
+    "@antfu/eslint-config": "^0.38.6",
-    "@iconify-json/carbon": "catalog:icons",
+    "@iconify-json/carbon": "^1.1.16",
-    "@iconify-json/twemoji": "catalog:icons",
+    "@iconify-json/twemoji": "^1.1.11",
-    "@nuxt/devtools": "catalog:build",
+    "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
-    "@nuxt/eslint": "catalog:build",
+    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/color-mode": "catalog:build",
+    "@parcel/watcher": "^2.1.0",
-    "@pinia/nuxt": "catalog:build",
+    "@pinia/nuxt": "^0.4.11",
-    "@types/node": "catalog:dev",
+    "@unocss/eslint-config": "^0.51.13",
-    "@unocss/eslint-config": "catalog:build",
+    "@unocss/nuxt": "^0.51.13",
-    "@unocss/nuxt": "catalog:build",
+    "@vite-pwa/nuxt": "^0.0.8",
-    "@vite-pwa/nuxt": "catalog:build",
+    "@vueuse/nuxt": "^10.1.2",
-    "@vueuse/core": "catalog:frontend",
+    "consola": "^3.1.0",
-    "@vueuse/nuxt": "catalog:build",
+    "eslint": "^8.40.0",
-    "eslint": "catalog:dev",
+    "nuxt": "^3.5.0",
-    "eslint-plugin-format": "catalog:dev",
+    "pinia": "^2.1.1",
-    "nuxt": "catalog:build",
+    "typescript": "^5.0.4",
-    "pinia": "catalog:frontend",
+    "vue-tsc": "^1.6.5"
-    "typescript": "catalog:dev",
-    "unocss": "catalog:build",
-    "vue": "catalog:frontend",
-    "vue-tsc": "catalog:dev"
   }
 }

pages/hi/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const route = useRoute<'hi-id'>()
+const route = useRoute()
 const user = useUserStore()
 const name = route.params.id
 
@@ -14,7 +14,7 @@ definePageMeta({
 
 <template>
   <div>
-    <div i-twemoji:waving-hand text-4xl inline-block animate-shake-x animate-duration-5000 />
+    <div i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
     <h3 text-2xl font-500>
       Hi,
     </h3>
@@ -23,7 +23,7 @@ definePageMeta({
     </div>
 
     <template v-if="user.otherNames.length">
-      <div text-sm my-4>
+      <p my-4 text-sm>
         <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>
-      </div>
+      </p>
     </template>
 
     <Counter />
 
     <div>
       <NuxtLink
-        class="text-sm btn m-3"
+        class="m-3 text-sm btn"
         to="/"
       >
         Back

pages/index.vue

@@ -0,0 +1,23 @@
+<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

@@ -1,57 +0,0 @@
-minimumReleaseAge: 0
-shamefullyHoist: true
-shellEmulator: true
-strictPeerDependencies: false
-autoInstallPeers: false
-trustPolicy: no-downgrade
-
-packages: []
-overrides:
-  '@nuxt/devtools': 'catalog:build'
-  '@nuxt/kit': 'catalog:build'
-  chokidar: 'catalog:build'
-  nuxt: 'catalog:build'
-  rollup: 4.62.5
-  semver: 'catalog:build'
-  unplugin: 'catalog:build'
-  vite: 'catalog:build'
-  workbox-build: 7.4.0
-catalogs:
-  build:
-    '@nuxt/devtools': ^3.4.1
-    '@nuxt/eslint': ^1.17.0
-    '@nuxt/kit': ^4.5.2
-    '@nuxtjs/color-mode': ^4.0.1
-    '@pinia/nuxt': ^1.0.2
-    '@unocss/eslint-config': ^66.8.1
-    '@unocss/nuxt': ^66.8.1
-    '@vite-pwa/nuxt': ^1.1.1
-    '@vueuse/nuxt': ^14.4.0
-    chokidar: ^5.0.0
-    nuxt: ^4.5.2
-    semver: ^7.8.5
-    unocss: ^66.8.1
-    unplugin: ^3.3.0
-    vite: ^8.2.2
-  dev:
-    '@antfu/eslint-config': ^9.3.0
-    '@types/node': ^26.2.0
-    eslint: ^10.9.0
-    eslint-plugin-format: ^2.0.1
-    typescript: ^6.0.3
-    vue-tsc: ^3.3.11
-  frontend:
-    '@vueuse/core': ^14.4.0
-    pinia: ^4.0.3
-    vue: ^3.5.41
-  icons:
-    '@iconify-json/carbon': ^1.2.25
-    '@iconify-json/twemoji': ^1.2.5
-
-update:
-  ignoreDeps:
-    - typescript@7
-
-allowBuilds:
-  esbuild: true
-  unrs-resolver: true

tsconfig.json

@@ -1,9 +1,3 @@
 {
-  "references": [
+  "extends": "./.nuxt/tsconfig.json"
-    { "path": "./.nuxt/tsconfig.app.json" },
-    { "path": "./.nuxt/tsconfig.server.json" },
-    { "path": "./.nuxt/tsconfig.shared.json" },
-    { "path": "./.nuxt/tsconfig.node.json" }
-  ],
-  "files": []
 }

uno.config.ts

@@ -1,11 +1,10 @@
-import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
 import {
   defineConfig,
   presetAttributify,
   presetIcons,
   presetTypography,
+  presetUno,
   presetWebFonts,
-  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -16,7 +15,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: [
-    presetWind4(),
+    presetUno(),
     presetAttributify(),
     presetIcons({
       scale: 1.2,
@@ -28,7 +27,6 @@ export default defineConfig({
         serif: 'DM Serif Display',
         mono: 'DM Mono',
       },
-      processors: createLocalFontProcessor(),
     }),
   ],
   transformers: [