Как правильно зарегистрировать плагин в nuxt.js
По моему мнению, официальная документация nuxt.js в недостаточной мере раскрывает процесс внедрения плагина в ваше приложение, поэтому хочу рассказать об этом поподробней.
Cначала я покажу какие НЕправильные варианты я встречал на своем пути разработчика.
Внимание, это НЕправильный вариант!
Vue.use({
install(Vue) {
// Тут инициализируется плагин, затем добавляется в прототип Vue под аллиасом $plugin
Vue.prototype.$plugin = $plugin
}
})// Затем импортируется функция, которая возвращает сам плагин
// Это требуется для асинхронного получения плагина
export default () => $plugin
И даже встречал такое изобретение.
Внимание, это тоже НЕправильный вариант!
export default {
install (Vue) {
// Тут загрязняется глобальный объект Vue, в плагинах мы имеем доступ к плагину под аллиасом plugin
// в компонентах после инициализации Vue, по аллиасу $plugin
Vue.prototype.$plugin = Vue.plugin = plugin
}
}
Итак, давайте найдем правильное решение. Вот пример из официальной документации, но как видите, не самый развернутый. Давайте разбираться!
import Vue from 'vue'
import VueI18n from 'vue-i18n'// Установили i18n в прототип
Vue.use(VueI18n)export default ({ app }, inject) => {
// В данном случае мы добавили плагин в наше приложение и это
// даст возможность обратится к нему из middleware и на страницах в `asyncData`/`fetch`
app.i18n = new VueI18n({})
}
Но есть еще одна проблема, как обратиться к плагину i18n из другого плагина?
Например, у меня есть плагин, который показывает нотификации на страницах и я хочу показывать переведенные нотификации.
Если вы подумали о простом импорте, то это не сработает из-за асинхронного подключения плагинов. В момент подключения плагина нотифицкации, плагин переводов скорее всего еще не подключен и вы получите undefined.
Тут к нам на помощь приходит функция inject, которая приходит вторым параметром и которую нужно вызвать с двумя параметрами, чтобы заинжектить плагин.
Первый параметр типа String — это название нашего плагина, к которому прибавится префикс $, наш плагин будет доступен в ctx.app.$pluginName , в плагинах и this.$pluginName в компонентах.
Второй параметр типа Function — это наш плагин, функция которая будет выполняться при вызове $pluginName().
Внимание, правильный вариант, в случае если вам требуется получить доступ к одному плагину, в другом.
Перепишем официальный пример на:
export default (ctx, inject) => {
inject('i18n', new VueI18n())
}
Теперь в плагине, где нужен плагин переводчик мы имеем доступ вот так:
export default ({ app }) => {
app.$i18n() // ура работает
}
Ну, а если вам не требуется доступ к вашему новосозданному плагину из других плагинов, то делаем так, как показано в официальной документации:
export default ({ app }) => {
// Будет доступен в компонентах через this.$i18n
app.i18n = new VueI18n()
}