chore: move video list loading

components/VideosList.vue

@@ -22,8 +22,29 @@ import Vue from 'vue'
 export default Vue.extend({
   name: 'VideoList',
 
-  props: {
-    videos: Array,
+  data(): {
+    hasError: boolean
+    videos: []
+  } {
+    return {
+      hasError: false,
+      videos: [],
+    }
   },
+
+  async fetch() {
+    try {
+      const response = await fetch(
+        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
+      )
+      const json = await response.json()
+      this.videos = json.items
+    } catch (error: any) {
+      this.hasError = true
+      throw new Error(error)
+    }
+  },
+
+  fetchOnServer: true,
 })
 </script>

pages/index.vue

@@ -4,9 +4,7 @@
       <PageNav />
     </header>
     <main>
-      <span>Content</span>
-
-      <VideosList :videos="videos" />
+      <VideosList />
     </main>
   </div>
 </template>
@@ -16,30 +14,5 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'IndexPage',
-
-  data(): {
-    hasError: boolean
-    videos: []
-  } {
-    return {
-      hasError: false,
-      videos: [],
-    }
-  },
-
-  async fetch() {
-    try {
-      const response = await fetch(
-        `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
-      )
-      const json = await response.json()
-      this.videos = json.items
-    } catch (error: any) {
-      this.hasError = true
-      throw new Error(error)
-    }
-  },
-
-  fetchOnServer: true,
 })
 </script>