content

Каталог content/ и модуль Nuxt Content — файловая CMS на Markdown и других форматах.

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

  • Отображайте контент встроенными компонентами.
  • Запрашивайте контент с помощью API, похожего на MongoDB.
  • Используйте компоненты Vue в файлах Markdown с синтаксисом MDC.
  • Автоматически генерируйте навигацию.
Подробнее читайте в документации Nuxt Content.

Включение Nuxt Content

Установите модуль @nuxt/content в проект, а также добавьте его в nuxt.config.ts с помощью одной команды:

Терминал
npx nuxt module add content

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

Поместите файлы разметки в директорию content/:

content/index.md
# Привет, контент

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

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

Для отображения страниц с контентом добавьте маршрут «для всех» с помощью компонента <ContentRenderer>:

pages/[...slug].vue
<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>

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

Перейдите по ссылке https://content.nuxt.com, чтобы узнать больше о функциях модуля Content, например, о том, как создавать запросы и использовать компоненты Vue в файлах Markdown с синтаксисом MDC.