Список материалов в Nuxt

Давайте изучим загрузку всей коллекции разом. Модуль предоставляет функцию queryCollection: она возвращает цепочку методов, а завершить выборку можно вызовом all. Результат удобно положить в функцию useAsyncData, как при любом асинхронном запросе.

Для примера возьмём коллекцию blog с маской blog/**/*.md и заметку content/blog/first.md с заголовком First post и адресом /blog/first.

На странице списка запросим все записи и сохраним их в posts:

<script setup>
	const { data: posts } = await useAsyncData(
		'blog',
		() => queryCollection('blog').all(),
	);
</script>
<template>
	<p>
		Blog
	</p>
</template>

В шаблоне массив доступен как posts. У каждого элемента есть title и path. Выведем список ссылок через NuxtLink:

<script setup>
	const { data: posts } = await useAsyncData(
		'blog',
		() => queryCollection('blog').all(),
	);
</script>
<template>
	<h1>
		Blog
	</h1>
	<ul>
		<li
			v-for="post in posts"
			:key="post.path"
		>
			<NuxtLink :to="post.path">
				{{ post.title }}
			</NuxtLink>
		</li>
	</ul>
</template>

Адрес /blog ведёт на индекс раздела, а post.path указывает на конкретную заметку, например /blog/first. Новые файлы в content/blog появятся в списке после переиндексации без правок цикла в шаблоне.

Сделайте страницу /news, которая через useAsyncData и функцию queryCollection выводит заголовки всех материалов коллекции news со ссылками по path.

Сделайте страницу /staff со списком сотрудников из коллекции staff в том же формате списка ссылок.