Введение в материалы в Nuxt

Многие сайты живут на текстах: статьи блога, новости, справочные разделы, описания услуг. Если для каждой заметки заводить отдельный файл страницы Vue и вручную копировать заголовок и абзацы в шаблон, проект быстро разрастается и тяжело редактируется.

Удобнее хранить такие тексты в Markdown (лёгкая разметка для заголовков и списков). Автор правит обычный файл с короткой шапкой в начале, а приложение само подставляет заголовок на экран и собирает оглавление. Модуль @nuxt/content в связке с Nuxt 4 как раз решает эту задачу: материалы лежат рядом с кодом, но не смешиваются с логикой интерфейса.

В третьей версии модуля контент организуют через коллекции. В корне проекта задаётся файл content.config.ts: там указывают, какие папки с файлами относятся к одной теме, например к блогу или к справочнику. Коллекция типа page описывает материалы, у которых есть адрес на сайте, заголовок, описание и тело текста. Nuxt индексирует файлы и отдаёт их через автоимпортируемые функции запроса, без ручного парсинга Markdown в каждой странице.

Типичный сценарий выглядит так. В каталоге content лежат файлы .md с шапкой и текстом. Конфиг связывает маску путей с именем коллекции. На одной странице Vue вы загружаете список всех записей и выводите ссылки по полю path. На другой, часто одной общей для всего раздела, подтягиваете одну запись по адресу и показываете заголовок, краткое описание и HTML-тело через готовый компонент рендеринга. Отдельные функции строят меню по структуре папок и ссылки «предыдущий - следующий» между соседними материалами.

Такой подход не отменяет обычные страницы Vue: шапка сайта, подвал и общая вёрстка по-прежнему живут в app/pages и app/components. Меняется источник данных для текстовых блоков. Редактор правит Markdown, разработчик один раз настраивает коллекцию и шаблон списка, а новые статьи появляются на сайте после сохранения файла без новых роутов на каждый заголовок.

В разделе мы опираемся на JavaScript-проект Nuxt 4: страницы в app/pages, script setup без lang="ts", загрузка через функцию useAsyncData, которую вы уже использовали для своих запросов. Схемы валидации и сторонние описатели полей здесь не нужны: у страничных коллекций уже есть встроенные title, description, body и path. Дополнительно разберём коллекции типа data для справочников, которые не становятся отдельными URL, но участвуют в шаблонах наряду с текстами.