LocalForage module for Nuxt 3
Note This module is compatible with Nuxt 3. If you're looking for the Nuxt 2 version, check out @nuxtjs/localforage module.
#npm
npm install --save-dev nuxt3-localforage
#yarn
yarn add --dev nuxt3-localforage
#pnpm
pnpm add --save-dev nuxt3-localforage
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
// Simple usage
'nuxt3-localforage',
],
vite: {
optimizeDeps: {
include: ['localforage'],
},
}
})
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
// Simple usage
'nuxt3-localforage',
],
vite: {
optimizeDeps: {
include: ['localforage'],
},
}
localForage: {
/* module options */
}
})
- Default:
[localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE]
The preferred driver(s) to use. Same format as what is passed to setStorageDriver()
, above.
- Default:
'nuxt3'
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.
- Default:
1.0
The version of your database. May be used for upgrades in the future; currently unused.
- Default:
4980736
The size of the database in bytes. Used only in WebSQL for now.
- Default:
'nuxt3LocalForage'
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.
- Default:
''
A description of the database, essentially for developer usage.
- Default:
[]
You can create multiple instances.
More informations on LocalForage documentation
-
In Composition API, you can access the
LocalForage
instance by usingconst localForage = useLocalForage()
orconst { $localForage } = useNuxtApp()
. -
In Options API, you can access the
LocalForage
instance by usingthis.$localForage
.
const localForage = useLocalForage()
const item = await localForage.getItem(key)
const localForage = useLocalForage()
await localForage.setItem(key, value)
const localForage = useLocalForage()
await localForage.removeItem(key)
const localForage = useLocalForage()
await localForage.clear
const localForage = useLocalForage()
const length = await localForage.length
const localForage = useLocalForage()
const k = await localForage.key(keyIndex)
const localForage = useLocalForage()
const keys = await localForage.keys()
const localForage = useLocalForage()
localForage.setDriver(localforage.LOCALSTORAGE)
By default, localForage selects backend drivers for the datastore in this order:
- IndexedDB
- WebSQL
- 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
You can register multiple instances, see below:
// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
'nuxt-localforage'
],
localForage: {
instances: [{
name: 'myApp',
storeName: 'images'
}, {
name: 'myApp',
storeName: 'fileSystem'
}]
}
})
/**
* Composition API
*/
// for images
const imagesStorage = useLocalForage('images')
await imagesStorage.setItem(key, value)
// for fileSystem
const fileSystemStorage = useLocalForage('fileSystem')
await fileSystemStorage.setItem(key, value)
/**
* Options API
*/
// for images
await this.$localforage.images.setItem(key, value)
// for fileSystem
await this.$localforage.fileSystem.setItem(key, value)