Плагин в Nuxt

Давайте познакомимся с минимальным плагином. Его задача - один раз при создании приложения подготовить значение, которое страницы смогут показать позже через общий доступ к экземпляру Nuxt.

Файлы плагинов лежат в app/plugins. Структура для нашего примера:

/app/
- /plugins/
  - hello.js
- /pages/
  - index.vue

Nuxt автоматически подключает каждый файл из этой папки. Отдельно прописывать плагин в nuxt.config.ts не нужно. Имя hello.js выбираем сами - важно только расширение и экспорт через defineNuxtPlugin.

Создадим плагин hello.js. Внутри вернём объект с полем provide и строкой, которую удобно вывести на главной:

export default defineNuxtPlugin(() => {
	return {
		provide: {
			siteLabel: 'Demo store',
		},
	};
});

Колбэк в defineNuxtPlugin выполняется при старте приложения, до первого роута. После этого siteLabel остаётся в контексте Nuxt, и любая страница сможет прочитать его через функцию доступа к приложению, который разберём отдельно.

Плагин без такого эффекта слабо заметен в учебном проекте: пустой файл формально подходит под правила, но не показывает, зачем нужен каталог plugins. Достаточно одной строки в provide, чтобы связь «файл при старте - данные на странице» стала наглядной.

Порядок файлов в app/plugins Nuxt выстраивает по имени. Если плагинов несколько, каждый получает свой колбэк при том же запуске; страницы не знают, из какого файла пришло значение, им важен только ключ в provide.

Создайте файл плагина welcome.js в app/plugins с экспортом через defineNuxtPlugin и строкой в provide для приветствия на английском.

Создайте второй плагин notice.js, который при старте отдаёт через provide короткую английскую фразу для подписи в подвале сайта.