Компоненты в приложении Nuxt

Крупное приложение удобно делить на независимые части: шапку, список товаров, карточку пользователя, подвал. Каждая такая часть живёт отдельно, её проще менять и переиспользовать на разных страницах.

Во Vue такие части называют компонентами. В Nuxt они устроены так же: файл .vue с блоками script setup и template, знакомыми вам по работе со страницами.

Страницы из папки app/pages тоже являются компонентами, но имеют особую роль: по имени файла строится адрес сайта, а вывод страниц идёт через NuxtPage в app.vue. Обычные компоненты адресов не создают - их подключают туда, где нужен повторяющийся или выделенный блок.

Файлы таких компонентов лежат в папке app/components. Nuxt сам находит их при сборке и подключает ко всем страницам и другим компонентам. Импорт в начале файла и регистрация в опции components, как во чистом Vue, не нужны: достаточно положить файл в components и использовать тег с подходящим именем в шаблоне.

Компонент можно вставить в шаблон страницы из pages, в app.vue или внутрь другого компонента. Имя тега связано с именем файла и с папками внутри components.

Отдельно в Nuxt есть способы выводить разметку только в браузере или только при SSR на сервере. Они нужны, когда код обращается к объектам вроде window или когда секретные данные не должны попадать в клиентский бандл. Эти приёмы тоже входят в этот раздел.