feat: use vue-global-api

README.md

@@ -72,6 +72,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
   - [`vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 - [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively
+- [`vue-global-api`](https://github.com/antfu/vue-global-api) - Use Vue Composition API globally
 
 ### Coding Style
 

package.json

@@ -7,21 +7,22 @@
     "preview-https": "serve dist"
   },
   "dependencies": {
-    "@vueuse/core": "^5.1.2",
+    "@vueuse/core": "^5.1.3",
     "@vueuse/head": "^0.6.0",
     "nprogress": "^0.2.0",
     "prism-theme-vars": "^0.2.2",
     "vue": "^3.1.4",
-    "vue-i18n": "^9.1.6",
+    "vue-global-api": "^0.1.3",
+    "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.10"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
-    "@iconify/json": "^1.1.368",
-    "@intlify/vite-plugin-vue-i18n": "^2.3.1",
+    "@iconify/json": "^1.1.374",
+    "@intlify/vite-plugin-vue-i18n": "^2.3.2",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.2",
-    "@vitejs/plugin-vue": "^1.2.4",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@vitejs/plugin-vue": "^1.2.5",
     "@vue/compiler-sfc": "^3.1.4",
     "@vue/server-renderer": "^3.1.4",
     "cross-env": "^7.0.3",
@@ -29,16 +30,16 @@
     "https-localhost": "^4.6.5",
     "markdown-it-link-attributes": "^3.0.0",
     "markdown-it-prism": "^2.1.8",
-    "pnpm": "^6.9.1",
+    "pnpm": "^6.10.1",
     "typescript": "^4.3.5",
-    "vite": "^2.4.1",
-    "vite-plugin-components": "^0.12.1",
-    "vite-plugin-icons": "^0.6.4",
+    "vite": "^2.4.2",
+    "vite-plugin-components": "^0.12.2",
+    "vite-plugin-icons": "^0.6.5",
     "vite-plugin-md": "^0.6.7",
-    "vite-plugin-pages": "^0.14.9",
+    "vite-plugin-pages": "^0.15.0",
     "vite-plugin-pwa": "^0.8.1",
     "vite-plugin-vue-layouts": "^0.3.1",
-    "vite-plugin-windicss": "^1.2.3",
+    "vite-plugin-windicss": "^1.2.4",
     "vite-ssg": "^0.11.4",
     "vue-tsc": "^0.2.0"
   }

src/main.ts

@@ -2,9 +2,20 @@ import { ViteSSG } from 'vite-ssg'
 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'
+
+// windicss layers
+import 'virtual:windi-base.css'
+import 'virtual:windi-components.css'
+// your custom styles here
 import './styles/main.css'
+// windicss utilities should be the last style import
+import 'virtual:windi-utilities.css'
+
+// windicss devtools support (dev only)
+import 'virtual:windi-devtools'
+
+// register vue composition api globally
+import 'vue-global-api'
 
 const routes = setupLayouts(generatedRoutes)
 

src/pages/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 

vite.config.ts

@@ -57,6 +57,7 @@ export default defineConfig({
       // allow auto import and register components used in markdown
       customLoaderMatcher: id => id.endsWith('.md'),
 
+      // generate `components.d.ts` for ts support with Volar
       globalComponentsDeclaration: true,
 
       // auto import icons
@@ -111,6 +112,13 @@ export default defineConfig({
       include: [path.resolve(__dirname, 'locales/**')],
     }),
   ],
+
+  server: {
+    fs: {
+      strict: true,
+    },
+  },
+
   // https://github.com/antfu/vite-ssg
   ssgOptions: {
     script: 'async',

windi.config.ts

@@ -1,13 +1,15 @@
-import { defineConfig } from 'vite-plugin-windicss'
+import { defineConfig } from 'windicss/helpers'
 import colors from 'windicss/colors'
 import typography from 'windicss/plugin/typography'
 
 export default defineConfig({
   darkMode: 'class',
+  // https://windicss.org/posts/v30.html#attributify-mode
+  attributify: true,
+
   plugins: [
     typography(),
   ],
-  attributify: true,
   theme: {
     extend: {
       typography: {