next/pages/story/[id]/chapters.vue

<script lang="ts" setup>
	import { storyMiddleware } from "@client/middleware";
	import { IStory } from "@models/stories";

	definePageMeta({
		middleware: [storyMiddleware],
	});
	const rtr = useRoute();
	const { data: story, error } = await useApiFetch<IStory>(`/story/${rtr.params.id}`);
</script>

<template>
	<a-list :data-source="story.chapters">
		<template #renderItem="{ item, index }">
			<a-list-item>
				<a-list-item-meta>
					<template #title>
						<b>
							<nuxt-link :to="`/story/${story._id}/${index + 1}`">
								{{ item.title || "Untitled" }}
							</nuxt-link>
						</b>
					</template>
				</a-list-item-meta>
				<div v-html="item.summary"></div>
			</a-list-item>
		</template>
	</a-list>
</template>