# content

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

[Nuxt Content](https://content.nuxt.com) читает каталог [`content/`](/docs/3.x/directory-structure/content/) и разбирает файлы `.md`, `.yml`, `.csv` и `.json`, превращая их в файловую CMS.

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

<read-more target="_blank" to="https://content.nuxt.com">

Подробнее читайте в документации **Nuxt Content**.

</read-more>

## Включение Nuxt Content

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

```bash [Терминал]
npx nuxt module add content
```

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

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

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

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

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

Для отображения страниц с контентом добавьте [маршрут «для всех»](/docs/3.x/directory-structure/pages/#catch-all-route) с помощью компонента [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer):

```vue [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>
```

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

<tip icon="i-lucide-book">

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

</tip>