initial-commit

pages/star-wars/index/+Page.vue

@@ -0,0 +1,23 @@
+<template>
+    <h1>Star Wars Movies</h1>
+    <ol>
+        <li v-for="item in movies" :key="item.id">
+            <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{
+                item.release_date
+            }})
+        </li>
+    </ol>
+    <p>
+        Source:
+        <a href="https://brillout.github.io/star-wars"
+            >brillout.github.io/star-wars</a
+        >.
+    </p>
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vike-vue/useData'
+import type { Data } from './+data.js'
+
+const { movies } = useData<Data>()
+</script>

pages/star-wars/index/+data.ts

@@ -0,0 +1,34 @@
+// https://vike.dev/data
+
+import { useConfig } from 'vike-vue/useConfig'
+import type { Movie, MovieDetails } from '../types.js'
+
+export type Data = Awaited<ReturnType<typeof data>>
+
+export async function data() {
+    // https://vike.dev/useConfig
+    const config = useConfig()
+
+    const response = await fetch(
+        'https://brillout.github.io/star-wars/api/films.json',
+    )
+    const moviesData = (await response.json()) as MovieDetails[]
+
+    config({
+        // Set <title>
+        title: `${moviesData.length} Star Wars Movies`,
+    })
+
+    // We remove data we don't need because the data is passed to the client; we should
+    // minimize what is sent over the network.
+    const movies = minimize(moviesData)
+
+    return { movies }
+}
+
+function minimize(movies: MovieDetails[]): Movie[] {
+    return movies.map((movie) => {
+        const { title, release_date, id } = movie
+        return { title, release_date, id }
+    })
+}