Доступ в приложении в Nuxt

Плагин может вернуть объект с полем provide. Ключи из этого объекта становятся свойствами экземпляра приложения. На странице их читают через функцию useNuxtApp, а в шаблоне к имени добавляют префикс $.

Давайте разберём плагин с функцией приветствия:

export default defineNuxtPlugin(() => {
	return {
		provide: {
			hello: () => 'Hello',
		},
	};
});

На странице вызовем функцию useNuxtApp и возьмём $hello из возвращённого объекта:

<script setup>
	const { $hello } = useNuxtApp();
</script>
<template>
	<p>
		{{ $hello() }}
	</p>
</template>

Префикс $ отличает значения из provide от локальных переменных страницы. Имя после доллара совпадает с ключом в плагине: hello в файле плагина и $hello в компоненте. Функция из плагина можно вызывать в шаблоне так же, как метод компонента.

Тот же приём работает на любом роуте в app/pages: плагин выполнился один раз при старте, а useNuxtApp на каждой странице даёт доступ к уже готовым полям provide.

Сделайте плагин, который через provide отдаёт функцию shopName с английским названием магазина, и выведите результат её вызова на странице через useNuxtApp.

Сделайте плагин с функцией supportEmail в provide и покажите адрес поддержки в шаблоне отдельной страницы каталога.