# Плагины

Плагины — самодостаточная единица кода, которая добавляет во Vue функциональность глобального уровня. Это может быть object, предоставляющий метод install(), либо function.

Нет строго ограниченной области применения для плагинов, но часто распространённые сценарии могут быть такими:

Добавление глобальных методов или свойств (например, vue-custom-element (opens new window)).
Добавление одного или нескольких глобальных ресурсов: директивы/фильтры/переходы и т.д. (например, vue-touch (opens new window)).
Добавление опций компоненту с помощью глобальной примеси (например, vue-router (opens new window)).
Добавление глобальных методов экземпляра, добавляя их в config.globalProperties.
Библиотека, предоставляющая собственный API и в то же время внедряющая некоторую комбинацию из вышеперечисленного (например, vue-router (opens new window)).

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

Чтобы лучше понять, как создавать собственные плагины Vue.js, создадим упрощённую версию плагина, который отображает локализованные строки (i18n).

При добавлении плагина в приложение будет вызываться метод install, если указывался объект. При использовании function будет вызвана сама функция. В обоих случаях она получает два параметра — объект app, являющийся результатом вызова createApp, и опции, переданные пользователем.

Начнём с настройки объекта плагина. Рекомендуется создавать его в отдельном файле и экспортировать, как показано ниже, для изолированности и разделения логики.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Код плагина будет здесь
  }
}

1
2
3
4
5
6

Нам требуется сделать функцию для перевода ключей, которая будет доступна во всём приложении, поэтому добавим её с помощью app.config.globalProperties.

Функция будет получать строку key, которую станет использовать для поиска переведённой строки в предоставленных пользователем опциях.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

1
2
3
4
5
6
7
8
9
10

Будем подразумевать, что пользователи при использовании плагина будут передавать объект с переведёнными ключами в параметре options. Функция $translate будет получать строку ключа вида greetings.hello, искать её в предоставленной конфигурации и возвращать переведённое значение — в данном случае, Bonjour!

Например:

greetings: {
  hello: 'Bonjour!',
}

1
2
3

Плагины также позволяют использовать inject для предоставления функции или атрибута пользователям плагина. Например, можно разрешить приложению получать доступ к параметру options, чтобы иметь возможность использовать объект с переводами.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

Пользователи плагина теперь смогут использовать inject['i18n'] в компонентах для получения доступа к объекту.

Кроме того, поскольку есть доступ к объекту app, все остальные возможности, такие как использование mixin и directive доступны в плагине. Подробнее о методе createApp и экземпляре приложения можно изучить в документации API приложения.

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // какая-то логика ...
      }
      ...
    })

    app.mixin({
      created() {
        // какая-то логика ...
      }
      ...
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

После инициализации приложения Vue с помощью createApp() можно подключить плагин с помощью метода use().

Используем плагин i18nPlugin, который создали в разделе создание плагина в демонстрационных целях.

Метод use() принимает два параметра. Первый — это устанавливаемы плагин, в данном случае i18nPlugin.

Он также автоматически предотвращает подключение одного и того же плагина больше одного раза, поэтому несколько вызовов для установки установят плагин только один раз.

Второй параметр является опциональным и зависит от каждого конкретного плагина. В случае демо-плагина i18nPlugin, это будет объект с переведёнными строками.

Информация

При использовании сторонних плагинов, таких как Vuex или Vue Router, всегда сверяйтесь с документацией, чтобы узнать что ожидает плагин вторым параметром.

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13

Обратите внимание на awesome-vue (opens new window) — огромную коллекцию плагинов и библиотек от сообщества Vue.

← Render-функции Подробнее о реактивности →