Изучите Nuxt с коллекцией из 100+ советов!

content

Используйте директорию content/ для создания файловой CMS для вашего приложения.

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

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

Включение Nuxt Content

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

Terminal
npx nuxi module add content

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

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

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

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

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

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

pages/[...slug].vue
<template>
  <main>
    <!-- ContentDoc возвращает содержимое для `$route.path` по умолчанию, или вы можете передать свойство `path` -->
    <ContentDoc />
  </main>
</template>

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

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