docs: add license section to readme

.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

.eslintrc

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

.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
 

LICENSE

@@ -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

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)

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)

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())
-    },
   },
 })

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>

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",
+    "up": "taze major -I"
-    "postinstall": "npx simple-git-hooks",
-    "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
-    "@unocss/reset": "^0.51.4",
+    "@unocss/reset": "^0.48.4",
-    "@vueuse/core": "^10.0.2",
+    "@vueuse/core": "^9.11.0",
-    "@vueuse/head": "^1.1.26",
+    "@vueuse/head": "^1.0.22",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.34",
+    "pinia": "^2.0.29",
-    "vue": "^3.2.47",
+    "vue": "^3.2.45",
-    "vue-demi": "^0.14.0",
+    "vue-demi": "^0.13.11",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.5",
+    "@antfu/eslint-config": "^0.34.1",
-    "@iconify-json/carbon": "^1.1.16",
+    "@iconify-json/carbon": "^1.1.13",
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
+    "@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.0.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vue-macros/volar": "^0.5.15",
-    "@vue-macros/volar": "^0.9.5",
+    "@vue/test-utils": "^2.2.7",
-    "@vue/test-utils": "^2.3.2",
     "critters": "^0.0.16",
     "cross-env": "^7.0.3",
-    "cypress": "^12.10.0",
+    "cypress": "^12.3.0",
-    "cypress-vite": "^1.3.2",
+    "eslint": "^8.32.0",
-    "eslint": "^8.38.0",
+    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-cypress": "^2.13.2",
     "https-localhost": "^4.7.1",
-    "lint-staged": "^13.2.1",
     "markdown-it-link-attributes": "^4.0.1",
-    "markdown-it-shiki": "^0.8.1",
+    "markdown-it-shiki": "^0.7.2",
-    "pnpm": "^8.3.0",
+    "pnpm": "^7.25.1",
-    "shiki": "^0.14.1",
+    "shiki": "^0.12.1",
-    "simple-git-hooks": "^2.8.1",
+    "taze": "^0.8.5",
-    "taze": "^0.9.1",
+    "typescript": "^4.9.4",
-    "typescript": "^5.0.4",
+    "unocss": "^0.48.4",
-    "unocss": "^0.51.4",
+    "unplugin-auto-import": "^0.12.1",
-    "unplugin-auto-import": "^0.15.3",
+    "unplugin-vue-components": "^0.22.12",
-    "unplugin-vue-components": "^0.24.1",
+    "unplugin-vue-macros": "^1.4.2",
-    "unplugin-vue-macros": "^2.0.0",
+    "vite": "^4.0.4",
-    "vite": "^4.2.2",
+    "vite-plugin-inspect": "^0.7.14",
-    "vite-bundle-visualizer": "^0.6.0",
+    "vite-plugin-pages": "^0.28.0",
-    "vite-plugin-inspect": "^0.7.22",
+    "vite-plugin-pwa": "^0.14.1",
-    "vite-plugin-pages": "^0.29.0",
+    "vite-plugin-vue-component-preview": "^0.3.4",
-    "vite-plugin-pwa": "^0.14.7",
+    "vite-plugin-vue-inspector": "^3.2.1",
-    "vite-plugin-vue-component-preview": "^1.1.6",
+    "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-plugin-vue-inspector": "^3.4.0",
+    "vite-plugin-vue-markdown": "^0.22.2",
-    "vite-plugin-vue-layouts": "^0.8.0",
+    "vite-ssg": "^0.22.1",
-    "vite-plugin-vue-markdown": "^0.22.6",
-    "vite-plugin-webfont-dl": "^3.7.3",
-    "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.4.3",
-    "vitest": "^0.30.1",
+    "vitest": "^0.27.2",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.0.24"
-  },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
   }
 }

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'),
     },
   ],
 })

src/auto-imports.d.ts

@@ -1,9 +1,13 @@
-/* eslint-disable */
+// Generated by 'unplugin-auto-import'
-/* prettier-ignore */
-// @ts-nocheck
-// 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']>

src/components.d.ts

@@ -1,7 +1,5 @@
-/* eslint-disable */
+// generated by unplugin-vue-components
-/* prettier-ignore */
+// We suggest you to commit this file into source control
-// @ts-nocheck
-// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 

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()
+const toggleLocales = () => {
-
-async function toggleLocales() {
   // change to some real logic
   const locales = availableLocales
-  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
-  await loadLanguageAsync(newLocale)
-  locale.value = newLocale
 }
 </script>
 
 <template>
-  <nav flex="~ gap-4" mt-6 justify-center text-xl>
+  <nav text-xl mt-6>
-    <RouterLink icon-btn to="/" :title="t('button.home')">
+    <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>

src/components/TheInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { modelValue } = defineModels<{
+const { modelValue } = defineModel<{
   modelValue: string
 }>()
 </script>

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>

src/layouts/default.vue

@@ -1,11 +1,8 @@
 <template>
-  <main
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
-    px-4 py-10
-    text="center gray-700 dark: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>

src/layouts/home.vue

@@ -1,11 +1,8 @@
 <template>
-  <main
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
-    px-4 py-10
-    text="center gray-700 dark: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>

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)
   },
 )

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({
+const messages = Object.fromEntries(
-  legacy: false,
+  Object.entries(
-  locale: '',
+    import.meta.glob<{ default: any }>('../../locales/*.y(a)?ml', { eager: true }))
-  messages: {},
+    .map(([key, value]) => {
-})
+      const yaml = key.endsWith('.yaml')
-
+      return [key.slice(14, yaml ? -5 : -4), value.default]
-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)
-}
 
 export const install: UserModule = ({ app }) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages,
+  })
+
   app.use(i18n)
-  loadLanguageAsync('en')
 }

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') }}

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() {
+const go = () => {
-  if (name.value)
+  if (name)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
+    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"
       >

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))

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>"`;

tsconfig.json

@@ -30,7 +30,7 @@
   },
   "vueCompilerOptions": {
     "plugins": [
-      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-model",
       "@vue-macros/volar/define-slots"
     ]
   },

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(' '),
 })

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() },
   },