Refractor component names.

For vue/multi-word-component-names

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
-        <Navigation />
+        <NavBar />
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
                 <component :is="Component" :key="$route.fullPath" />
@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import Navigation from "@/components/Navigation.vue";
+import NavBar from "@/components/NavBar.vue";
 export default {
     components: {
-        Navigation,
+        NavBar,
     },
     mounted() {
         if (window.location.pathname === "/" || window.location.pathname.length == 0)

src/components/CommentItem.vue

@@ -43,7 +43,7 @@
             </template>
             <div v-show="showingReplies" v-if="replies" class="replies">
                 <div v-for="reply in replies" :key="reply.commentId" class="w-full">
-                    <Comment :comment="reply" :uploader="uploader" :video-id="videoId" />
+                    <CommentItem :comment="reply" :uploader="uploader" :video-id="videoId" />
                 </div>
                 <div v-if="nextpage" @click="loadReplies">
                     <a v-t="'actions.load_more_replies'" />

src/components/WatchVideo.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="video && isEmbed" class="absolute top-0 left-0 h-full w-full z-50">
-        <Player
+        <VideoPlayer
             ref="videoPlayer"
             :video="video"
             :sponsors="sponsors"
@@ -14,7 +14,7 @@
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
-            <Player
+            <VideoPlayer
                 ref="videoPlayer"
                 :video="video"
                 :sponsors="sponsors"
@@ -108,7 +108,7 @@
 
         <div class="grid xl:grid-cols-5 sm:grid-cols-4 grid-cols-1">
             <div v-if="comments" ref="comments" class="xl:col-span-4 sm:col-span-3">
-                <Comment
+                <CommentItem
                     v-for="comment in comments.comments"
                     :key="comment.commentId"
                     :comment="comment"
@@ -140,19 +140,19 @@
 </template>
 
 <script>
-import Player from "@/components/Player.vue";
+import VideoPlayer from "@/components/VideoPlayer.vue";
 import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
-import Comment from "@/components/Comment.vue";
+import CommentItem from "@/components/CommentItem.vue";
 import Chapters from "@/components/Chapters.vue";
 
 export default {
     name: "App",
     components: {
-        Player,
+        VideoPlayer,
         VideoItem,
         ErrorHandler,
-        Comment,
+        CommentItem,
         Chapters,
     },
     data() {

src/router/router.js

@@ -9,7 +9,7 @@ const routes = [
     {
         path: "/preferences",
         name: "Preferences",
-        component: () => import("../components/Preferences.vue"),
+        component: () => import("../components/PreferencesPage.vue"),
     },
     {
         path: "/results",
@@ -19,7 +19,7 @@ const routes = [
     {
         path: "/playlist",
         name: "Playlist",
-        component: () => import("../components/Playlist.vue"),
+        component: () => import("../components/PlaylistPage.vue"),
     },
     {
         path: "/:path(v|w|embed|shorts|watch)/:v?",
@@ -29,7 +29,7 @@ const routes = [
     {
         path: "/:path(channel|user|c)/:channelId/:videos?",
         name: "Channel",
-        component: () => import("../components/Channel.vue"),
+        component: () => import("../components/ChannelPage.vue"),
     },
     {
         path: "/login",