docs: add license section to readme

2023-02-06 11:46:28 +01:00
27 changed files with 2757 additions and 3529 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,48 +0,0 @@
-kind: pipeline
-type: docker
-name: ci
-
-steps:
-  - name: install & build # 流水线名称
-    image: node # 定义创建容器的Docker镜像
-    commands: # 定义在Docker容器中执行的shell命令
-      - npm config set registry http://mirrors.cloud.tencent.com/npm/
-      - npm i -g pnpm
-      - pnpm i
-      - pnpm run build
-
-  - name: upload
-    image: appleboy/drone-scp # 上传插件
-    settings:
-      host:
-        from_secret: host # 作为环境变量传进来
-      username:
-        from_secret: username
-      password:
-        from_secret: password
-      port: 22
-      command_timeout: 2m
-      target: /home/hxx/app/NginxProxyManager/data/access/myIndex/${DRONE_REPO_NAME}_new # 这里的${DRONE_REPO_NAME}是vitesse
-      source:
-        - ./dist # 相对路径, 绝对路径是/app/dist
-
-  - name: deploy # 部署
-    image: appleboy/drone-ssh # ssh插件
-    settings:
-        host:
-            from_secret: host
-        username:
-            from_secret: username
-        password:
-            from_secret: password
-        port: 22
-        command_timeout: 2m
-        envs: [DEPLOY_PATH] # 给 script 用
-        script:
-            - cd /home/hxx/app/NginxProxyManager/data/access/myIndex/
-            - rm -rf vitesse_old
-            - mv vitesse vitesse_old
-            - mv vitesse_new vitesse
-            - cd vitesse
-            - mv ./dist/* ./
-            - rm -rf ./dist
--- a/.eslintrc
+++ b/.eslintrc
@ -1,6 +1,3 @@
 {
-  "extends": [
-    "@antfu",
-    "@unocss"
-  ]
+  "extends": "@antfu"
 }
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -47,7 +47,7 @@ jobs:

    strategy:
      matrix:
-        node-version: [16.x, 18.x]
+        node-version: [14.x, 16.x]
        os: [ubuntu-latest]
      fail-fast: false

--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2020-PRESENT Anthony Fu
+Copyright (c) 2020-2021 Anthony Fu

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -48,14 +48,14 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>

 - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)

+- 🤙🏻 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled
+
 - 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly

 - 🖨 Static-site generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)

 - 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters)

- 🔤 [Webfont self-hosting](https://github.com/feat-agency/vite-plugin-webfont-dl)
-
 - 🦾 TypeScript, of course

 - ⚙️ Unit Testing with [Vitest](https://github.com/vitest-dev/vitest), E2E Testing with [Cypress](https://cypress.io/) on [GitHub Actions](https://github.com/features/actions)
@ -95,7 +95,6 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [`vite-ssg-sitemap`](https://github.com/jbaubree/vite-ssg-sitemap) - Sitemap generator
 - [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively
 - [`vite-plugin-vue-inspector`](https://github.com/webfansplz/vite-plugin-vue-inspector) - jump to local IDE source code while click the element of browser automatically
- [`vite-plugin-webfont-dl`](https://github.com/feat-agency/vite-plugin-webfont-dl) - Zero-config webfont (Google Fonts) downloader and injector to improve website's performance.

 ### Coding Style

@ -215,3 +214,7 @@ docker run --rm -it -p 8080:80 vitesse:latest
 I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.

 So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintain your own forks. [(see community maintained variation forks)](#variations)
+
+## 📄 License
+
+MIT License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -45,6 +45,8 @@

 - 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)

+- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html)
+
 - 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入

 - 🖨 使用 [vite-ssg](https://github.com/antfu/vite-ssg) 进行服务端生成 (SSG)
--- a/cypress.config.ts
+++ b/cypress.config.ts
@ -1,5 +1,4 @@
 import { defineConfig } from 'cypress'
-import vitePreprocessor from 'cypress-vite'

 export default defineConfig({
  e2e: {
@ -7,8 +6,5 @@ export default defineConfig({
    chromeWebSecurity: false,
    specPattern: 'cypress/e2e/**/*.spec.*',
    supportFile: false,
-    setupNodeEvents(on) {
-      on('file:preprocessor', vitePreprocessor())
-    },
  },
 })
--- a/index.html
+++ b/index.html
@ -18,6 +18,5 @@
 <body class="font-sans">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
