Структура каталогов Nuxt

У Nuxt есть соглашённая структура каталогов: так проще ориентироваться и держать проект единообразным.

Корень проекта

Корень — это каталог с файлом nuxt.config.ts. В нём задаётся конфигурация приложения.

Каталог приложения

Связано с универсальным (клиент+сервер) приложением:

• assets/: ресурсы, которые обрабатывает сборщик (Vite или webpack)
• components/: Vue-компоненты
• composables/: композаблы Vue
• layouts/: обёртки страниц без лишнего перемонтирования при навигации
• middleware/: код до перехода на маршрут
• pages/: файловая маршрутизация
• plugins/: плагины Vue и другое при старте приложения
• utils/: утилиты для компонентов, композаблов и страниц

Отдельные файлы:

• app.config.ts: реактивная конфигурация приложения
• app.vue: корневой компонент
• error.vue: страница ошибок

public/

public/ — статика без обработки сборщиком: отдаётся с корня сайта. Подходит для robots.txt, favicon.ico и других файлов с фиксированными именами.

server/

server/ — серверный код:

• api/: API-маршруты
• routes/: серверные маршруты (например динамический /sitemap.xml)
• middleware/: до обработки серверного маршрута
• plugins/: при старте Nitro-сервера
• utils/: утилиты для серверного кода

shared/

shared/ — код, общий для Vue-приложения и сервера Nitro.

content/

content/ используется вместе с модулем Nuxt Content — файловой CMS на Markdown.

modules/

modules/ — локальные модули, расширяющие Nuxt.

layers/

layers/ — переиспользуемые слои: код, компоненты, композаблы и конфигурация; слои из этой папки подключаются автоматически.

Файлы Nuxt

• nuxt.config.ts — основная конфигурация
• package.json — зависимости и скрипты
• tsconfig.json — настройки TypeScript (часто расширяет сгенерированный .nuxt/tsconfig.json)
• .nuxtrc — альтернативный формат (удобно для глобальных настроек)
• .nuxtignore — исключения в корне на этапе сборки