Plugins provides a way for you to add global-level functionality to Vue. For example Vue by itself doesn’t have a built-in routing system. Vue-router plugin adds a routing functionality to Vue. There are very few resources on how to create a vuejs plugin, so i hope this will help.
Before diving into the details of building, have a look at how you will be able to use this plugin we are about to make.
A Vue.js plugin should expose an install method. The method will be called with the Vueconstructor as the first argument, along with possible options.
Mixins are a flexible way to distribute reusable functionalities for Vue components.
Note the beforeCreate property. This is an event that gets emitted by vuejs before the initialization of the vue instance properties and methods. The init is a function which you will be creating next.
In the init function we get the pouchdb option that is set in a vue instance. You will use the ensureRef function to set the $pouchdbRefs property which will hold a reference to the PouchDB object.
Now the interesting part. You will create the bind function which its main responsibility will be to make the data from PouchDB reactive.
One last thing you need to do is notify Vue that it should track changes made on the PouchDB data. The defineReactive function will be responsible for that part. You will use the util from vue to define the reactivity.
You can find the project at github contributions are welcomed.