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.
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.
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 !
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 ?
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
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 ?