Страница материала в Nuxt

Список ведёт на отдельные тексты. Для одной заметки нужен другой конец цепочки запроса: после функции queryCollection задают фильтр по path и берут первый результат методом first.

Пусть в коллекции blog лежит content/blog/first.md с адресом /blog/first и заголовком в шапке. Сделаем страницу под этот URL и выведем только заголовок:

<script setup>
	const { data: page } = await useAsyncData(
		'blog-first',
		() => queryCollection('blog')
			.path('/blog/first')
			.first(),
	);
</script>
<template>
	<h1>
		{{ page?.title }}
	</h1>
</template>

Ключ в useAsyncData можно выбрать любой: он кэширует payload между сервером и браузером. Строка /blog/first в path должна совпадать с полем path записи, иначе page останется пустым.

Такой файл страницы подходит, когда адресов мало. Для целого раздела позже удобнее один динамический роут и useRoute, но приём path и first остаётся тем же.

Сделайте страницу /guides/start, которая загружает материал коллекции справочника по его path и показывает заголовок в h1.

Сделайте страницу /news/welcome с заголовком одной новости из коллекции news тем же способом.