Коллекция данных в Nuxt

Не каждый файл должен открываться по URL. Справочники авторов, настроек или меток удобнее хранить отдельно от статей. Для этого в content.config.ts задают коллекцию с типом data: записи участвуют в запросах, но не становятся страницами маршрутизации.

Давайте изучим коллекцию authors для файлов authors/**.yml. Конфиг может содержать только эту группу:

import {
	defineCollection,
	defineContentConfig,
} from '@nuxt/content';

export default defineContentConfig({
	collections: {
		authors: defineCollection({
			type: 'data',
			source: 'authors/**.yml',
		}),
	},
});

Один элемент справочника лежит в content/authors/ada.yml:

name: Ada

Загрузим всех авторов функцией queryCollection и выведем имя на странице:

<script setup>
	const { data: authors } = await useAsyncData(
		'authors',
		() => queryCollection('authors').all(),
	);
</script>
<template>
	<ul>
		<li
			v-for="author in authors"
			:key="author.name"
		>
			{{ author.name }}
		</li>
	</ul>
</template>

Страница /authors обычная Vue-страница: коллекция data не создаёт для ada.yml адрес /authors/ada. Те же данные можно подмешивать в шаблон статьи рядом с страничной коллекцией.

Опишите коллекцию offices типа data для offices/**.yml и выведите названия офисов списком на странице /offices.

Создайте коллекцию tags для YAML в content/tags и покажите поле label каждой записи на отдельной странице каталога меток.