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

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