chore: update deps

src/components/TheFooter.vue

@@ -3,7 +3,7 @@ import { availableLocales, loadLanguageAsync } from '~/modules/i18n'
 
 const { t, locale } = useI18n()
 
-const toggleLocales = async () => {
+async function toggleLocales() {
   // change to some real logic
   const locales = availableLocales
   const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
@@ -13,24 +13,24 @@ const toggleLocales = async () => {
 </script>
 
 <template>
-  <nav text-xl mt-6>
-    <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
+  <nav mt-6 text-xl flex="~ gap-4">
+    <RouterLink icon-btn to="/" :title="t('button.home')">
       <div i-carbon-campsite />
     </RouterLink>
 
-    <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
+    <button icon-btn :title="t('button.toggle_dark')" @click="toggleDark()">
       <div i="carbon-sun dark:carbon-moon" />
     </button>
 
-    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales()">
+    <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
       <div i-carbon-language />
     </a>
 
-    <RouterLink class="icon-btn mx-2" to="/about" :title="t('button.about')">
+    <RouterLink icon-btn to="/about" :title="t('button.about')">
       <div i-carbon-dicom-overlay />
     </RouterLink>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
+    <a icon-btn 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 } = defineModel<{
+const { modelValue } = defineModels<{
   modelValue: string
 }>()
 </script>

src/layouts/404.vue

@@ -10,7 +10,7 @@ const { t } = useI18n()
     </div>
     <RouterView />
     <div>
-      <button btn text-sm m="3 t8" @click="router.back()">
+      <button text-sm btn m="3 t8" @click="router.back()">
         {{ t('button.back') }}
       </button>
     </div>

src/layouts/default.vue

@@ -1,8 +1,11 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main
+    px-4 py-10
+    text="center gray-700 dark:gray-200"
+  >
     <RouterView />
     <TheFooter />
-    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
+    <div mx-auto mt-5 text-center text-sm opacity-50>
       [Default Layout]
     </div>
   </main>

src/layouts/home.vue

@@ -1,8 +1,11 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main
+    px-4 py-10
+    text="center gray-700 dark:gray-200"
+  >
     <RouterView />
     <TheFooter />
-    <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
+    <div mx-auto mt-5 text-center text-sm opacity-50>
       [Home Layout]
     </div>
   </main>

src/pages/hi/[name].vue

@@ -23,7 +23,7 @@ watchEffect(() => {
     </p>
 
     <template v-if="user.otherNames.length">
-      <p text-sm mt-4>
+      <p mt-4 text-sm>
         <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
@@ -37,7 +37,7 @@ watchEffect(() => {
 
     <div>
       <button
-        btn m="3 t6" text-sm
+        m="3 t6" text-sm btn
         @click="router.back()"
       >
         {{ t('button.back') }}

src/pages/index.vue

@@ -6,7 +6,7 @@ const user = useUserStore()
 const name = $ref(user.savedName)
 
 const router = useRouter()
-const go = () => {
+function go() {
   if (name)
     router.push(`/hi/${encodeURIComponent(name)}`)
 }
@@ -40,7 +40,7 @@ const { t } = useI18n()
 
     <div>
       <button
-        btn m-3 text-sm
+        m-3 text-sm btn
         :disabled="!name"
         @click="go"
       >