Оглавление
Nuxt
Фреймворк на Vue для сайтов и приложений: маршруты на файлах, загрузка данных и серверные API.
1.Начало работы
- Что такое NuxtЧто Nuxt добавляет к Vue, какие задачи он решает и какую версию изучает курс.
- Создание проектаКак создать проект командой npm create nuxt@latest, запустить его и что лежит в папках.
- app.vue и NuxtPageКорневой компонент приложения и место, где выводится текущая страница.
- Страницы и маршруты из файловКак файлы в папке app/pages превращаются в адреса сайта.
- Навигация: NuxtLink и navigateToСсылки между страницами без перезагрузки и переход на другую страницу из кода.
- МакетыОбщая обёртка страниц: макет по умолчанию, второй макет и выбор макета для страницы.
2.Маршруты
- Динамические маршрутыОдна страница для многих адресов: параметры в квадратных скобках и useRoute.
- Вложенные маршрутыСтраница внутри страницы: родительский файл, папка с дочерними страницами и NuxtPage.
- Middleware маршрутовПроверка перед открытием страницы: перенаправление, отмена перехода и глобальные проверки.
3.Компоненты и состояние
- Компоненты и автоимпортГде лежат компоненты, как Nuxt подключает их без import и как называются компоненты из подпапок.
- Composables и утилитыПапки app/composables и app/utils: общие функции, которые подключаются без import.
- ПлагиныКод, который выполняется при запуске приложения: общие помощники, директивы и подключение библиотек Vue.
- Общее состояние: useStateДанные, общие для нескольких компонентов, которые безопасно передаются с сервера в браузер.
- Pinia в NuxtПодключение хранилища Pinia модулем @pinia/nuxt, хранилище избранных статей и его использование.
4.Серверная часть
- Серверные маршрутыПапка server/api: обработчики запросов на сервере, методы HTTP в имени файла и ответ в JSON.
- Параметры, запрос и тело в обработчикахКак серверный обработчик читает параметр адреса, строку запроса и тело запроса, и как он сообщает об ошибке.
- Хранение данных на сервереВстроенное хранилище Nitro: настройка в nuxt.config.ts, чтение и запись, статьи и комментарии на диске.
5.Загрузка данных
- Загрузка данных: useFetchКак страница получает данные из API так, чтобы они пришли вместе с HTML и не загружались дважды.
- useAsyncData и $fetchФункция $fetch для запросов из кода и useAsyncData для загрузки данных любым способом.
- Загрузка, ошибки и обновление данныхПоля status, error и refresh у useFetch, ленивая загрузка и повторный запрос по кнопке.
- Формы: отправка данных на серверФорма новой статьи и форма комментария: $fetch с методом POST, ошибки сервера и обновление списка.
- Страница ошибки и createErrorСвой файл app/error.vue, ошибка 404 для несуществующей статьи и возврат на сайт функцией clearError.
6.Настройка сайта
- Настройки и переменные окруженияruntimeConfig в nuxt.config.ts, файл .env, секретные и публичные значения и функция useRuntimeConfig.
- SEO и мета-теги: useHead и useSeoMetaЗаголовок вкладки, описание и мета-теги для соцсетей на каждой странице и для всего сайта.
- Картинки, файлы и стилиРазница между папками public и app/assets, общий файл стилей и стили компонентов.
- Модули NuxtЧто такое модуль, как его установить командой nuxi module add и как настроить, на примере @nuxt/image.
- Аутентификация: обзорВход в панель управления блогом с модулем nuxt-auth-utils: сессия, страница входа, защита страниц и API.
7.Публикация
- Режимы отрисовки: SSR, SSG и гибридныйГде и когда собирается HTML страниц: на сервере, в браузере, заранее при сборке, и как смешать режимы через routeRules.
- Основы тестированияVitest и @nuxt/test-utils: настройка, тест функции и тест компонента с mountSuspended.
- Сборка и публикацияКоманды build, preview и generate, папка .output, запуск на сервере Node.js и пресеты Nitro для хостингов.