Save 37% off PRO during our Black Friday Sale! »

Building plugins for Vue and Vuex

37fbf83b7d45711e41e774e29fed710e?s=47 Arnav Gupta
September 06, 2019

Building plugins for Vue and Vuex

We learn what are Vue, Vuex and Vue-CLI plugins, and we see how plugins for each are built!


Arnav Gupta

September 06, 2019


  1. Building Plugins for Vue and Vuex Arnav Gupta

  2. Why I made plugins ?

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. What are plugins ? In the world of vue, there

    are three types of plugins - • vue plugins ◦ adds global level functionality, or new kinds of components to Vue • vuex plugins ◦ adds functionality to vuex, by getting access to all mutation hooks • vue-cli plugins ◦ Modifies the build system, and add functionality to webpack/cli-service Vuex itself is a plugin for Vue. So is Vue-Router.
  13. Vue $ npm install vue-boom // main.js import Vue from

    ‘vue’ import Boom from ‘vue-boom’ Vue.use(Boom) new Vue({ ... }) How are plugins used ?
  14. Vuex $ npm install vuex-whizz // store.js import Vuex from

    ‘vuex’ import Whizz from ‘vuex-whizz’ const store = new Vuex.Store({ // . . . plugins: [Whizz] }) export default store How are plugins used ?
  15. Vue-CLI $ vue add crackle ========== or ========== $ npm

    i vue-cli-plugin-crackle $ vue invoke crackle How are plugins used ?
  16. What can plugins do ?

  17. What can vue plugins do ? 1. Add global methods

    or properties to Vue itself. 2. Add a global directive, filter or transition to Vue 3. Add global component options via mixin. 4. Add instance methods/properties via Vue.prototype
  18. What can vuex plugins do ? Vuex plugins do just

    one simple thing - • they are triggered on every mutation • They receive the name and payload of the mutation • They receive the new state of the store after the mutation NOTE: they can commit another mutation when they get triggered by one mutation.
  19. What can vue-cli plugins do ? 1. Change the webpack

    rules a. add webpack plugins b. add resolve configs c. add/modify task order 2. Add new commands to vue-cli-service 3. Create new files in the project and/or codemod existing ones Optionally, some Vue CLI plugins have Vue CLI UI integration that helps configuring, using them from Vue UI much better. #DX !
  20. How to build plugins ? (Vue edition) Which of these

    do we need ? (Could be more than one, or even all) • Global methods/properties in Vue object ? • Global Vue filters, directives and/or transitions ? • Global component hooks (i.e. mixin) ? • Vue component instance methods ?
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. How to build plugins ? (Vuex edition) What we need

    to think of • What to do when a mutation occurs ? • Is our action different for different mutations ? • Do we need to commit another mutation during this process ?
  28. None
  29. None
  30. None
  31. None
  32. Ok, so what plugin can we make ?

  33. Ok, so what plugin can we make ?

  34. Ok, so what plugin can we make ?

  35. None
  36. None
  37. Yes I use nano, not vim** **I am not a

    10x engineer
  38. When to make plugins ?

  39. Plugins vs Mixins • A mixin in a plugin is

    global - applied to all components • Consider ◦ If your hooks are needed in only some components or all ? ◦ Large projects can have > 1000 components. Hooks will run on each one’s life cycle. ◦ You can export both the mixin independently and the plugin in your library
  40. Plugins vs Just another NPM Module • Is your library

    providing ‘vue-specific’ functionality ? ◦ Can it be achieved simply by calling a imported pure function? ◦ Does your library make sense for non-vue projects ? ◦ Using it as plugin reduced dev’s LoC to invoke it by almost 90% ? • Do you need to get injected into Vue ? ◦ Is the core functionality a new filter/directive/transition ? ◦ Can it not be achieved without overriding/merging with Vue lifecycle hooks ?
  41. Writing tests for your plugins.

  42. Distribution • cjs • esm • umd ◦ Can it

    be script-src’ed into HTML and used directly? • TypeScript/ES7 ◦ Is your plugin needed to be transpiled ? ◦ Shipping type declarations ?
  43. Documentation • Two simple rules – • Write a usage

    guide • Use Vuepress !
  44. Thank you !