This package has been deprecated

    Author message:

    This

    pouchdb-vue

    0.0.5 • Public • Published

    pouchdb-vue

    Live and reactive PouchDB bindings for Vuejs with Mango Queries 👌👌👌

    Refer to https://github.com/nolanlawson/pouchdb-find for documentation on the query structure and a guide on how to create indexes.

    Example

    <template>
      Show people that are <input v-model="age"> years old.
      <div v-for="person in people">
        {{ person.name }}
      </div>
    </template>
     
    <script>
      new Vue({
        data: function() {
          return {
            resultsPerPage: 25,
            currentPage: 1
          }
        },
        // Use the pouch property to configure the component to (reactively) read data from pouchdb.
        pouch: {
          // The function returns a Mango-like selector that is run against a pre-configured default database.
          // The result of the query is assigned to the `people` property.
          people: function() {
            if (!this.age) return;
            return {age: this.age}
          },
          // You can also specify the database dynamically (local or remote), as well as limits, skip and sort order:
          peopleInOtherDatabase: function() {
            return {
              database: this.selectedDatabase, // you can pass a database string or a pouchdb instance
              selector: {type: "person"},
              sort: {name: 1},
              limit: this.resultsPerPage,
              skip: this.resultsPerPage * (this.currentPage - 1)
            }
          }
        }
      })
    </script>

    Installation

    Install via npm:

    npm install --save pouchdb-vue
    

    The only requirement is that PouchDB is available on the global object with the pouchdb-live-find plugin installed:

    PouchDB = require('pouchdb-browser');
    PouchDB.plugin(require('pouchdb-find'));
    PouchDB.plugin(require('pouchdb-live-find'));
    

    Then, plug pouchdb-vue into Vue:

    PouchDBVue = require(`pouchdb-vue`)
    Vue.use(PouchDBVue)
    

    Configuration

    Instead of passing a database name with every reactive property, you can also set a global "default" database:

    PouchDBVue.defaults.database = new PouchDB('default-db', {options...})
    // or
    PouchDBVue.defaults.database = 'mydb'
    

    Todo

    [ ] Add reactive properties that indicate a loading and ready state

    Keywords

    none

    Install

    npm i pouchdb-vue

    DownloadsWeekly Downloads

    8

    Version

    0.0.5

    License

    ISC

    Last publish

    Collaborators

    • buhrmi