Текст материала в Nuxt

Заголовка мало: пользователь ожидает абзацы из файла. Тело хранится в поле body, но выводить его как сырую строку неудобно - разметка Markdown должна стать HTML. Для этого в @nuxt/content есть компонент ContentRenderer.

Давайте познакомимся с типовой страницей заметки. Сначала загрузим запись коллекции blog по path, затем передадим объект в рендерер:

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

Проп value принимает весь объект страницы, не только строку body. Модуль сам возьмёт разобранный Markdown и соберёт разметку внутри обёртки. Текст Hello from the post. из first.md появится как обычный абзац HTML.

Условие v-if защищает от рендера до завершения useAsyncData. На сервере HTML тела уже может попасть в ответ, что полезно для поисковых систем.

На странице одной новости коллекции news выведите заголовок и тело через ContentRenderer.

На странице материала справочника guides покажите полный текст заметки тем же компонентом после загрузки записи.