Основы Nuxt

Nuxt.js: фреймворк на базе Vue с серверным рендерингом, маршрутизацией и управлением мета-тегами.

Установка Nuxt 3: требования к версии Node.js, развёртывание проекта через npm и запуск локального сервера.

Описание файла app.vue как входной точки проекта Nuxt, его роль в рендеринге контента и отличие от стандартного подхода Vue с файлом main.js.

Nuxt компоненты (components)

Папка components в Nuxt: хранение переиспользуемых компонентов Vue и их подключение без явного импорта.

Роутинг и pages в Nuxt

Описание структуры директории `pages` в Nuxt и принципов файлового роутинга: создание страниц, компонент `NuxtPage`, автоматическое формирование маршрутов на основе файловой структуры проекта.

Передача параметра в роуте Nuxt

Передача и получение параметров маршрута в Nuxt.js: создание динамических роутов через файловую структуру с использованием `[id].vue` и доступ к параметрам через `$route.params` в шаблоне и `useRoute()` в скрипте.

Директория public Nuxt

Описание директории public в Symfony — хранение статичных файлов (изображений, PDF, CSS, JS), особенности размещения и пример вывода картинки в шаблоне.

Директория assets в Nuxt

Директория assets в Nuxt.js предназначена для хранения статических файлов, которые обрабатываются системой сборки и недоступны публично. Рассмотрен пример подключения SCSS-файлов: установка необходимых пакетов и настройка nuxt.config.js.

Подключаем файл css в Nuxt

Обзор способов подключения CSS стилей в Nuxt.js — через тег link, директиву @import и глобальное подключение в nuxt.config.js.

Знакомство с макетами layouts Nuxt

Директория layouts в Nuxt используется для создания макетов с повторяющимися элементами страниц — шапкой, подвалом, боковой колонкой. Рассмотрен процесс создания макета default.vue и его подключение через компоненты NuxtLayout и NuxtPage.

Как в Nuxt добавлять мета тэги и тэги в область head страниц

Способы добавления метатегов в Nuxt: глобальная настройка через nuxt.config.ts и локальное добавление на отдельных страницах с помощью useHead.

Nuxt dev tools. Панель разработчика.

Nuxt DevTools: панель для разбора структуры проекта, маршрутов, компонентов и времени рендеринга страниц.

Знакомство с Server и Client site rendering Nuxt

Как выполнять код только на клиенте или сервере

Пример ошибки client rendering и особенность хука onMounted

Что такое плагины в Nuxt. Создаем простой плагин.

Плагины Nuxt: функция defineNuxtPlugin, регистрация в nuxt.config.ts и вызов своего метода в компоненте.

Заставляем Nuxt плагин работать только на сервере или только на клиенте

Создание плагина Nuxt через объектный подход

Как глобально на всех страницах вызывать функцию плагина