quick gist for a short talk about vue plugins

vue-plugins-in-10-min.js

//Vue Plugins:

// Link to live stackblitz: https://stackblitz.com/edit/vue-plugins-demo-ts?file=index.ts 

// How:
// Add global methods: Vue.myGlobalFn (e.g vue-custom-element)
// Add global assets (directives/filters/mixin..)
// Add instance methods Vue.prototype.someFn
// API of all of the above (e.g vue-router)

// How To:
// * Plugin must implement an "install(vue, options)" function as follows: 

MyPlugin.install = function (Vue, options) {
  // 0. global vars
  Vue.linkToCode = 'https://stackblitz.com/edit/vue-plugins-demo-ts?file=index.ts';
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
    return Vue.linkToCode;
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

// Plugin Cunsume example:

// Global method: vueCustomElement 

Vue.use(vueCustomElement);

Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2',
    'prop3'
  ],
  data: {
    message: 'Hello Vue!'
  },
  template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>'
});

// boom we have a widget-vue custom element