feat: global components for volar

As shown in the vite-plugin-vue readme

.eslintignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+public

.eslintrc

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

.github/ISSUE_TEMPLATE/general.md

@@ -0,0 +1,12 @@
+---
+name: General
+about: General issue
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+PLEASE READ: I originally made this template for myself to mocking up apps quicker. I am glad to see you are willing to give it a try! Before your open the issue, please make sure you are reporting bugs in the template itself. **I am NOT creating this template to solve the problems you faced in your project, please use Vue or Vite's discord server to ask questions.** Thank you.
+
+**Describe the bug/issue**

.gitignore

@@ -5,3 +5,5 @@
 dist
 dist-ssr
 node_modules
+# intellij stuff
+.idea/

.vscode/extensions.json

@@ -1,9 +1,11 @@
 {
   "recommendations": [
+    "antfu.vite",
     "johnsoncodehk.volar",
     "lokalise.i18n-ally",
     "antfu.iconify",
     "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "voorjaar.windicss-intellisense",
+    "csstools.postcss"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,17 @@
 {
-  "volar.tsPlugin": true,
-  "i18n-ally.localesPaths": "locales",
+  "cSpell.words": ["Vitesse"],
   "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": "locales",
   "i18n-ally.sortKeys": true,
-  "cSpell.words": [
-    "Vitesse"
-  ],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "prettier.enable": false,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "volar.style.defaultLanguage": "postcss",
+  "volar.tsPlugin": true,
+  "volar.tsPluginStatus": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+  },
+  "files.associations": {
+    "*.css": "postcss",
+  },
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 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

@@ -1,10 +1,10 @@
 <p align='center'>
-  <img src='https://repository-images.githubusercontent.com/286295150/b1b1be80-354a-11eb-87c0-5dc96cae2bd9' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
+  <img src='https://user-images.githubusercontent.com/11247099/111864893-a457fd00-899e-11eb-9f05-f4b88987541d.png' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
 </p>
 
 <p align='center'>
 Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
-<sub><em>Now with Vite 2.0! ⚡️</em></sub>
+<sub><em>Now with <a href="http://windicss.netlify.app/">Windi CSS</a>! ⚡️</em></sub>
 </p>
 
 <br>
@@ -27,7 +27,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
 
-- 🎨 [TailwindCSS **v2.0**](https://blog.tailwindcss.com/tailwindcss-v2) with dark mode out-of-box
+- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
 
 - 😃 [Use icons from any icon sets, with no compromise](./src/components)
 
@@ -49,8 +49,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 ### UI Frameworks
 
-- [Tailwind CSS](https://tailwindcss.com/) - with built-in dark mode!
-- [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Typography for Tailwind
+- [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bundle additional features!
+  - [Windi CSS Typography](https://windicss.netlify.app/guide/plugins.html#typography) - similar to [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typograph) but for Windi CSS
 
 ### Icons
 
@@ -64,6 +64,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
   - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
 - [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
 - [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
+- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support
 - [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
   - [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
   - [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
@@ -74,27 +75,31 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 ### Coding Style
 
-- Use Composition API with [`<script setup>` SFC](https://github.com/vuejs/rfcs/pull/227)
-- [ESLint](https://eslint.org/) with [@antfu/eslint-config-vue](https://github.com/antfu/eslint-config), single quotes, no semi.
+- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
+- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi.
 
 ### Dev tools
 
 - [TypeScript](https://www.typescriptlang.org/)
 - [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
 - [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
-- [Netlify](https://www.netlify.com/) - deploy
+- [Netlify](https://www.netlify.com/) - zero-config deployment
 - [VS Code Extensions](./.vscode/extensions.json)
-  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
-  - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
-  - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
-  - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+  - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
+  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
+  - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
+  - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support
+  - [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
 ## Variations
 
 As this template is strongly opinionated, the following provides a curated list for community maintained variations with different preferences and feature sets. Check them out as well. PR to add yours are also welcome!
 
-- [vitesse-lite](https://github.com/kn0wn/vitesse-lite) by [@kn0wn](https://github.com/kn0wn)
+- [vitesse-addons](https://github.com/JohnCampionJr/vitesse-addons) by [@johncampionjr](https://github.com/johncampionjr) - additional options for integrations, including [Prettier](https://prettier.io) and [Storybook](https://storybook.js.org)
+- [vitesse-ssr-template](https://github.com/frandiox/vitesse-ssr-template) by [@frandiox](https://github.com/frandiox) - Vitesse with SSR
+- [vitesse-nuxt](https://github.com/antfu/vitesse-nuxt) - Vitesse for Nuxt 2 (expiremental)
+- [vitespa](https://github.com/ctholho/vitespa) - Like Vitesse but without SSG/SSR
 
 ## Try it now!
 
@@ -118,7 +123,7 @@ When you use this template, try follow the checklist to update your info properl
 
 - [ ] Rename `name` field in `package.json`
 - [ ] Change the author name in `LICENSE`
-- [ ] Change the title in `index.html`
+- [ ] Change the title in `App.vue`
 - [ ] Change the favicon in `public`
 - [ ] Remove the `.github` folder which contains the funding info
 - [ ] Clean up the READMEs and remove routes
@@ -151,6 +156,6 @@ Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along
 
 ## Why
 
-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. 
+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 maintains your own forks. [(see community maintained variation forks)](#variations)

components.d.ts

@@ -0,0 +1,11 @@
+// generated by vite-plugin-components
+// read more https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Footer: typeof import('./src/components/Footer.vue')
+    README: typeof import('./src/components/README.md')
+  }
+}
+
+export { }

locales/README.md

@@ -1,6 +1,6 @@
 ## i18n
 
-This directory is to serve your locale translation files. JSON under this folder would be loaded automatically and register with their filenames as locale code.
+This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
 
 Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
 

locales/de.yml

@@ -0,0 +1,13 @@
+button:
+  about: Über
+  back: Zurück
+  go: Los
+  home: Startseite
+  toggle_dark: Dunkelmodus umschalten
+  toggle_langs: Sprachen ändern
+intro:
+  desc: Vite Startvorlage mit Vorlieben
+  dynamic-route: Demo einer dynamischen Route
+  hi: Hi, {name}!
+  whats-your-name: Wie heißt du?
+not-found: Nicht gefunden

locales/en.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "About",
-    "back": "Back",
-    "go": "GO",
-    "home": "Home",
-    "toggle_dark": "Toggle dark mode",
-    "toggle_langs": "Change languages"
-  },
-  "intro": {
-    "desc": "Opinionated Vite Starter Template",
-    "dynamic-route": "Demo of dynamic route",
-    "hi": "Hi, {name}!",
-    "whats-your-name": "What's your name?"
-  },
-  "not-found": "Not found"
-}

locales/en.yml

@@ -0,0 +1,13 @@
+button:
+  about: About
+  back: Back
+  go: GO
+  home: Home
+  toggle_dark: Toggle dark mode
+  toggle_langs: Change languages
+intro:
+  desc: Opinionated Vite Starter Template
+  dynamic-route: Demo of dynamic route
+  hi: Hi, {name}!
+  whats-your-name: What's your name?
+not-found: Not found

locales/es.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "Acerca de",
-    "back": "Atrás",
-    "go": "Ir",
-    "home": "Inicio",
-    "toggle_dark": "Alternar modo oscuro",
-    "toggle_langs": "Cambiar idiomas"
-  },
-  "intro": {
-    "desc": "Plantilla de Inicio de Vite Dogmática",
-    "dynamic-route": "Demo de ruta dinámica",
-    "hi": "¡Hola, {name}!",
-    "whats-your-name": "¿Cómo te llamas?"
-  },
-  "not-found": "No se ha encontrado"
-}

locales/es.yml

@@ -0,0 +1,13 @@
+button:
+  about: Acerca de
+  back: Atrás
+  go: Ir
+  home: Inicio
+  toggle_dark: Alternar modo oscuro
+  toggle_langs: Cambiar idiomas
+intro:
+  desc: Plantilla de Inicio de Vite Dogmática
+  dynamic-route: Demo de ruta dinámica
+  hi: ¡Hola, {name}!
+  whats-your-name: ¿Cómo te llamas?
+not-found: No se ha encontrado

locales/fr.json

@@ -1,13 +0,0 @@
-{
-  "button": {
-    "back": "Retour",
-    "go": "Essayer"
-  },
-  "intro": {
-    "desc": "Example d'application Vite",
-    "dynamic-route": "Démo de route dynamique",
-    "hi": "Salut, {name} !",
-    "whats-your-name": "Comment t'appelles-tu ?"
-  },
-  "not-found": "Page non trouvée"
-}

locales/fr.yml

@@ -0,0 +1,13 @@
+button:
+  about: À propos de
+  back: Retour
+  go: Essayer
+  home: Accueil
+  toggle_dark: Basculer en mode sombre
+  toggle_langs: Changer de langue
+intro:
+  desc: Exemple d'application Vite
+  dynamic-route: Démo de route dynamique
+  hi: Salut, {name}!
+  whats-your-name: Comment t'appelles-tu ?
+not-found: Page non trouvée

locales/it.yml

@@ -0,0 +1,13 @@
+button:
+  about: Su di me
+  back: Indietro
+  go: Vai
+  home: Home
+  toggle_dark: Attiva/disattiva modalità scura
+  toggle_langs: Cambia lingua
+intro:
+  desc: Modello per una Applicazione Vite
+  dynamic-route: Demo di rotta dinamica
+  hi: Ciao, {name}!
+  whats-your-name: Come ti chiami?
+not-found: Non trovato

locales/ja.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "これは？",
-    "back": "戻る",
-    "go": "進む",
-    "home": "ホーム",
-    "toggle_dark": "ダークモード切り替え",
-    "toggle_langs": "言語切り替え"
-  },
-  "intro": {
-    "desc": "固執された Vite スターターテンプレート",
-    "dynamic-route": "動的ルートのデモ",
-    "hi": "こんにちは、{name}！",
-    "whats-your-name": "あなたの名前は？"
-  },
-  "not-found": "見つかりませんでした"
-}

locales/ja.yml

@@ -0,0 +1,13 @@
+button:
+  about: これは？
+  back: 戻る
+  go: 進む
+  home: ホーム
+  toggle_dark: ダークモード切り替え
+  toggle_langs: 言語切り替え
+intro:
+  desc: 固執された Vite スターターテンプレート
+  dynamic-route: 動的ルートのデモ
+  hi: こんにちは、{name}!
+  whats-your-name: 君の名は。
+not-found: 見つかりませんでした

locales/ko.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "소개",
-    "back": "뒤로가기",
-    "go": "이동",
-    "home": "홈",
-    "toggle_dark": "다크모드 토글",
-    "toggle_langs": "언어 변경"
-  },
-  "intro": {
-    "desc": "Vite 애플리케이션 템플릿",
-    "dynamic-route": "다이나믹 라우트 데모",
-    "hi": "안녕, {name}!",
-    "whats-your-name": "이름이 뭐예요?"
-  },
-  "not-found": "찾을 수 없습니다"
-}

locales/ko.yml

@@ -0,0 +1,14 @@
+button:
+  about: 소개
+  back: 뒤로가기
+  go: 이동
+  home: 홈
+  toggle_dark: 다크모드 토글
+  toggle_langs: 언어 변경
+intro:
+  desc: Vite 애플리케이션 템플릿
+  dynamic-route: 다이나믹 라우트 데모
+  hi: 안녕, {name}!
+  whats-your-name: 이름이 뭐예요?
+not-found: 찾을 수 없습니다
+

locales/pt-BR.yml

@@ -0,0 +1,13 @@
+button:
+  about: Sobre
+  back: Voltar
+  go: Ir
+  home: Início
+  toggle_dark: Alternar modo escuro
+  toggle_langs: Mudar de idioma
+intro:
+  desc: Modelo Opinativo de Partida de Vite
+  dynamic-route: Demonstração de rota dinâmica
+  hi: Olá, {name}!
+  whats-your-name: Qual é o seu nome?
+not-found: Não encontrado

locales/ru.yml

@@ -0,0 +1,13 @@
+button:
+  about: О шаблоне
+  back: Назад
+  go: Перейти
+  home: Главная
+  toggle_dark: Включить темный режим
+  toggle_langs: Сменить язык
+intro:
+  desc: Самостоятельный начальный шаблон Vite
+  dynamic-route: Демо динамического маршрута
+  hi: Привет, {name}!
+  whats-your-name: Как тебя зовут?
+not-found: Не найден

locales/tr.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "Hakkımda",
-    "back": "Geri",
-    "go": "İLERİ",
-    "home": "Anasayfa",
-    "toggle_dark": "Karanlık modu değiştir",
-    "toggle_langs": "Dilleri değiştir"
-  },
-  "intro": {
-    "desc": "Görüşlü Vite Başlangıç Şablonu",
-    "dynamic-route": "Dinamik rota demosu",
-    "hi": "Merhaba, {name}!",
-    "whats-your-name": "Adınız nedir ?"
-  },
-  "not-found": "Bulunamadı"
-}

locales/tr.yml

@@ -0,0 +1,13 @@
+button:
+  about: Hakkımda
+  back: Geri
+  go: İLERİ
+  home: Anasayfa
+  toggle_dark: Karanlık modu değiştir
+  toggle_langs: Dilleri değiştir
+intro:
+  desc: Görüşlü Vite Başlangıç Şablonu
+  dynamic-route: Dinamik rota demosu
+  hi: Merhaba, {name}!
+  whats-your-name: Adınız nedir?
+not-found: Bulunamadı

locales/vi.json

@@ -1,13 +0,0 @@
-{
-  "button": {
-    "back": "Quay lại",
-    "go": "Đi"
-  },
-  "intro": {
-    "desc": "Ý kiến cá nhân Vite Template để bắt đầu",
-    "dynamic-route": "Bản giới thiệu về dynamic route",
-    "hi": "Hi, {name}!",
-    "whats-your-name": "Tên bạn là gì?"
-  },
-  "not-found": "Không tìm thấy"
-}

locales/vi.yml

@@ -0,0 +1,13 @@
+button:
+  about: Về
+  back: Quay lại
+  go: Đi
+  home: Khởi đầu
+  toggle_dark: Chuyển đổi chế độ tối
+  toggle_langs: Thay đổi ngôn ngữ
+intro:
+  desc: Ý kiến cá nhân Vite Template để bắt đầu
+  dynamic-route: Bản giới thiệu về dynamic route
+  hi: Hi, {name}!
+  whats-your-name: Tên bạn là gì?
+not-found: Không tìm thấy

locales/zh-CN.json

@@ -1,17 +0,0 @@
-{
-  "button": {
-    "about": "关于",
-    "back": "返回",
-    "go": "确定",
-    "home": "首页",
-    "toggle_dark": "切换深色模式",
-    "toggle_langs": "切换语言"
-  },
-  "intro": {
-    "desc": "固执己见的 Vite 项目模板",
-    "dynamic-route": "动态路由演示",
-    "hi": "你好，{name}！",
-    "whats-your-name": "输入你的名字"
-  },
-  "not-found": "未找到页面"
-}

locales/zh-CN.yml

@@ -0,0 +1,13 @@
+button:
+  about: 关于
+  back: 返回
+  go: 确定
+  home: 首页
+  toggle_dark: 切换深色模式
+  toggle_langs: 切换语言
+intro:
+  desc: 固执己见的 Vite 项目模板
+  dynamic-route: 动态路由演示
+  hi: 你好，{name}
+  whats-your-name: 输入你的名字
+not-found: 未找到页面

package.json

@@ -2,50 +2,43 @@
   "private": true,
   "scripts": {
     "dev": "vite --port 3333 --open",
-    "build": "cross-env NODE_ENV=production vite-ssg build"
+    "build": "cross-env NODE_ENV=production vite-ssg build",
+    "preview": "vite preview",
+    "preview-https": "serve dist"
   },
   "dependencies": {
-    "@vueuse/core": "^4.1.1",
-    "@vueuse/head": "^0.2.3",
+    "@vueuse/core": "^4.11.1",
+    "@vueuse/head": "^0.5.1",
     "nprogress": "^0.2.0",
-    "prism-theme-vars": "^0.1.4",
-    "vue": "^3.0.5",
-    "vue-i18n": "^9.0.0-rc.6",
-    "vue-router": "^4.0.3"
+    "prism-theme-vars": "^0.2.2",
+    "vue": "^3.0.11",
+    "vue-i18n": "^9.1.6",
+    "vue-router": "^4.0.8"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.4.3",
-    "@iconify/json": "^1.1.303",
-    "@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.17",
-    "@tailwindcss/typography": "^0.4.0",
+    "@antfu/eslint-config": "^0.6.5",
+    "@iconify/json": "^1.1.348",
+    "@intlify/vite-plugin-vue-i18n": "^2.1.2",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.0",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/server-renderer": "^3.0.5",
-    "autoprefixer": "^10.2.4",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/server-renderer": "^3.0.11",
     "cross-env": "^7.0.3",
-    "eslint": "^7.20.0",
-    "markdown-it-prism": "^2.1.4",
-    "pnpm": "^5.17.2",
-    "postcss": "^8.2.6",
-    "postcss-nested": "^5.0.3",
-    "tailwindcss": "^2.0.3",
-    "typescript": "^4.1.5",
-    "vite": "^2.0.0-beta.69",
-    "vite-plugin-components": "^0.6.10",
-    "vite-plugin-icons": "^0.2.1",
-    "vite-plugin-md": "^0.4.2",
-    "vite-plugin-pages": "^0.4.2",
-    "vite-plugin-pwa": "^0.4.6",
-    "vite-plugin-vue-layouts": "^0.2.2",
-    "vite-ssg": "^0.8.8"
-  },
-  "eslintConfig": {
-    "extends": "@antfu/eslint-config",
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": "off"
-    }
+    "eslint": "^7.27.0",
+    "https-localhost": "^4.6.5",
+    "markdown-it-prism": "^2.1.6",
+    "pnpm": "^6.5.0",
+    "typescript": "^4.2.4",
+    "vite": "^2.3.4",
+    "vite-plugin-components": "^0.10.1",
+    "vite-plugin-icons": "^0.5.1",
+    "vite-plugin-md": "^0.6.7",
+    "vite-plugin-pages": "^0.12.1",
+    "vite-plugin-pwa": "^0.7.3",
+    "vite-plugin-vue-layouts": "^0.3.1",
+    "vite-plugin-windicss": "^0.16.0",
+    "vite-ssg": "^0.11.1",
+    "vue-tsc": "^0.1.6"
   }
 }

postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-nested': {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.vue

@@ -3,7 +3,7 @@ import { useHead } from '@vueuse/head'
 
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
-// they will be renedered correctly in the html results with vite-ssg
+// they will be rendered correctly in the html results with vite-ssg
 useHead({
   title: 'Vitesse',
   meta: [

src/components/Footer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { isDark, toggleDark } from '~/logics'
+import { isDark, toggleDark } from '~/logic'
 
 const { t, availableLocales, locale } = useI18n()
 

src/components/README.md

@@ -5,6 +5,6 @@ Components in this dir will be auto-registered and on-demand, powered by [`vite-
 
 ### Icons
 
-You can uses icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
 
-It will only bundles the icons you use, check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.
+It will only bundle the icons you use. Check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.

src/layouts/default.vue

@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <router-view />
     <Footer />
-    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
       [Default Layout]
     </div>
   </main>

src/layouts/home.vue

@@ -2,7 +2,7 @@
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <router-view />
     <Footer />
-    <div class="mt-5 m-auto text-center opacity-25 text-sm">
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
       [Home Layout]
     </div>
   </main>

src/logic/dark.ts

@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

src/logics/dark.ts

@@ -1,25 +0,0 @@
-import { watch, computed } from 'vue'
-import { usePreferredDark, useToggle } from '@vueuse/core'
-import { colorSchema } from './store'
-
-const preferredDark = usePreferredDark()
-
-export const isDark = computed({
-  get() {
-    return colorSchema.value === 'auto' ? preferredDark.value : colorSchema.value === 'dark'
-  },
-  set(v: boolean) {
-    if (v === preferredDark.value)
-      colorSchema.value = 'auto'
-    else
-      colorSchema.value = v ? 'dark' : 'light'
-  },
-})
-
-export const toggleDark = useToggle(isDark)
-
-watch(
-  isDark,
-  v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),
-  { immediate: true },
-)

src/logics/store.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue'
-import { useStorage } from '@vueuse/core'
-
-export const colorSchema = useStorage('color-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>

src/main.ts

@@ -1,8 +1,10 @@
-import './styles/main.postcss'
 import { ViteSSG } from 'vite-ssg'
-import generatedRoutes from 'pages-generated'
-import { setupLayouts } from 'layouts-generated'
+import generatedRoutes from 'virtual:generated-pages'
+import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
+import 'virtual:windi.css'
+import 'virtual:windi-devtools'
+import './styles/main.css'
 
 const routes = setupLayouts(generatedRoutes)
 

src/modules/i18n.ts

@@ -5,9 +5,10 @@ import { UserModule } from '~/types'
 // https://vitejs.dev/guide/features.html#glob-import
 const messages = Object.fromEntries(
   Object.entries(
-    import.meta.globEager('../../locales/*.json'))
+    import.meta.globEager('../../locales/*.y(a)?ml'))
     .map(([key, value]) => {
-      return [key.slice(14, -5), value.default]
+      const yaml = key.endsWith('.yaml')
+      return [key.slice(14, yaml ? -5 : -4), value.default]
     }),
 )
 

src/modules/pwa.ts

@@ -0,0 +1,12 @@
+import { UserModule } from '~/types'
+
+// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
+export const install: UserModule = ({ isClient, router }) => {
+  if (!isClient)
+    return
+
+  router.isReady().then(async() => {
+    const { registerSW } = await import('virtual:pwa-register')
+    registerSW({ immediate: true })
+  })
+}

src/pages/README.md

@@ -1,6 +1,6 @@
 ## File-based Routing
 
-Routes will auto-generated for Vue files in this dir with the same file structure.
+Routes will be auto-generated for Vue files in this dir with the same file structure.
 Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
 
 ### Path Aliasing
@@ -10,11 +10,11 @@ Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) f
 For example, instead of having
 
 ```ts
-import { isDark } from '../../../../logics'
+import { isDark } from '../../../../logic'
 ```
 
-now you can use
+now, you can use
 
 ```ts
-import { isDark } from '~/logics'
+import { isDark } from '~/logic'
 ```

src/pages/about.md

@@ -8,7 +8,7 @@ title: About
   <h3>About</h3>
 </div>
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
 
 ```js
 // syntax highlighting example

src/styles/main.css

@@ -1,34 +1,31 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import './markdown.postcss';
+@import './markdown.css';
 
 html,
 body,
 #app {
-  height: 100vh;
+  height: 100%;
   margin: 0;
   padding: 0;
 }
 
 html.dark {
-  background: #222;
+  background: #121212;
 }
 
 #nprogress {
   pointer-events: none;
+}
 
-  .bar {
-    @apply bg-teal-600 opacity-75;
+#nprogress .bar {
+  @apply bg-teal-600 opacity-75;
 
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
 
-    width: 100%;
-    height: 2px;
-  }
+  width: 100%;
+  height: 2px;
 }
 
 .btn {

src/styles/markdown.css

@@ -8,36 +8,42 @@
 html:not(.dark) {
   --prism-foreground: #393a34;
   --prism-background: #fbfbfb;
-  --prism-comment: #8e8f8e;
-  --prism-string: #a1644c;
-  --prism-literal: #3a9c9b;
-  --prism-keyword: #248358;
-  --prism-function: #7e8a42;
+  --prism-comment: #a0ada0;
+  --prism-string: #b56959;
+  --prism-literal: #2f8a89;
+  --prism-number: #296aa3;
+  --prism-keyword: #1c6b48;
+  --prism-function: #6c7834;
+  --prism-boolean: #1c6b48;
+  --prism-constant: #a65e2b;
   --prism-deleted: #a14f55;
-  --prism-class: #2b91af;
-  --prism-builtin: #a52727;
-  --prism-property: #ad502b;
-  --prism-namespace: #c96880;
+  --prism-class: #2993a3;
+  --prism-builtin: #ab5959;
+  --prism-property: #b58451;
+  --prism-namespace: #b05a78;
   --prism-punctuation: #8e8f8b;
   --prism-decorator: #bd8f8f;
+  --prism-regex: #ab5e3f;
   --prism-json-property: #698c96;
 }
 
 html.dark {
-  --prism-scheme: dark;
   --prism-foreground: #d4cfbf;
-  --prism-background: #1e1e1e;
+  --prism-background: #151515;
   --prism-comment: #758575;
-  --prism-string: #ce9178;
-  --prism-literal: #4fb09d;
+  --prism-string: #d48372;
+  --prism-literal: #429988;
   --prism-keyword: #4d9375;
-  --prism-function: #c2c275;
+  --prism-boolean: #1c6b48;
+  --prism-number: #6394bf;
+  --prism-variable: #c2b36e;
+  --prism-function: #a1b567;
   --prism-deleted: #a14f55;
-  --prism-class: #5ebaa8;
-  --prism-builtin: #cb7676;
+  --prism-class: #54b1bf;
+  --prism-builtin: #e0a569;
   --prism-property: #dd8e6e;
-  --prism-namespace: #c96880;
-  --prism-punctuation: #d4d4d4;
+  --prism-namespace: #db889a;
+  --prism-punctuation: #858585;
   --prism-decorator: #bd8f8f;
   --prism-regex: #ab5e3f;
   --prism-json-property: #6b8b9e;
@@ -46,10 +52,3 @@ html.dark {
   --prism-line-highlight-background: #444444;
   --prism-selection-background: #444444;
 }
-
-/* fix tailwind typography in darkmode */
-.prose {
-  a code {
-    color: inherit;
-  }
-}

tailwind.config.js

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const colors = require('tailwindcss/colors')
-const typography = require('@tailwindcss/typography')
-
-module.exports = {
-  purge: {
-    enabled: process.env.NODE_ENV === 'production',
-    content: [
-      './index.html',
-      './src/**/*.vue',
-      './src/**/*.md',
-      './src/**/*.js',
-      './src/**/*.ts',
-    ],
-    options: {
-      safelist: ['prose', 'prose-sm', 'm-auto'],
-    },
-  },
-  variants: {
-    extend: {
-      cursor: ['disabled'],
-      backgroundColor: ['disabled'],
-      borderColor: ['active', 'disabled'],
-      textColor: ['active', 'disabled'],
-      opacity: ['dark', 'active', 'disabled'],
-    }
-  },
-  darkMode: 'class',
-  plugins: [typography],
-  theme: {
-    extend: {
-      colors: {
-        teal: colors.teal,
-      },
-      typography: {
-        DEFAULT: {
-          css: {
-            color: 'inherit',
-            a: {
-              color: 'inherit',
-              opacity: 0.75,
-              '&:hover': {
-                opacity: 1,
-                color: colors.teal[600],
-              },
-            },
-            b: { color: 'inherit' },
-            strong: { color: 'inherit' },
-            em: { color: 'inherit' },
-            h1: { color: 'inherit' },
-            h2: { color: 'inherit' },
-            h3: { color: 'inherit' },
-            h4: { color: 'inherit' },
-            code: { color: 'inherit' },
-          },
-        },
-      },
-    },
-  },
-}

tsconfig.json

@@ -6,7 +6,7 @@
     "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
-    "incremental": true,
+    "incremental": false,
     "skipLibCheck": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
@@ -15,7 +15,6 @@
     "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client",
-      "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
     ],
     "paths": {

vite.config.ts

@@ -6,6 +6,7 @@ import Layouts from 'vite-plugin-vue-layouts'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
+import WindiCSS from 'vite-plugin-windicss'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Prism from 'markdown-it-prism'
@@ -47,6 +48,8 @@ export default defineConfig({
       // allow auto import and register components used in markdown
       customLoaderMatcher: id => id.endsWith('.md'),
 
+      globalComponentsDeclaration: true,
+
       // auto import icons
       customComponentResolvers: [
         // https://github.com/antfu/vite-plugin-icons
@@ -60,9 +63,14 @@ export default defineConfig({
     // https://github.com/antfu/vite-plugin-icons
     ViteIcons(),
 
+    // https://github.com/antfu/vite-plugin-windicss
+    WindiCSS({
+      safelist: 'prose prose-sm m-auto text-left',
+    }),
+
     // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
-      inlineRegister: false,
+      registerType: 'autoUpdate',
       manifest: {
         name: 'Vitesse',
         short_name: 'Vitesse',

windi.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite-plugin-windicss'
+import colors from 'windicss/colors'
+import typography from 'windicss/plugin/typography'
+
+export default defineConfig({
+  darkMode: 'class',
+  plugins: [
+    typography(),
+  ],
+  attributify: true,
+  theme: {
+    extend: {
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: '65ch',
+            color: 'inherit',
+            a: {
+              'color': 'inherit',
+              'opacity': 0.75,
+              'fontWeight': '500',
+              'textDecoration': 'underline',
+              '&:hover': {
+                opacity: 1,
+                color: colors.teal[600],
+              },
+            },
+            b: { color: 'inherit' },
+            strong: { color: 'inherit' },
+            em: { color: 'inherit' },
+            h1: { color: 'inherit' },
+            h2: { color: 'inherit' },
+            h3: { color: 'inherit' },
+            h4: { color: 'inherit' },
+            code: { color: 'inherit' },
+          },
+        },
+      },
+    },
+  },
+})