Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Arnav Gupta

Other Decks in Technology


  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 ! twitter.com/championswimmer speakerdeck.com/championswimmer