Меню материалов в Nuxt

Список на одной странице не заменяет боковое меню раздела. Модуль умеет собрать дерево ссылок по структуре файлов через функцию queryCollectionNavigation. Она возвращает элементы с title и path, готовые для NuxtLink.

Для коллекции blog запросим дерево в useAsyncData и выведем один уровень пунктов:

<script setup>
	const { data: menu } = await useAsyncData(
		'blog-menu',
		() => queryCollectionNavigation('blog'),
	);
</script>
<template>
	<nav>
		<ul>
			<li
				v-for="item in menu"
				:key="item.path"
			>
				<NuxtLink :to="item.path">
					{{ item.title }}
				</NuxtLink>
			</li>
		</ul>
	</nav>
</template>

Порядок пунктов следует расположению файлов в content/blog. Если появятся вложенные папки, у узлов могут быть children, но для плоского блога достаточно одного цикла по корню дерева.

Тот же блок nav можно вынести в компонент и показывать на всех страницах раздела, чтобы меню не зависело от ручного списка заголовков.

Сделайте боковое меню для коллекции guides с заголовками и ссылками на материалы справочника.

Выведите навигацию коллекции news в подвале сайта списком ссылок на английские заголовки.