Как правильно зарегистрировать плагин в 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()
}