chore: use pascal case for custom components

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <Navbar />
     <main id="app">
-      <router-view />
+      <RouterView />
     </main>
   </div>
 </template>

src/components/Feature.vue

@@ -16,7 +16,7 @@
         class="inline-flex items-center mt-3 text-green-500"
       >
         Learn More
-        <mdi-arrow-right class="ml-1" />
+        <MdiArrowRight class="ml-1" />
       </a>
     </div>
   </div>

src/components/Hero.vue

@@ -22,9 +22,9 @@
           <ButtonPrimary> Vue docs </ButtonPrimary>
         </a>
 
-        <router-link :to="{ name: 'About' }">
+        <RouterLink :to="{ name: 'About' }">
           <ButtonSecondary> About </ButtonSecondary>
-        </router-link>
+        </RouterLink>
       </div>
     </div>
   </section>

src/components/Navbar.vue

@@ -3,7 +3,7 @@
     <div
       class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row"
     >
-      <router-link
+      <RouterLink
         :to="{ name: 'Home' }"
         class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
       >
@@ -11,11 +11,11 @@
         <span class="ml-3 text-xl dark:text-white">
           {{ appName }}
         </span>
-      </router-link>
+      </RouterLink>
       <nav
         class="flex flex-wrap items-center justify-center text-base md:ml-auto"
       >
-        <router-link
+        <RouterLink
           v-for="(route, index) in routes"
           :key="index"
           class="mr-5 font-semibold cursor-pointer"
@@ -28,29 +28,28 @@
           :to="{ name: route.name }"
         >
           {{ route.name }}
-        </router-link>
-        <router-link
+        </RouterLink>
+        <RouterLink
           class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
           to="/aliens"
         >
-          <mdi-alien />
-        </router-link>
+          <MdiAlien />
+        </RouterLink>
         <a
           href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
           target="_blank"
           class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
         >
-          <mdi-github />
+          <MdiGithub />
         </a>
         <button
           @click="toggle"
           class="flex items-center justify-center w-9 h-9 focus:outline-none"
         >
-          <mdi-white-balance-sunny class="text-yellow-500" v-if="isDark" />
-          <mdi-moon-waning-crescent class="text-gray-800" v-else />
+          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
+          <MdiMoonWaningCrescent class="text-gray-800" v-else />
         </button>
       </nav>
-      <div></div>
     </div>
   </header>
 </template>

src/views/NotFound.vue

@@ -16,9 +16,9 @@
           Oops, looks like you got kidnapped by aliens.
         </p>
         <div class="flex justify-center">
-          <router-link :to="{ name: 'Home' }">
+          <RouterLink :to="{ name: 'Home' }">
             <ButtonPrimary> Bring me back Home </ButtonPrimary>
-          </router-link>
+          </RouterLink>
         </div>
       </div>
     </div>