chore: use pascal for component names

src/App.vue

@@ -11,5 +11,5 @@ useHead({
 </script>
 
 <template>
-  <router-view />
+  <RouterView />
 </template>

src/components/Footer.vue

@@ -12,9 +12,9 @@ const toggleLocales = () => {
 
 <template>
   <nav text-xl mt-6>
-    <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
+    <RouterLink class="icon-btn mx-2" to="/" :title="t('button.home')">
       <div i-carbon-campsite />
-    </router-link>
+    </RouterLink>
 
     <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
       <div i="carbon-sun dark:carbon-moon" />
@@ -24,9 +24,9 @@ const toggleLocales = () => {
       <div i-carbon-language />
     </a>
 
-    <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
+    <RouterLink class="icon-btn mx-2" to="/about" :title="t('button.about')">
       <div i-carbon-dicom-overlay />
-    </router-link>
+    </RouterLink>
 
     <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
       <div i-carbon-logo-github />

src/layouts/404.vue

@@ -8,7 +8,7 @@ const { t } = useI18n()
     <div text-4xl>
       <div i-carbon-warning inline-block />
     </div>
-    <router-view />
+    <RouterView />
     <div>
       <button btn text-sm m="3 t8" @click="router.back()">
         {{ t('button.back') }}

src/layouts/default.vue

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

src/layouts/home.vue

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