-  <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
 </body>
 </html>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "type": "module",
  "private": true,
-  "packageManager": "pnpm@8.3.0",
+  "packageManager": "pnpm@7.17.1",
  "scripts": {
    "build": "vite-ssg build",
    "dev": "vite --port 3333 --open",
@ -12,69 +12,55 @@
    "test:e2e": "cypress open",
    "test:unit": "vitest",
    "typecheck": "vue-tsc --noEmit",
-    "up": "taze major -I",
-    "postinstall": "npx simple-git-hooks",
-    "sizecheck": "npx vite-bundle-visualizer"
+    "up": "taze major -I"
  },
  "dependencies": {
-    "@unocss/reset": "^0.51.4",
-    "@vueuse/core": "^10.0.2",
-    "@vueuse/head": "^1.1.26",
+    "@unocss/reset": "^0.48.4",
+    "@vueuse/core": "^9.11.0",
+    "@vueuse/head": "^1.0.22",
    "nprogress": "^0.2.0",
-    "pinia": "^2.0.34",
-    "vue": "^3.2.47",
-    "vue-demi": "^0.14.0",
+    "pinia": "^2.0.29",
+    "vue": "^3.2.45",
+    "vue-demi": "^0.13.11",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^0.38.5",
-    "@iconify-json/carbon": "^1.1.16",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@antfu/eslint-config": "^0.34.1",
+    "@iconify-json/carbon": "^1.1.13",
+    "@intlify/unplugin-vue-i18n": "^0.8.1",
    "@types/markdown-it-link-attributes": "^3.0.1",
    "@types/nprogress": "^0.2.0",
-    "@unocss/eslint-config": "^0.51.4",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue-macros/volar": "^0.9.5",
-    "@vue/test-utils": "^2.3.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue-macros/volar": "^0.5.15",
+    "@vue/test-utils": "^2.2.7",
    "critters": "^0.0.16",
    "cross-env": "^7.0.3",
-    "cypress": "^12.10.0",
-    "cypress-vite": "^1.3.2",
-    "eslint": "^8.38.0",
-    "eslint-plugin-cypress": "^2.13.2",
+    "cypress": "^12.3.0",
+    "eslint": "^8.32.0",
+    "eslint-plugin-cypress": "^2.12.1",
    "https-localhost": "^4.7.1",
-    "lint-staged": "^13.2.1",
    "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-shiki": "^0.8.1",
-    "pnpm": "^8.3.0",
-    "shiki": "^0.14.1",
-    "simple-git-hooks": "^2.8.1",
-    "taze": "^0.9.1",
-    "typescript": "^5.0.4",
-    "unocss": "^0.51.4",
-    "unplugin-auto-import": "^0.15.3",
-    "unplugin-vue-components": "^0.24.1",
-    "unplugin-vue-macros": "^2.0.0",
-    "vite": "^4.2.2",
-    "vite-bundle-visualizer": "^0.6.0",
-    "vite-plugin-inspect": "^0.7.22",
-    "vite-plugin-pages": "^0.29.0",
-    "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-vue-component-preview": "^1.1.6",
-    "vite-plugin-vue-inspector": "^3.4.0",
-    "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-vue-markdown": "^0.22.6",
-    "vite-plugin-webfont-dl": "^3.7.3",
-    "vite-ssg": "^0.22.2",
+    "markdown-it-shiki": "^0.7.2",
+    "pnpm": "^7.25.1",
+    "shiki": "^0.12.1",
+    "taze": "^0.8.5",
+    "typescript": "^4.9.4",
+    "unocss": "^0.48.4",
+    "unplugin-auto-import": "^0.12.1",
+    "unplugin-vue-components": "^0.22.12",
+    "unplugin-vue-macros": "^1.4.2",
+    "vite": "^4.0.4",
+    "vite-plugin-inspect": "^0.7.14",
+    "vite-plugin-pages": "^0.28.0",
+    "vite-plugin-pwa": "^0.14.1",
+    "vite-plugin-vue-component-preview": "^0.3.4",
+    "vite-plugin-vue-inspector": "^3.2.1",
+    "vite-plugin-vue-layouts": "^0.7.0",
+    "vite-plugin-vue-markdown": "^0.22.2",
+    "vite-ssg": "^0.22.1",
    "vite-ssg-sitemap": "^0.4.3",
-    "vitest": "^0.30.1",
-    "vue-tsc": "^1.2.0"
-  },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
+    "vitest": "^0.27.2",
+    "vue-tsc": "^1.0.24"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -8,14 +8,14 @@ useHead({
    { name: 'description', content: 'Opinionated Vite Starter Template' },
    {
      name: 'theme-color',
-      content: () => isDark.value ? '#00aba9' : '#ffffff',
+      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
-      href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
+      href: computed(() => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg'),
    },
  ],
 })
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@ -1,9 +1,13 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-auto-import
+// Generated by 'unplugin-auto-import'
 export {}
 declare global {
+  const $$: typeof import('vue/macros')['$$']
+  const $: typeof import('vue/macros')['$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
  const EffectScope: typeof import('vue')['EffectScope']
  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@ -19,9 +23,7 @@ declare global {
  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
  const customRef: typeof import('vue')['customRef']
  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@ -81,6 +83,7 @@ declare global {
  const refThrottled: typeof import('@vueuse/core')['refThrottled']
  const refWithControl: typeof import('@vueuse/core')['refWithControl']
  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
  const resolveRef: typeof import('@vueuse/core')['resolveRef']
  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
  const shallowReactive: typeof import('vue')['shallowReactive']
@ -106,19 +109,14 @@ declare global {
  const unrefElement: typeof import('@vueuse/core')['unrefElement']
  const until: typeof import('@vueuse/core')['until']
  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAnimate: typeof import('@vueuse/core')['useAnimate']
-  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
-  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
  const useArraySome: typeof import('@vueuse/core')['useArraySome']
-  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
  const useAttrs: typeof import('vue')['useAttrs']
@ -202,18 +200,14 @@ declare global {
  const useOnline: typeof import('@vueuse/core')['useOnline']
  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const useParentElement: typeof import('@vueuse/core')['useParentElement']
-  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
  const usePermission: typeof import('@vueuse/core')['usePermission']
  const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
-  const usePrevious: typeof import('@vueuse/core')['usePrevious']
  const useRafFn: typeof import('@vueuse/core')['useRafFn']
  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@ -224,7 +218,6 @@ declare global {
  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
  const useScroll: typeof import('@vueuse/core')['useScroll']
  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
  const useShare: typeof import('@vueuse/core')['useShare']
  const useSlots: typeof import('vue')['useSlots']
@ -273,10 +266,8 @@ declare global {
  const watchArray: typeof import('@vueuse/core')['watchArray']
  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
-  const watchDeep: typeof import('@vueuse/core')['watchDeep']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
-  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
  const watchOnce: typeof import('@vueuse/core')['watchOnce']
  const watchPausable: typeof import('@vueuse/core')['watchPausable']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
@ -286,15 +277,17 @@ declare global {
  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
  const whenever: typeof import('@vueuse/core')['whenever']
 }
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
-}
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
  interface ComponentCustomProperties {
+    readonly $$: UnwrapRef<typeof import('vue/macros')['$$']>
+    readonly $: UnwrapRef<typeof import('vue/macros')['$']>
+    readonly $computed: UnwrapRef<typeof import('vue/macros')['$computed']>
+    readonly $customRef: UnwrapRef<typeof import('vue/macros')['$customRef']>
+    readonly $ref: UnwrapRef<typeof import('vue/macros')['$ref']>
+    readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
+    readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
@ -310,9 +303,7 @@ declare module 'vue' {
    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
-    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
-    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@ -372,6 +363,7 @@ declare module 'vue' {
    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveDirective: UnwrapRef<typeof import('vue')['resolveDirective']>
    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
@ -397,19 +389,14 @@ declare module 'vue' {
    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
-    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
-    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
-    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
-    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
@ -493,18 +480,14 @@ declare module 'vue' {
    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
-    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
-    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
-    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
-    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
@ -515,7 +498,6 @@ declare module 'vue' {
    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
-    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
@ -564,10 +546,8 @@ declare module 'vue' {
    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
-    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
-    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
--- a/src/components.d.ts
+++ b/src/components.d.ts
@ -1,7 +1,5 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'

--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@ -1,36 +1,32 @@
 <script setup lang="ts">
-import { availableLocales, loadLanguageAsync } from '~/modules/i18n'
+const { t, availableLocales, locale } = useI18n()

-const { t, locale } = useI18n()
-
-async function toggleLocales() {
+const toggleLocales = () => {
  // change to some real logic
  const locales = availableLocales
-  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
-  await loadLanguageAsync(newLocale)
-  locale.value = newLocale
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
 }
 </script>

 <template>
-  <nav flex="~ gap-4" mt-6 justify-center text-xl>
-    <RouterLink icon-btn to="/" :title="t('button.home')">
+  <nav text-xl mt-6>
+    <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
      <div i-carbon-campsite />
    </RouterLink>

-    <button icon-btn :title="t('button.toggle_dark')" @click="toggleDark()">
+    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
      <div i="carbon-sun dark:carbon-moon" />
    </button>

-    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
+    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
      <div i-carbon-language />
    </a>

-    <RouterLink icon-btn to="/about" :title="t('button.about')">
+    <RouterLink class="icon-btn mx-2" to="/about" :title="t('button.about')">
      <div i-carbon-dicom-overlay />
    </RouterLink>

-    <a icon-btn rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
      <div i-carbon-logo-github />
    </a>
  </nav>
--- a/src/components/TheInput.vue
+++ b/src/components/TheInput.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { modelValue } = defineModels<{
+const { modelValue } = defineModel<{
  modelValue: string
 }>()
 </script>
--- a/src/layouts/404.vue
+++ b/src/layouts/404.vue
@ -10,7 +10,7 @@ const { t } = useI18n()
    </div>
    <RouterView />
    <div>
-      <button text-sm btn m="3 t8" @click="router.back()">
+      <button btn text-sm m="3 t8" @click="router.back()">
        {{ t('button.back') }}
      </button>
    </div>
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@ -1,11 +1,8 @@
 <template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <RouterView />
    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
      [Default Layout]
    </div>
  </main>
--- a/src/layouts/home.vue
+++ b/src/layouts/home.vue
@ -1,11 +1,8 @@
 <template>
-  <main
-    px-4 py-10
-    text="center gray-700 dark:gray-200"
-  >
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <RouterView />
    <TheFooter />
-    <div mx-auto mt-5 text-center text-sm opacity-50>
+    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
      [Home Layout]
    </div>
  </main>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,6 @@
 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
-
-// import Previewer from 'virtual:vue-component-preview'
+import Previewer from 'virtual:vue-component-preview'
 import App from './App.vue'
 import type { UserModule } from './types'
 import generatedRoutes from '~pages'
@ -20,6 +19,6 @@ export const createApp = ViteSSG(
    // install all modules under `modules/`
    Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
      .forEach(i => i.install?.(ctx))
-    // ctx.app.use(Previewer)
+    ctx.app.use(Previewer)
  },
 )
--- a/src/modules/i18n.ts
+++ b/src/modules/i18n.ts
@ -1,4 +1,3 @@
-import type { Locale } from 'vue-i18n'
 import { createI18n } from 'vue-i18n'
 import { type UserModule } from '~/types'

@ -6,45 +5,21 @@ import { type UserModule } from '~/types'
 // https://vitejs.dev/guide/features.html#glob-import
 //
 // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
-const i18n = createI18n({
-  legacy: false,
-  locale: '',
-  messages: {},
-})
-
-const localesMap = Object.fromEntries(
-  Object.entries(import.meta.glob('../../locales/*.yml'))
-    .map(([path, loadLocale]) => [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]),
-) as Record<Locale, () => Promise<{ default: Record<string, string> }>>
-
-export const availableLocales = Object.keys(localesMap)
-
-const loadedLanguages: string[] = []
-
-function setI18nLanguage(lang: Locale) {
-  i18n.global.locale.value = lang as any
-  if (typeof document !== 'undefined')
-    document.querySelector('html')?.setAttribute('lang', lang)
-  return lang
-}
-
-export async function loadLanguageAsync(lang: string): Promise<Locale> {
-  // If the same language
-  if (i18n.global.locale.value === lang)
-    return setI18nLanguage(lang)
-
-  // If the language was already loaded
-  if (loadedLanguages.includes(lang))
-    return setI18nLanguage(lang)
-
-  // If the language hasn't been loaded yet
-  const messages = await localesMap[lang]()
-  i18n.global.setLocaleMessage(lang, messages.default)
-  loadedLanguages.push(lang)
-  return setI18nLanguage(lang)
-}
+const messages = Object.fromEntries(
+  Object.entries(
+    import.meta.glob<{ default: any }>('../../locales/*.y(a)?ml', { eager: true }))
+    .map(([key, value]) => {
+      const yaml = key.endsWith('.yaml')
+      return [key.slice(14, yaml ? -5 : -4), value.default]
+    }),
+)

 export const install: UserModule = ({ app }) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages,
+  })
+
  app.use(i18n)
-  loadLanguageAsync('en')
 }
--- a/src/pages/hi/[name].vue
+++ b/src/pages/hi/[name].vue
@ -23,7 +23,7 @@ watchEffect(() => {
    </p>

    <template v-if="user.otherNames.length">
-      <p mt-4 text-sm>
+      <p text-sm mt-4>
        <span opacity-75>{{ t('intro.aka') }}:</span>
        <ul>
          <li v-for="otherName in user.otherNames" :key="otherName">
@ -37,7 +37,7 @@ watchEffect(() => {

    <div>
      <button
-        m="3 t6" text-sm btn
+        btn m="3 t6" text-sm
        @click="router.back()"
      >
        {{ t('button.back') }}
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -3,12 +3,12 @@ defineOptions({
  name: 'IndexPage',
 })
 const user = useUserStore()
-const name = ref(user.savedName)
+const name = $ref(user.savedName)

 const router = useRouter()
-function go() {
-  if (name.value)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
+const go = () => {
+  if (name)
+    router.push(`/hi/${encodeURIComponent(name)}`)
 }

 const { t } = useI18n()
@ -40,7 +40,7 @@ const { t } = useI18n()

    <div>
      <button
-        m-3 text-sm btn
+        btn m-3 text-sm
        :disabled="!name"
        @click="go"
      >
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@ -31,4 +31,4 @@ export const useUserStore = defineStore('user', () => {
 })

 if (import.meta.hot)
-  import.meta.hot.accept(acceptHMRUpdate(useUserStore as any, import.meta.hot))
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
--- a/test/snapshots/component.test.ts.snap
+++ b/test/snapshots/component.test.ts.snap
@ -1,3 +1,3 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Vitest Snapshot v1

 exports[`TheCounter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -30,7 +30,7 @@
  },
  "vueCompilerOptions": {
    "plugins": [
-      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-model",
      "@vue-macros/volar/define-slots"
    ]
  },
--- a/unocss.config.ts
+++ b/unocss.config.ts
@ -11,7 +11,7 @@ import {

 export default defineConfig({
  shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
@ -34,5 +34,5 @@ export default defineConfig({
    transformerDirectives(),
    transformerVariantGroup(),
  ],
-  safelist: 'prose m-auto text-left'.split(' '),
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
 })
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,5 +1,6 @@
-import path from 'node:path'
+import path from 'path'
 import { defineConfig } from 'vite'
+import Preview from 'vite-plugin-vue-component-preview'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import generateSitemap from 'vite-ssg-sitemap'
@ -14,10 +15,7 @@ import Inspector from 'vite-plugin-vue-inspector'
 import LinkAttributes from 'markdown-it-link-attributes'
 import Unocss from 'unocss/vite'
 import Shiki from 'markdown-it-shiki'
-
-// @ts-expect-error failed to resolve types
 import VueMacros from 'unplugin-vue-macros/vite'
-import WebfontDownload from 'vite-plugin-webfont-dl'

 export default defineConfig({
  resolve: {
@ -27,10 +25,13 @@ export default defineConfig({
  },

  plugins: [
+    Preview(),
+
    VueMacros({
      plugins: {
        vue: Vue({
          include: [/\.vue$/, /\.md$/],
+          reactivityTransform: true,
        }),
      },
    }),
@ -49,6 +50,7 @@ export default defineConfig({
        'vue',
        'vue-router',
        'vue-i18n',
+        'vue/macros',
        '@vueuse/head',
        '@vueuse/core',
      ],
@ -141,9 +143,6 @@ export default defineConfig({
    Inspector({
      toggleButtonVisibility: 'never',
    }),
-
-    // https://github.com/feat-agency/vite-plugin-webfont-dl
-    WebfontDownload(),
  ],

  // https://github.com/vitest-dev/vitest
@ -159,9 +158,6 @@ export default defineConfig({
  ssgOptions: {
    script: 'async',
    formatting: 'minify',
-    crittersOptions: {
-      reduceInlineStyles: false,
-    },
    onFinished() { generateSitemap() },
  },