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

Плагины в Nuxt.js

У нас есть такой замечательный инструмент, который называется плагины. Как и в любом другом инструменте, плагины — это расширение нашего приложения, которое мы разрабатываем. Точно так же и в Nuxt.js плагины дают возможность расширить функциональность нашего приложения, добавить новые функции и заставить его делать что-то глобально, на глобальном уровне.

Таким образом, у нас есть наше приложение на Nuxt.js, и мы можем добавлять в него дополнительный функционал. Давайте посмотрим, что собой представляют плагины на Nuxt.js и как мы можем их использовать. Рассмотрим теоретические основы.

Создание плагина

Для плагинов у нас существует специальная директория, которая называется plugins. В этой директории для каждого плагина мы создаем отдельный JavaScript или TypeScript файл, в зависимости от того, в каком режиме работает ваше приложение.

Я создал файл на TypeScript, потому что у меня приложение работает в режиме TypeScript. Основная глобальная функция, которая позволяет нам добавить плагин — это функция defineNuxtPlugin.

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('testPlugin', () => {
    console.log('This is a custom plugin!')
  })
})

Благодаря ей мы определяем, что в нашем приложении существует такой плагин. Как аргумент этой функции мы получаем NuxtApp. NuxtApp — это, по сути, глобальный объект нашего Nuxt-приложения, с которым мы можем взаимодействовать и каким-то образом его расширять.

Например, мы можем воспользоваться методом provide у этого глобального объекта NuxtApp, то есть нашего приложения. Этот метод позволяет нам добавить в наш глобальный объект некую функцию, которую мы можем использовать. Нужно придумать имя этой функции, например, TestPlugin, и прописать её функционал. Например, эта функция будет выводить в консоль случайный текст.

После того как мы добавили плагин в папку plugins, чтобы наше Nuxt.js приложение увидело этот файл, нам нужно зайти в файл nuxt.config.ts, который находится в корне нашего проекта, и найти там опцию plugins. В этой опции прописывается путь до плагина, который мы хотим активировать.

Создав файл, мы как бы создали этот плагин, но для того чтобы его активировать, нужно указать путь до папки plugins в файле nuxt.config.ts и активировать наш тестовый плагин.

plugins: ['~/plugins/testPlugin.ts']

Использование плагина

Теперь мы можем использовать наш плагин глобально в компоненте. В любом месте компонента мы можем воспользоваться плагином и выполнить какие-то действия. Например, получить метод из нашего плагина с помощью функции useNuxtApp, которая получает глобальный объект нашего приложения, и выбрать оттуда добавленную нами функцию TestPlugin. Эта функция будет выводить текст в консоль. Мы вызываем её в нашем компоненте, открываем страницу и видим, что наш кастомный плагин отработал, и надпись появилась в консоли.

<script setup>
const { $testPlugin } = useNuxtApp()

$testPlugin()
</script>

Использование знака $ является обязательным. Это такая конструкция, которая позволяет нам обратиться к методу, находящемуся внутри нашего плагина, так устроено в Nuxt.js.

Преимущества использования плагинов

Таким образом, благодаря плагинам вы можете добавлять различные системы аналитики на сайт, например, коды систем аналитики, чтобы быстро внедрить их во все компоненты вашего проекта. Вы можете настраивать axios или другие сторонние библиотеки, добавляя к ним дополнительные настройки. Это расширяет функциональность приложения в любом его месте.