Описание директории layouts

Папка содержит шаблоны приложения (самые высокоуровневые layouts > pages > componets).

Внимание

Эту папку переименовать нельзя.

У нас:

1. Это какие-то общие сетки форматирования сайта, главные контейнеры.
2. Что касается layout (макет, разметка), их конечно можно поместить в каждый components, но качественный код - это модульный код. То есть если много разного функционала использует общие части шаблона сайта, например общий каркас, верхний топбар с меню и так далее, это нужно выносить в отдельные части.

Во многих случаях, в том числе в принципах хорошего тона при работе с Vue.js в том числе его библиотеки UI-элементов (UI-фреймворке) Vuetify.js базовые контейнеры разметки шаблона, которые именуются layout принято выносить в отдельную папку. В Vuetify раньше до версии 2.Х даже верхние главные теги прямо так назывались, на сколько я помню, <v-layout>. Но поскольку это более общее слово, чтобы не было путаницы, во второй версии от этого отошли. В целом это называется «сетка» ну или «решётка», если переводить на прямую с английского Grid system, вот тут по ссылке написано про это во Vuetify. А вообще у UI-фреймворков есть обычно в быстром старте базовая разметка, базовые шаблоны, которые копируешь себе как раз в папку layout, и потом эту базовую разметку везде подключаешь. Во Vuetify на сайте такой раздел называется «Pre-made layouts» ну то есть «Готовые макеты» или «Готовая разметка». Там представлены наиболее популярные решения, типа самый базовый или с меню которое убирается и по разному себя ведёт (адаптивно) в разных устройствах с разным размером экрана. Можно нажать на одну кнопку и посмотреть как это выглядит, нажать на другую и откроется в их Git код который от туда можно скопировать.