Введение в макеты в Nuxt

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

Поэтому общие части выносят в отдельную оболочку - макет. Макет задаёт рамку, которая остаётся на месте, когда пользователь переходит между адресами. Меняется только содержимое внутри этой рамки - тот текст и блоки, которые относятся к одному конкретному URL.

Nuxt разделяет эти роли явно. Файлы в app/pages описывают страницы: уникальный контент для каждого адреса. Файлы макетов лежат в app/layouts и описывают то, что должно быть общим для группы страниц или для всего сайта.

Корневой компонент app/app.vue связывает макет и текущую страницу. Компонент NuxtLayout подставляет нужный файл из layouts, а NuxtPage - содержимое файла из pages, который соответствует запрошенному пути.

Так проще держать единый вид сайта и не смешивать общую оболочку с текстом отдельной страницы. При этом у проекта может быть несколько макетов: например, публичная часть и отдельная зона администратора с другой шапкой и другим оформлением.

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