$30 off During Our Annual Pro Sale. View Details »

Building plugins for Vue and Vuex

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
Tweet

More Decks by Arnav Gupta

Other Decks in Technology

Transcript

  1. Building Plugins for Vue
    and Vuex
    Arnav Gupta

    View Slide

  2. Why I made plugins ?

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  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.

    View Slide

  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 ?

    View Slide

  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 ?

    View Slide

  15. Vue-CLI
    $ vue add crackle
    ========== or ==========
    $ npm i vue-cli-plugin-crackle
    $ vue invoke crackle
    How are plugins used ?

    View Slide

  16. What can plugins do ?

    View Slide

  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

    View Slide

  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.

    View Slide

  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 !

    View Slide

  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 ?

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  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 ?

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Ok, so what plugin can we make ?

    View Slide

  33. Ok, so what plugin can we make
    ?

    View Slide

  34. Ok, so what plugin can we make
    ?

    View Slide

  35. View Slide

  36. View Slide

  37. Yes I use nano, not vim**
    **I am not a 10x engineer

    View Slide

  38. When to make plugins ?

    View Slide

  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

    View Slide

  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 ?

    View Slide

  41. Writing tests for your plugins.

    View Slide

  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 ?

    View Slide

  43. Documentation
    ● Two simple rules –
    ● Write a usage guide
    ● Use Vuepress !

    View Slide

  44. Thank you !
    twitter.com/championswimmer
    speakerdeck.com/championswimmer

    View Slide