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!

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