Добавление стилей
Стили можно добавлять в view.js компонента, используя тег <style>. Эффективнее использовать CSS-фреймворки, например, Bootstrap, Tailwind CSS или Material UI. В этом примере используется Bootstrap.
Установка Bootstrap
Bootstrap можно подключить через CDN, добавить файл или установить через npm. Удобнее использовать модуль Nuxt.js. На сайте nuxtjs.com/modules можно найти модули для Nuxt.js. Для UI выберем модуль Bootstrap. После поиска модуля Bootstrap, скопируйте команду установки из инструкции и выполните её в терминале проекта (остановите сервер перед установкой). Команда загрузит и добавит модуль.
После установки, подключите модуль в nuxt.config.js. Добавьте свойство modules со значением [‘~modules/bootstrap-vue’].
После добавления модуля, используйте его компоненты. Документация по модулю и Bootstrap поможет разобраться с использованием компонентов и классов.
Использование компонентов Bootstrap
Пример использования компонента Alert из Bootstrap: <b-alert variant=»primary»>. Документация содержит примеры для создания различных элементов интерфейса.
Добавим блок Alert на сайт. После запуска сервера, блок отобразится со стилями Bootstrap. Bootstrap также добавит стили к ссылкам и заголовкам.
Для стилизации шапки сайта, использованы классы Bootstrap, такие как bg-dark, p-3, nav-link, text-white. Также добавлены собственные CSS-селекторы для стилизации ссылок при наведении курсора. Для стилизации активной ссылки используется класс router-link-exact-active, автоматически добавляемый Nuxt.js к активной ссылке компонента <NuxtLink>.
Создание шаблонов
Копирование шапки на каждую страницу неэффективно. Создайте отдельный шаблон, содержащий повторяющийся код. Создайте папку layouts и в ней файл default.vue. Переместите код шапки в этот файл.
В шаблоне используйте тег <slot>, который будет заменять содержимое каждой страницы. Удалите код шапки из файлов страниц и обновите страницу. Шаблон будет применяться ко всем страницам.
Использование разных шаблонов
Для разных страниц создайте отдельный шаблон, например, users.vue. В файлах страниц, использующих этот шаблон, в definePageMeta() укажите используемый шаблон, например, layout: ‘users’.
В этом примере добавлен футер в шаблон users.vue. Страницы в директории pages/users будут использовать этот шаблон с футером.
Дополнительные стили
Для отступов к основному контенту, добавим класс container к основному блоку и навигации. Установим margin-top и margin-bottom для отступов сверху и снизу. Аналогичные изменения внесите и для шаблона users.vue.
В этом примере показано использование шаблонов и добавление стилей в Nuxt.js приложения с помощью Bootstrap. Использование шаблонов и CSS-фреймворков упрощает разработку и улучшает внешний вид веб-сайта.