Введение в плагины в Nuxt

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

В Nuxt для такой одноразовой подготовки служат плагины. Это обычные файлы JavaScript в папке app/plugins. Каждый из них выполняется в момент создания приложения: до того, как заработает навигация и отрисуется первая страница из NuxtPage. Логика плагина не повторяется при каждом переходе между адресами - она отрабатывает на старте и оставляет результат доступным дальше.

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

Файл плагина экспортирует функцию, обёрнутую в defineNuxtPlugin. Nuxt сам находит все файлы в app/plugins и подключает их без отдельной регистрации в nuxt.config.ts. Скелет выглядит так:

Код внутри колбэка может обращаться к объекту приложения, вешать хуки, возвращать объект с полем provide и тем самым отдавать страницам готовые функции или строки. Часть плагинов должна выполняться только в браузере или только на сервере - для этого в имени файла используют суффиксы .client и .server, чтобы Nuxt не запускал модуль на «чужой» стороне.

В высшем учебнике мы остаёмся на JavaScript и структуре Nuxt 4 с корнем app/app.vue. Примеры плагинов не тянут сторонние библиотеки: достаточно встроенного defineNuxtPlugin, функции useNuxtApp на страницах и привычных файлов в app/pages. Такой слой удобно держать рядом с функциями из app/composables: функция описывает переиспользуемую логику состояния, плагин один раз готовит окружение для всего приложения.

Если представить запуск сайта как цепочку, плагины стоят в начале: сервер или браузер создаёт экземпляр Nuxt, прогоняет файлы из app/plugins, и только затем монтируется дерево с NuxtLayout и страницами. Благодаря этому общие вещи не размазаны по десятку script setup блоков, а собраны в явных точках входа, которые легко найти по имени файла в каталоге плагинов.