Building Plugins for Vue and Vuex Arnav Gupta 

Why I made plugins ? 

No content

No content

No content

No content

No content

No content

No content

No content

No content

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. 

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 ? 

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 ? 

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

What can plugins do ? 

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 

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. 

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 ! 

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 ? 

No content

No content

No content

No content

No content

No content

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 ? 

No content

No content

No content

No content

Ok, so what plugin can we make ? 

Ok, so what plugin can we make ? 

Ok, so what plugin can we make ? 

No content

No content

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

When to make plugins ? 

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 

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 ? 

Writing tests for your plugins. 

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 ? 

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

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