content

Nuxt Content читает директорию content/ в проекте и разбирает файлы .md, .yml, .csv и .json, создавая файловый CMS.

• Рендер контента встроенными компонентами.
• Запросы к контенту через API в стиле MongoDB.
• Использование Vue-компонентов в Markdown с синтаксисом MDC.
• Автоматическая генерация навигации.

Подключение Nuxt Content

Установите модуль @nuxt/content и добавьте его в nuxt.config.ts одной командой:

npx nuxt module add content

Создание контента

Размещайте markdown-файлы в директории content/:

# Hello Content

Модуль автоматически загружает и разбирает их.

Рендер контента

Чтобы рендерить страницы контента, добавьте catch-all маршрут с компонентом <ContentRenderer>:

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer
      v-if="page"
      :value="page"
    />

    <footer><!-- ... --></footer>
  </div>
</template>

Документация