initial-commit

pages/star-wars/@id/+Page.vue

@@ -0,0 +1,15 @@
+<template>
+    <h1>{{ movie.title }}</h1>
+    Release Date: {{ movie.release_date }}
+    <br />
+    Director: {{ movie.director }}
+    <br />
+    Producer: {{ movie.producer }}
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vike-vue/useData'
+import type { Data } from './+data.js'
+
+const { movie } = useData<Data>()
+</script>

pages/star-wars/@id/+data.ts

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