Плагины ​

Вступление ​

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

import { createApp } from 'vue'

const app = createApp({})

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

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

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

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

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

2. Сделать ресурс injectable во всём приложении через вызов app.provide().

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

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

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

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

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

// 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 с плагинами ​

Плагины также позволяют нам использовать inject, чтобы предоставить функцию или атрибут пользователям плагина. Например, мы можем позволить приложению иметь доступ к параметру 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)
  }
}

Bundle for NPM ​

If you further want to build and publish your plugin for others to use, see Vite's section on Library Mode.