Plugin система разработка

Плагин во Vue.js — это способ инкапсулировать и повторно использовать функциональность на уровне всего приложения. Плагин может добавлять глобальные методы, директивы, компоненты, миксины, а также внедрять зависимости через механизм provide/inject. Архитектурно плагины позволяют отделить инфраструктурный код от бизнес-логики и формировать расширяемую экосистему приложения.

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

Базовый интерфейс плагина

Любой плагин во Vue представляет собой либо функцию, либо объект с методом install.

const MyPlugin = {
  install(app, options) {
    // логика инициализации
  }
}

или в функциональной форме:

function MyPlugin(app, options) {
  // логика инициализации
}

Подключение осуществляется через метод app.use():

import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './plugins/my-plugin'

const app = createApp(App)
app.use(MyPlugin, { debug: true })
app.mount('#app')

Vue гарантирует, что install будет вызван только один раз для каждого приложения, даже если use вызывается повторно.

Глобальные свойства и API приложения

Одной из ключевых возможностей плагинов является расширение глобального API через app.config.globalProperties. Это основной способ добавления общих методов и сервисов.

install(app) {
  app.config.globalProperties.$log = function (message) {
    console.log(message)
  }
}

Использование внутри компонента:

this.$log('Сообщение')

В Composition API доступ осуществляется через getCurrentInstance:

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
proxy.$log('Сообщение')

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

Регистрация глобальных компонентов

Плагин может регистрировать компоненты, доступные во всём приложении без явного импорта.

import BaseButton from './components/BaseButton.vue'

install(app) {
  app.component('BaseButton', BaseButton)
}

Этот подход часто используется для библиотек UI-компонентов, дизайн-систем и типовых элементов интерфейса.

Добавление директив

Директивы, зарегистрированные в плагине, становятся частью DSL шаблонов.

install(app) {
  app.directive('focus', {
    mounted(el) {
      el.focus()
    }
  })
}

Применение:

<input v-focus />

Плагины директив особенно полезны для кросс-секционных задач: фокусировка, трекинг, управление доступом, работа с DOM API.

Миксины как механизм расширения компонентов

Через app.mixin плагин может внедрять логику во все компоненты приложения.

install(app) {
  app.mixin({
    created() {
      // общая логика
    }
  })
}

Миксины применяются ко всем компонентам, включая сторонние, поэтому их использование требует строгого контроля. Предпочтение чаще отдаётся Composition API и provide/inject.

Dependency Injection через provide/inject

Плагины часто выступают контейнерами сервисов: API-клиентов, логгеров, менеджеров состояния.

install(app) {
  const api = {
    fetchData() {
      // ...
    }
  }

  app.provide('api', api)
}

Использование в компоненте:

import { inject } from 'vue'

const api = inject('api')
api.fetchData()

Для повышения надёжности часто используются Symbol вместо строковых ключей:

export const ApiKey = Symbol('Api')

app.provide(ApiKey, api)

Параметризация плагинов

Второй аргумент app.use предназначен для конфигурации.

app.use(MyPlugin, {
  endpoint: '/api',
  timeout: 3000
})

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

install(app, options = {}) {
  const config = {
    endpoint: options.endpoint ?? '/default',
    timeout: options.timeout ?? 1000
  }
}

Это позволяет адаптировать плагин под разные приложения без изменения его кода.

Реактивность внутри плагинов

Плагин может создавать и экспортировать реактивное состояние.

import { reactive } from 'vue'

install(app) {
  const state = reactive({
    user: null
  })

  app.provide('auth', state)
}

Такое состояние будет реактивным во всех компонентах, где оно инжектируется. Это упрощённая альтернатива полноценным стор-решениям для локальных задач.

Интеграция с жизненным циклом приложения

Плагин имеет доступ к хукам приложения через app.config.

install(app) {
  const originalErrorHandler = app.config.errorHandler

  app.config.errorHandler = (err, instance, info) => {
    // обработка ошибки
    if (originalErrorHandler) {
      originalErrorHandler(err, instance, info)
    }
  }
}

Таким образом реализуются плагины логирования, мониторинга и аналитики.

Организация структуры плагина

Типичная структура:

plugins/
  my-plugin/
    index.js
    services/
    composables/
    components/

Экспорт должен быть минимальным и стабильным:

export default {
  install
}

Внутренние детали не должны быть частью публичного API.

Тестируемость и изоляция

Хорошо спроектированный плагин:

  • не зависит напрямую от конкретных компонентов;
  • не модифицирует глобальное состояние без необходимости;
  • использует явные точки расширения;
  • допускает мокирование сервисов через параметры.

Для тестирования часто используется создание отдельного экземпляра приложения:

const app = createApp({})
app.use(MyPlugin)

Совместимость и ограничения

Плагины во Vue 3 не совместимы напрямую с Vue 2 из-за изменений в API и архитектуре. При разработке библиотек необходимо явно указывать поддерживаемую версию.

Асинхронная инициализация плагина должна выполняться до mount, либо управляться вручную, так как install не поддерживает async/await как контракт.

Когда плагин — правильный выбор

Плагин оправдан, если функциональность:

  • используется в нескольких частях приложения;
  • требует глобального доступа;
  • не привязана к конкретному компоненту;
  • должна подключаться декларативно.

В остальных случаях предпочтительнее использовать локальные composable-функции или обычные модули JavaScript.

Оглавление