Slide 1

Slide 1 text

Building Plugins for Vue and Vuex Arnav Gupta

Slide 2

Slide 2 text

Why I made plugins ?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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 ?

Slide 14

Slide 14 text

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 ?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

What can plugins do ?

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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 !

Slide 20

Slide 20 text

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 ?

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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 ?

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Ok, so what plugin can we make ?

Slide 33

Slide 33 text

Ok, so what plugin can we make ?

Slide 34

Slide 34 text

Ok, so what plugin can we make ?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

When to make plugins ?

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 ?

Slide 41

Slide 41 text

Writing tests for your plugins.

Slide 42

Slide 42 text

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 ?

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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