feat: use client-side fetching, update deps

package.json

@@ -17,16 +17,16 @@
 		"@commitlint/config-conventional": "^19.1.0",
 		"@nuxt/eslint-config": "^0.2.0",
 		"@pajecawav/prettier-config": "^1.0.0",
-		"@vite-pwa/nuxt": "^0.6.0",
+		"@vite-pwa/nuxt": "^0.9.0",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"husky": "^9.0.11",
 		"lint-staged": "^15.2.2",
 		"npm-run-all": "^4.1.5",
-		"nuxt": "^3.11.1",
+		"nuxt": "^3.12.3",
 		"prettier": "^3.2.5",
 		"sass": "^1.71.1",
-		"vue-tsc": "^1.8.27"
+		"vue-tsc": "^2.0.24"
 	},
 	"dependencies": {
 		"@heroicons/vue": "^2.1.1",

src/pages/[topic].vue

@@ -1,9 +1,9 @@
 <template>
-	<ErrorMessage v-if="!data">Failed to load items.</ErrorMessage>
+	<ErrorMessage v-if="!items">Failed to load items.</ErrorMessage>
 
 	<template v-else>
 		<div :class="$style.list">
-			<template v-for="(item, index) of data.items" :key="item.id">
+			<template v-for="(item, index) of items" :key="item.id">
 				<span :class="$style.index">{{ startIndex + index }}</span>
 				<div :class="[$style.item, 'item']" :tabindex="-1" @focusin="selectedIndex = index">
 					<h2>
@@ -32,33 +32,33 @@
 			</template>
 		</div>
 
-		<NuxtLink
-			:to="{ path: `/${data.topic}`, query: { page: data.page + 1 } }"
-			:class="$style.moreLink"
+		<NuxtLink :to="{ path: `/${topic}`, query: { page: page + 1 } }" :class="$style.moreLink"
 			>More...</NuxtLink
 		>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { TOPICS } from "../lib/items";
+import { TOPICS, type FeedItem } from "../lib/items";
 
 definePageMeta({
-	validate: route => {
-		return Object.keys(TOPICS).includes(route.params.topic as string);
-	},
-	key: route => route.fullPath,
 	scrollToTop: true,
 });
 
 const ITEMS_PER_PAGE = 30;
 
 const route = useRoute();
+const topic = TOPICS[route.params.topic as keyof typeof TOPICS];
+const page = Math.max(1, +(route.query.page ?? "1") || 1);
 
-const { data } = await useFetch("/api/items", {
-	params: computed(() => ({ topic: route.params.topic, page: route.query.page })),
-});
-const startIndex = computed(() => 1 + ((data.value?.page ?? 1) - 1) * ITEMS_PER_PAGE);
+if (!topic) {
+	throw createError({ statusCode: 404 });
+}
+
+const { data: items } = await useFetch<FeedItem[]>(
+	`https://api.hnpwa.com/v0/${topic}/${page}.json`,
+);
+const startIndex = computed(() => 1 + (page - 1) * ITEMS_PER_PAGE);
 
 const selectedIndex = ref<number>(-1);
 </script>

src/pages/item/[id].vue

@@ -31,13 +31,15 @@
 </template>
 
 <script setup lang="ts">
+import type { Item } from "~/lib/item";
+
 definePageMeta({
 	key: route => route.params.id as string,
 });
 
 const route = useRoute();
 const id = route.params.id as string;
-const { data: item } = await useFetch(`/api/items/${id}`);
+const { data: item } = await useFetch<Item>(`https://api.hnpwa.com/v0/item/${id}.json`);
 
 useHead({ title: () => item.value?.title ?? null });
 

src/pages/user/[name].vue

@@ -27,14 +27,18 @@
 </template>
 
 <script setup lang="ts">
+import type { User } from "~/lib/user";
+
 definePageMeta({
 	key: route => route.params.name as string,
 	alias: ["/u/:name"],
 });
 
 const route = useRoute();
 
-const { data: user } = await useFetch(`/api/users/${route.params.name}`);
+const { data: user } = await useFetch<User>(
+	`https://api.hnpwa.com/v0/user/${route.params.name}.json`,
+);
 
 useHead({ title: user.value?.id });
 </script>