Use localForage in NuxtJS

You might found the module of nuxtjs such as: localforage-module or v-localforage but they are not up-to-date and it’s not working by default by using its module as example in this issue.

Oh, and what is localForage here? It’s an offline storage for web, another option over the localStorage but it’s an API that let’s us manage and use other storage such as IndexedDB, WebSQL, LocalStorage etc. Detail go here.

So, here how I made it works on nuxtjs project.

Thanks to v-localforage package wrapped-up for localforage, I took it to write a plugin instead in nuxtjs itself.

The main code is in here:
https://github.com/datalogix/v-localforage/blob/master/src/index.js

1. Install localforage

npm install localforage

2. Write plugin: plugin/localforage.client.js and load it as normal nuxtjs case:

import Vue from 'vue
import localforage from 'localforage'
Vue.use(VueLocalforage)
/* istanbul ignore next */
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(VueLocalforage)
}

// Place your option here
const options = {}

Vue.$localforage = localforage.createInstance(options)
Vue.prototype.$localforage = Vue.$localforage

if (options.instances) {
    for (const instance of options.instances) {
        const name = instance.storeName || instance.name
        Vue.$localforage[name] = localforage.createInstance(instance)
        Vue.prototype.$localforage[name] = Vue.$localforage[name]
    }
}

3. Use it in Vue Component

// set by name and provided data
this.$localforage.setItem(name, data)

// get by name
this.$localforage.getItem(name)

// remove by name
this.$localforage.removeItem(name)

Hope this helps you guys and don’t forget to let me know if it is or any comment.