Convert Vue component tags to PascalCase in HTML templates

src/app/AppBar.vue

@@ -1,29 +1,29 @@
 <template>
-  <v-app-bar color="surface-container-low">
+  <VAppBar color="surface-container-low">
     <template #prepend>
       <slot name="prepend" comment="slot for v-app-bar-nav-icon"> </slot>
     </template>
     <template #title>
-      <router-link
+      <RouterLink
         :to="{ name: 'home' }"
         class="text-decoration-none"
         style="color: inherit"
       >
         <span v-if="!mobile"> {{ appName }}: </span> {{ apiName }}
-      </router-link>
+      </RouterLink>
     </template>
     <template #append>
       <template v-if="!mobile">
         <span class="mx-4"> {{ version }} </span>
-        <v-btn icon="mdi-graphql" :href="apiHttp" target="_blank"> </v-btn>
-        <toggle-dark-mode-button></toggle-dark-mode-button>
+        <VBtn icon="mdi-graphql" :href="apiHttp" target="_blank"> </VBtn>
+        <ToggleDarkModeButton></ToggleDarkModeButton>
       </template>
-      <auto-mode-button></auto-mode-button>
+      <AutoModeButton></AutoModeButton>
     </template>
     <template #extension v-if="!mobile">
-      <tab-navi></tab-navi>
+      <TabNavi></TabNavi>
     </template>
-  </v-app-bar>
+  </VAppBar>
 </template>
 
 <script setup lang="ts">

src/components/auto-mode-button/AutoModeButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-card-actions>
+  <VCardActions>
     <ButtonOff v-if="mode === 'off'"></ButtonOff>
     <ButtonScheduler v-else-if="mode === 'scheduler'"></ButtonScheduler>
     <ButtonQueue v-else-if="mode === 'queue'"></ButtonQueue>
     <ButtonError v-else></ButtonError>
-  </v-card-actions>
+  </VCardActions>
 </template>
 
 <script setup lang="ts">

src/components/utils/ToggleDarkModeButton.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-btn variant="text" icon @click="toggleDark()">
-    <v-icon v-if="isDark" icon="mdi-weather-night"></v-icon>
-    <v-icon v-else icon="mdi-weather-sunny"></v-icon>
-  </v-btn>
+  <VBtn variant="text" icon @click="toggleDark()">
+    <VIcon v-if="isDark" icon="mdi-weather-night"></VIcon>
+    <VIcon v-else icon="mdi-weather-sunny"></VIcon>
+  </VBtn>
 </template>
 
 <script setup lang="ts">

src/components/utils/ToggleDarkModeButtonWithTooltip.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-tooltip location="top end">
+  <VTooltip location="top end">
     <template #activator="{ props }">
-      <toggle-button v-bind="props"></toggle-button>
+      <ToggleButton v-bind="props"></ToggleButton>
     </template>
     <span>Toggle dark mode</span>
-  </v-tooltip>
+  </VTooltip>
 </template>
 
 <script setup lang="ts">
-import toggleButton from "./ToggleDarkModeButton.vue";
+import ToggleButton from "./ToggleDarkModeButton.vue";
 </script>

src/utils/config/ProvideConfig.vue

@@ -1,9 +1,9 @@
 <template>
   <template v-if="error">
     <div>
-      <v-alert variant="tonal" type="error" class="ma-2">
+      <VAlert variant="tonal" type="error" class="ma-2">
         {{ error }}
-      </v-alert>
+      </VAlert>
     </div>
   </template>
   <template v-else>