fix: replace +title with useConfig()

boilerplates/react/files/pages/star-wars/@id/+data.ts

@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (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;
 };
 

boilerplates/react/files/pages/star-wars/index/+data.ts

@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-react/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // 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;
 };
 

boilerplates/solid/files/pages/star-wars/@id/+data.ts

@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-solid/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (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;
 };
 

boilerplates/solid/files/pages/star-wars/index/+data.ts

@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-solid/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // 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;
 };
 

boilerplates/vue/files/pages/star-wars/@id/+data.ts

@@ -2,15 +2,26 @@
 
 import type { PageContextServer } from "vike/types";
 import type { MovieDetails } from "../types.js";
+import { useConfig } from "vike-vue/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async (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;
 };
 

boilerplates/vue/files/pages/star-wars/index/+data.ts

@@ -1,15 +1,26 @@
 // https://vike.dev/data
 
 import type { Movie, MovieDetails } from "../types.js";
+import { useConfig } from "vike-vue/useConfig";
 
 export type Data = Awaited<ReturnType<typeof data>>;
 
 export const data = async () => {
+  // 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 { data: movies };
 };