Creating a Vuejs Plugin
Plugin to help us work with PouchDB in a Vuejs application
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.
Initializing a plugin
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.
Defining a Mixin
Mixins are a flexible way to distribute reusable functionalities for Vue components.
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.
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.
Bringin it all together
You can find the project at github contributions are welcomed.