Перевод от автора.

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

Во-первых, я покажу, какие НЕ правильные реализации я встречал на своем пути разработки.

Внимание, это НЕ правильная реализация!

Vue.use({
 install(Vue) {
  // here the plugin is initialized
  // then added to the prototype Vue under $plugin allias
  Vue.prototype.$plugin = $plugin
 }
})
// Then, a function is imported that returns the plugin itself
// this is required for the asynchronous require of the plugin.
export default () => $plugin

И даже встречал такое изобретение.

Внимание, это тоже НЕ правильная реализация!

export default {
 install (Vue) {
   // Here the global Vue is polluted
   // in the plugins we have access to the plugin
   // under the allias plugin
   // in components after initializing Vue, under $plugin
  Vue.prototype.$plugin = Vue.plugin = plugin
 }
}

Хорошо, давайте найдем правильное решение, вот пример из официальной документации, но, как видите, не самое обширное объяснение.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default ({ app }, inject) => {
 // In this case, we added a plugin to our application and this
 // will give the opportunity to get it from middleware and on pages
 // in asyncData/fetch
 app.i18n = new VueI18n()
}

Но есть еще одна проблема: как получить доступ к плагину i18n из другого плагина?
Например, у меня есть плагин, который показывает уведомления на страницах, и я хочу отображать переведенные уведомления.
Если вы подумали о простой импорт, то он не работает из-за асинхронного требования плагинов. Во время запроса уведомлений плагина плагин перевода, вероятно, еще не импортирован, и вы получите undefined.

Здесь нам поможет функция inject, которая входит во второй параметр и которую вам нужно вызвать с двумя параметрами, чтобы «внедрить» плагин.
Первый параметр - имеет тип String. Это имя нашего плагина, к которому будет добавлен префикс $, наш плагин будет доступен в ctx.app. $ PluginName в плагинах и this. $ PluginName в компонентах.
Второй параметр - имеет тип функции . Это реализация нашего плагина (функция, которая будет выполняться при вызове this. $ PluginName ()).

Внимание, правильная реализация, на случай, если вам нужен доступ к одному плагину в другом.

Перепишем официальный пример для:

export default (ctx, inject) => {
   inject('i18n', new VueI18n())
}

Теперь в плагине, где вам нужен плагин переводчика, у нас есть такой доступ:

export default ({ app }) => {
   app.$i18n() // its works, cool!
}

Что ж, если вам не нужен доступ к вашему вновь созданному плагину из других плагинов, тогда мы сделаем это, как показано в официальной документации:

export default ({ app }) => {
    // Will be available in the components as this.$i18n
    app.i18n = new VueI18n()
}

Чао!