Localforage module for Nuxt3
npm install nuxt3-localforage> 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.
``bash
#npm
npm install --save-dev nuxt3-localforage
#yarn
yarn add --dev nuxt3-localforage
#pnpm
pnpm add --save-dev nuxt3-localforage
`
`ts
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
// Simple usage
'nuxt3-localforage',
],
vite: {
optimizeDeps: {
include: ['localforage'],
},
}
})
`
`ts
// 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 using const localForage = useLocalForage()
or .
- In Options API, you can access the LocalForage instance by using this.$localForage.
`ts`
const localForage = useLocalForage()
const item = await localForage.getItem(key)
`ts`
const localForage = useLocalForage()
await localForage.setItem(key, value)
`ts`
const localForage = useLocalForage()
await localForage.removeItem(key)
`ts`
const localForage = useLocalForage()
await localForage.clear
`ts`
const localForage = useLocalForage()
const length = await localForage.length
`ts`
const localForage = useLocalForage()
const k = await localForage.key(keyIndex)
`ts`
const localForage = useLocalForage()
const keys = await localForage.keys()
`ts`
const localForage = useLocalForage()
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
You can register multiple instances, see below:
`js
// 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)
``