Giter Club home page Giter Club logo

localforage-module's Introduction

@nuxtjs/localforage

npm version npm downloads Github Actions CI Codecov License

Localforage module for Nuxt.js

๐Ÿ“– Release Notes

Setup

  1. Add @nuxtjs/localforage dependency to your project
yarn add --dev @nuxtjs/localforage # or npm install --save-dev @nuxtjs/localforage
  1. Add @nuxtjs/localforage to the buildModules section of nuxt.config.js
export default {
  buildModules: [
    // Simple usage
    '@nuxtjs/localforage',

    // With options
    ['@nuxtjs/localforage', { /* module options */ }]
  ]
}

โš ๏ธ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    '@nuxtjs/localforage'
  ],
  localforage: {
    /* module options */
  }
}

Options

driver (optional)

  • Default: [localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]

The preferred driver(s) to use. Same format as what is passed to setStorageDriver(), above.

name (optional)

  • Default: 'nuxtJS'

The name of the database. May appear during storage limit prompts. Useful to use the name of your app here. In localStorage, this is used as a key prefix for all keys stored in localStorage.

version (optional)

  • Default: 1.0

The version of your database. May be used for upgrades in the future; currently unused.

size (optional)

  • Default: 4980736

The size of the database in bytes. Used only in WebSQL for now.

storeName (optional)

  • Default: 'nuxtLocalForage'

The name of the datastore. In IndexedDB this is the dataStore, in WebSQL this is the name of the key/value table in the database. Must be alphanumeric, with underscores. Any non-alphanumeric characters will be converted to underscores.

description (optional)

  • Default: ''

A description of the database, essentially for developer usage.

instances (optional)

  • Default: []

You can create multiple instances.

More informations on LocalForage documentation

Usage

Get item

let item = await this.$localForage.getItem(key)

Set item

await this.$localForage.setItem(key, value)

Remove item

await this.$localForage.removeItem(key)

Clear

await this.$localForage.clear

Gets the length

let length = await this.$localForage.length

Get the name of a key based on its ID

let k = await this.$localForage.key(keyIndex)

Get the list of all keys

let keys = await this.$localForage.keys()

Force usage of a particular driver or drivers, if available

this.$localForage.setDriver(localforage.LOCALSTORAGE)

By default, localForage selects backend drivers for the datastore in this order:

  1. IndexedDB
  2. WebSQL
  3. localStorage

If you would like to force usage of a particular driver you can use $setStorageDriver() with one or more of the following parameters.

  • localforage.INDEXEDDB
  • localforage.WEBSQL
  • localforage.LOCALSTORAGE

Advanced Usage

You can register multiple instances, see below:

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/localforage'
  ],
  
  localforage: {
    instances: [{
      name: 'myApp',
      storeName: 'images'
    }, {
      name: 'myApp',
      storeName: 'fileSystem'
    }]
  }
}

// for images
await this.$localforage.images.setItem(key, value)

// for fileSystem
await this.$localforage.fileSystem.setItem(key, value)

Development

  • Clone this repository
  • Install dependnecies using yarn install or npm install
  • Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community

localforage-module's People

Contributors

renovate-bot avatar ricardogobbosouza avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

localforage-module's Issues

Run Codecov on PRs

What problem does this feature solve?

Run Codecov on PRs

This feature request is available on Nuxt community (#c9)

Uncaught (in promise) TypeError: this.$localForage is undefined

The installation is following as:

npm install --save-dev @nuxtjs/localforage

Add @nuxtjs/localforage to the buildModules section of nuxt.config.js

buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/localforage'
  ],

When use in a Vue component, still got this error: Uncaught (in promise) TypeError: this.$localForage is undefined

Also try to add in block of modules in nuxt.config.js also still error, this.$localForage not delcare by the module

How to use localForage with Vuex ?

Hi,

I am able to use local forage as a method, but I can not use it in store.. I tried different options but I could not manage to do it.

As a method, this is what I am doing

async localForage () {
      let data = {
        name: 'test',
        operation: 'Nav-Business'
      }
      await this.$localForage.setItem('nav', data)
        .then(data => {
          console.log('Working', data)
        })
        .catch(error => {
          console.log(error)
        })
    }

Thnx in advance

This question is available on Nuxt community (#c3)

ReferenceError: localforage is not defined

Installed @nuxtjs/localforage normally

Actual code:

  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    ['@nuxtjs/localforage', {
      driver: localforage.LOCALSTORAGE,
    }]
  ],

Error:

driver: localforage.LOCALSTORAGE,
            ^

ReferenceError: localforage is not defined
    at Object.<anonymous> (D:\xampp\htdocs\suporteps-extension\nuxt.config.js:56:13)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at exports.loadNuxtConfig.argv (D:\xampp\htdocs\suporteps-extension\node_modules\nuxt\bin\common\utils.js:18:15)
    at Object.<anonymous> (D:\xampp\htdocs\suporteps-extension\node_modules\nuxt\bin\nuxt-dev:63:20)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
error An unexpected error occurred: "Command failed.
This question is available on Nuxt.js community (#c1)

Run CircleCI on PRs

What problem does this feature solve?

Run CircleCI on PRs

This feature request is available on Nuxt community (#c8)

Feature

  • allow for multiple instances defined in config.
  • inject into vuex

I have done this. How can I do a PR for you to review?

This question is available on Nuxt community (#c4)

TypeScript support

Better typing support would improve the life of many people including myself !

How to access localForage instance from the store?

I want to have access to localForage instance from the Nuxt store, but in provided docs I only found examples related to accessing the instance via this.$localForage in components, but how can it be accessed in store?

This question is available on Nuxt community (#c2)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

  • WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/setup-node v2
  • actions/checkout v2
  • actions/cache v2
  • codecov/codecov-action v1
npm
package.json
  • v-localforage ^2.0.1

  • Check this box to trigger a request for Renovate to run again on this repository

Question and localforage in `modules` not `buildModules`

Hi,

Any notes on the new version? :)
I am still on 1.0.2

I am doing something typical, reloading the storage when the app is loaded. My approach so far is to put it in the create method of my default layout. obviously that is problematical since I would need to do that in all other layouts. I was thinking about doing this in an middleware, however I just noticed, that the localforage is not available in the context of the middleware. I was checking the documentation, to see if there is something about that... Doing that I realized I have localforage in modules not buildModules. However changing that, my index page doesn't load anymore...

I am doing something like this in the default layout:

    created() {
      if (!this.$store.getters[DB_LOADED]())
        reload_storage(this.$store, this.$localForage) 

db_loaded is a flag in my store which is set after localForage is loaded. Then in a watch method to that store variable I fetch stuff from the server and set another flag in the store to initialized, which will finally allows the page to be created:

      <v-container v-if="initialized">
        <nuxt/> 

There is probably a better way to do all these initial steps involving the localforage. Any guidelines would be really appreciated.

This question is available on Nuxt community (#c12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.