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!

37fbf83b7d45711e41e774e29fed710e?s=128

Arnav Gupta

September 06, 2019
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 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.
  11. 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 ?
  12. 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 ?
  13. 15.

    Vue-CLI $ vue add crackle ========== or ========== $ npm

    i vue-cli-plugin-crackle $ vue invoke crackle How are plugins used ?
  14. 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
  15. 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.
  16. 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 !
  17. 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 ?
  18. 21.
  19. 22.
  20. 23.
  21. 24.
  22. 25.
  23. 26.
  24. 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 ?
  25. 28.
  26. 29.
  27. 30.
  28. 31.
  29. 35.
  30. 36.
  31. 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
  32. 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 ?
  33. 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 ?