feat: use unplugin-auto-import instead of vue-global-api

.eslintrc

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "@antfu",
+    "@antfu"
-    "vue-global-api"
   ]
 }

.gitignore

@@ -5,7 +5,7 @@
 dist
 dist-ssr
 node_modules
-# intellij stuff
 .idea/
-# logs
 *.log
+components.d.ts
+auto-imports.d.ts

README.md

@@ -67,6 +67,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
 - [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
 - [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
+- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`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
@@ -76,7 +77,6 @@ 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
 

components.d.ts

@@ -1,19 +0,0 @@
-// generated by vite-plugin-components
-// read more https://github.com/vuejs/vue-next/pull/3399
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    CarbonCampsite: typeof import('virtual:vite-icons/carbon/campsite')['default']
-    CarbonDicomOverlay: typeof import('virtual:vite-icons/carbon/dicom-overlay')['default']
-    CarbonLanguage: typeof import('virtual:vite-icons/carbon/language')['default']
-    CarbonLogoGithub: typeof import('virtual:vite-icons/carbon/logo-github')['default']
-    CarbonMoon: typeof import('virtual:vite-icons/carbon/moon')['default']
-    CarbonPedestrian: typeof import('virtual:vite-icons/carbon/pedestrian')['default']
-    CarbonSun: typeof import('virtual:vite-icons/carbon/sun')['default']
-    CarbonWarning: typeof import('virtual:vite-icons/carbon/warning')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    README: typeof import('./src/components/README.md')['default']
-  }
-}
-
-export { }

package.json

@@ -10,39 +10,39 @@
     "@vueuse/core": "^6.0.0",
     "@vueuse/head": "^0.6.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.0-0",
+    "pinia": "^2.0.0-rc.6",
     "prism-theme-vars": "^0.2.2",
-    "vue": "^3.2.2",
+    "vue": "^3.2.4",
     "vue-demi": "^0.11.3",
-    "vue-global-api": "^0.4.1",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
-    "@iconify/json": "^1.1.387",
+    "@iconify/json": "^1.1.392",
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^1.4.0",
-    "@vue/compiler-sfc": "^3.2.2",
+    "@vue/compiler-sfc": "^3.2.4",
-    "@vue/server-renderer": "^3.2.2",
+    "@vue/server-renderer": "^3.2.4",
     "critters": "^0.0.10",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "https-localhost": "^4.6.5",
     "markdown-it-link-attributes": "^3.0.0",
-    "markdown-it-prism": "^2.1.8",
+    "markdown-it-prism": "^2.2.0",
-    "pnpm": "^6.13.0",
+    "pnpm": "^6.14.3",
     "typescript": "^4.3.5",
-    "vite": "^2.4.4",
+    "unplugin-auto-import": "^0.0.6",
+    "vite": "^2.5.0",
     "vite-plugin-components": "^0.13.2",
     "vite-plugin-icons": "^0.6.5",
-    "vite-plugin-md": "^0.10.0",
+    "vite-plugin-md": "^0.11.0",
-    "vite-plugin-pages": "^0.17.3",
+    "vite-plugin-pages": "^0.17.4",
-    "vite-plugin-pwa": "^0.10.0",
+    "vite-plugin-pwa": "^0.11.0",
     "vite-plugin-vue-layouts": "^0.3.1",
-    "vite-plugin-windicss": "^1.2.7",
+    "vite-plugin-windicss": "^1.2.8",
-    "vite-ssg": "^0.14.5",
+    "vite-ssg": "^0.14.6",
-    "vue-tsc": "^0.2.3"
+    "vue-tsc": "^0.3.0"
   }
 }

src/components/Footer.vue

@@ -17,7 +17,7 @@ const toggleLocales = () => {
       <carbon-campsite />
     </router-link>
 
-    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark">
+    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
       <carbon-moon v-if="isDark" />
       <carbon-sun v-else />
     </button>

src/layouts/404.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
 const router = useRouter()
 const { t } = useI18n()
 </script>

src/logic/dark.ts

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

src/main.ts

@@ -1,5 +1,4 @@
 // register vue composition api globally
-import 'vue-global-api'
 import { ViteSSG } from 'vite-ssg'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:generated-layouts'

src/pages/[...all].vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
 const { t } = useI18n()
 </script>
 

src/pages/hi/[name].vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useUserStore } from '~/stores/user'
 
 const props = defineProps<{ name: string }>()
 const router = useRouter()
-const { t } = useI18n()
 const user = useUserStore()
+const { t } = useI18n()
 
 watchEffect(() => {
   user.setNewName(props.name)

src/pages/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useUserStore } from '~/stores/user'
 
 const user = useUserStore()

vite.config.ts

@@ -7,6 +7,7 @@ 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 AutoImport from 'unplugin-auto-import/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Prism from 'markdown-it-prism'
@@ -34,6 +35,17 @@ export default defineConfig({
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
     Layouts(),
 
+    // https://github.com/antfu/unplugin-auto-import
+    AutoImport({
+      imports: [
+        'vue',
+        'vue-router',
+        'vue-i18n',
+        '@vueuse/head',
+        '@vueuse/core',
+      ],
+    }),
+
     // https://github.com/antfu/vite-plugin-components
     ViteComponents({
       // allow auto load markdown components under `./src/components/`