3 Installation as vue plugin

The first thing you'll want is a simple wrapper over Dexis.js

import Vue from 'vue'
import VueIdb from 'vue-idb'

Vue.use(VueIdb)

export default new VueIdb({
  database: 'test',
  schemas: [
    { tests: 'id, label, created_at, updated_at' }
  ]
})

This gives you a $db property to vue components.

<template>
  <div>
    <h2>List</h2>
    <input @keyup.enter="add($event.target.value); $event.target.value = '';">
    <hr>
    <div>
      <ul>
        <li class="title">LOADED FROM iDB</li>
        <li v-for="test in tests">
          {{ test.label }} <button type="button" @click="remove(test)">&times;</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { uuid } from 'vue-idb'

export default {
  name: 'app',
  data () {
    return {
      tests: []
    }
  },
  mounted () {
    this.update()
  },
  methods: {
    update(){
      this.$db.tests.toArray().then( tests => this.tests = tests )
    },
    add (value){
      this.$db.tests.add({ 
        id: uuid(), 
        title: value, 
        created_at: new Date(), 
        updated_at: new Date() 
      }).then(() => this.update())
    },
    remove (test){
      this.$db.tests.where('id').eq(test.id).delete().then(() => this.update())
    }
  }
}
</script>