Плагины ​

Введение ​

Плагины — это самодостаточный код, который обычно добавляет во Vue функциональность на уровне приложений. Вот так мы устанавливаем плагин:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* дополнительные опции */
})

Плагин определяется либо как объект, который открывает метод install(), либо как функция, которая сама выполняет функцию установки. Функция install получает экземпляр приложения вместе с дополнительными опциями, переданными в app.use(), если таковые имеются:

const myPlugin = {
  install(app, options) {
    // настройка приложения
  }
}

Строго определённая область применения плагина отсутствует, но общие сценарии, в которых плагины могут быть полезны, включают:

1. Регистрация одного или нескольких глобальных компонентов или пользовательских директив с помощью app.component() и app.directive().

2. Назначение ресурса инжектируемым во всём приложении, с помощью вызова app.provide().

3. Добавление некоторых глобальных свойств или методов экземпляра, с прикреплением к app.config.globalProperties.

4. Библиотека, которая должна выполнять некоторую комбинацию вышеперечисленных действий (например, vue-router).

Написание плагина ​

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

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

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

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

<h1>{{ $translate('greetings.hello') }}</h1>

Поскольку эта функция должна быть глобально доступна во всех шаблонах, мы сделаем её такой, прикрепив к app.config.globalProperties в нашем плагине:

// plugins/i18n.js
export default {
  install: (app, options) => {
    // внедряем глобально доступный метод $translate()
    app.config.globalProperties.$translate = (key) => {
      // Получение вложенного свойства в `options`
      // с использованием `key` в качестве пути
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

Наша функция $translate возьмет строку типа greetings.hello, заглянет в конфигурацию, предоставленную пользователем, и вернет переведённое значение.

Объект, содержащий переведённые ключи, должен быть передан плагину при установке через дополнительные параметры в app.use():

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

Теперь наше исходное выражение $translate('greetings.hello') будет заменено на Bonjour! во время выполнения.

См. также: Расширение глобальных свойств

Provide / Inject с плагинами ​

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

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

Пользователи плагинов теперь смогут внедрять опции плагина в свои компоненты с помощью ключа i18n:

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}

Пакет для NPM ​

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