feat: improve architecture

src/main.js

@@ -1,32 +1,10 @@
 import { createApp } from "vue";
-import {
-    createRouter, createWebHistory
-} from "vue-router";
-
 import App from "./App.vue";
-import Playlist from "./views/PlaylistView.vue";
-import Video from "./views/VideoView.vue";
-import ListOfPlaylists from "./views/ListOfPlaylist.vue";
 
 import store from "./store";
 import "./assets/index.css";
 import { YoutubeVue3 } from "youtube-vue3";
-
-const routes = [{
-    path: "/", component: ListOfPlaylists
-},
-                {
-                    path: "/playlist/:id", component: Playlist
-                },
-                {
-                    path: "/video/:id", component: Video
-                },];
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes,
-});
-
+import router from "./router/router";
 
 const app = createApp(App);
 app.use(router);

src/router/router.js

@@ -0,0 +1,23 @@
+import {
+    createRouter, createWebHistory
+} from "vue-router";
+import Playlist from "../views/PlaylistView.vue";
+import Video from "../views/VideoView.vue";
+import ListOfPlaylists from "../views/ListOfPlaylist.vue";
+
+const routes = [{
+    path: "/", component: ListOfPlaylists,
+},
+                {
+                    path: "/playlist/:id", component: Playlist
+                },
+                {
+                    path: "/video/:id", component: Video
+                },];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;

src/utils/usePlaylists.js

@@ -22,7 +22,7 @@ export async function getPlaylists() {
     }
 }
 
-export async function fetchPlaylist(videos, nextPageToken, isLoading, routeParams) {
+export async function getPlaylistItems(videos, nextPageToken, isLoading, routeParams) {
     try {
         isLoading.value = true;
 

src/views/PlaylistView.vue

@@ -20,7 +20,7 @@
 <script setup>
 import VideoCard from "../components/VideoCard.vue";
 import { useStore } from "vuex";
-import { fetchPlaylist } from "@/utils/usePlaylists";
+import { getPlaylistItems } from "@/utils/usePlaylists";
 import {
     ref, onMounted, computed
 } from "vue";
@@ -36,12 +36,12 @@ const playlistName = computed(() => store.state.playlistName);
 
 const loadMoreVideos = () => {
     if (nextPageToken.value) {
-        fetchPlaylist(videos, nextPageToken, isLoading, router.params.id);
+        getPlaylistItems(videos, nextPageToken, isLoading, router.params.id);
     }
 };
 
 onMounted(() => {
-    fetchPlaylist(videos, nextPageToken, isLoading, router.params.id);
+    getPlaylistItems(videos, nextPageToken, isLoading, router.params.id);
 });
 </script>
 <style scoped>