Структура директорий Nuxt

У приложений Nuxt есть определённая структура директорий, которая используется для организации кода. Эта структура сделана понятной и единообразной.

Корневая директория

Корневая директория приложения Nuxt — это директория, в которой находится файл nuxt.config.ts. Этот файл служит для настройки приложения Nuxt.

Директория app

Директория app/ — основная директория приложения Nuxt. В ней находятся поддиректории:

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

В этой директории также есть отдельные файлы:

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

Директория public

Директория public/ содержит публичные файлы приложения Nuxt. Файлы из неё отдаются по корневому пути и не обрабатываются сборкой.

Подходит для файлов, которым нужно сохранить имя (например, robots.txt) или которые редко меняются (например, favicon.ico).

Директория server

Директория server/ содержит серверный код приложения Nuxt. В ней находятся поддиректории:

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

Директория shared

Директория shared/ содержит общий код для приложения Nuxt и сервера Nitro. Этот код можно использовать и во Vue-приложении, и на сервере Nitro.

Директория content

Директория content/ подключается модулем Nuxt Content. Используется для файлового CMS на основе Markdown.

Директория modules

Директория modules/ содержит локальные модули приложения Nuxt. Модули расширяют функциональность приложения.

Директория layers

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

Файлы Nuxt

• Файл nuxt.config.ts — основная конфигурация приложения Nuxt
• Файл .nuxtrc — альтернативный синтаксис конфигурации (удобен для глобальных настроек)
• Файл .nuxtignore — исключение файлов из корня на этапе сборки