Creating a Vuejs Plugin

Plugin to help us work with PouchDB in a Vuejs application

This post assumes that you at least have some working knowledge of Vuejs and PouchDB.

Don’t worry i'm not going to tell you to install 1000 things before you get started. All you need is Vuejs and PouchDB.

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.

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.

Bringin it all together

You can find the project at github contributions are welcomed.