Understanding plugins

Vue plugins are a way to add custom functionality to Vue.js globally. Classic examples of plugin candidates are translation/internationalization libraries (such as i18n-next) and HTTP clients (such as the axios, fetch, and GraphQL clients). The plugin initializer has access to the Vue instance, so it can be a good way to wrap global directives and components and inject resources across the application.

A Vue plugin is an object that exposes an install method. The install function is called with an app instance and options:

const plugin = {
  install(app, options) {}
}

Within the install method, we can register directives and components and add global and instance properties and methods:

const plugin = {
  install(app, options) {
    app.directive('fade', { bind() {} })
    app.component(/*Register component globally*/)
    app.provide(/*Provide a resource to be...