How to Easily Build Syncable Offline-First Apps with Vuejs and PouchDB

****Vue is said to be a progressive framework for building user interfaces. Click here to take a look at it's documentation.

PouchDB is an in-browser database that allows applications to save data locally, so that users can enjoy all the features of an app even when they're offline. Plus, the data is synchronized between clients, so users can stay up-to-date wherever they go. Learn more about it here.

**Both Vuejs and PouchDB are based on Javascript which makes it alot easy to work with for Web developers.

There's a NPM module for Vuejs and PouchD; It handles reactive bindings for PouchDB using pouchdb-live-find which also requires pouch-find for live PouchDB queries that update automatically as changes come in!

To install, simply run:

npm install --save vue-pouch pouchdb-live-find pouchdb-find

Here's a short code snippet to show how it's been used:


<template>
  <div class="todos">
    <input v-model="message" placeholder="New Todo">
    <button @click="saveTodo">Save Todo</button>
    <div v-for="todo in todos">
      <input v-model="todo.message" @change="updateTodo(todo)">
      <button @click="removeTodo(todo)">Remove</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    pouch: {
      todos: {}
    },
    created () {
      // Send all documents to the remote database, and stream changes in real-time
      this.$pouch.sync('todos', 'http://localhost:5984/todos');
    },

    methods: {

      saveTodo () {

         this.$pouch.post('todos', {message: this.message});

         this.message='';

      },

      updateTodo (todo) {

         this.$pouch.put('todos', todo)

      },

      removeTodo (todo) {

         this.$pouch.remove('todos', todo) 

      }

    }

  }
</script>

Like this article? Follow @timtech4u on Twitter