Skip to content
A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.
Branch: develop
Clone or download
juliomrqz Merge pull request #134 from bazzite/renovate/eslint-plugin-import-2.x
chore(deps): update dependency eslint-plugin-import to v2.18.1
1
Latest commit 1a8eef7 Jul 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: create .github/ISSUE_TEMPLATE/support_request.md Jun 2, 2019
build chore(pkg): replace rollup-plugin-uglify with rollup-plugin-terser May 17, 2019
dist chore(pkg): replace rollup-plugin-uglify with rollup-plugin-terser May 17, 2019
docs chore(docs): reorganize the docs articles and update the fontmatters Jun 5, 2019
examples Fix the Webpack configuration for the examples server Apr 5, 2018
nuxt Use 'store/dist/store.modern' as a default store for Nuxt.js plugin Mar 31, 2018
src Add Typescript typings and improve the building process Mar 31, 2018
test/unit Fix jsdom behavior when running tests Aug 7, 2018
types Fix TypeScript type definitions Mar 31, 2018
.babelrc chore(package): upgrade babel Mar 14, 2019
.editorconfig Add Testing support Mar 23, 2018
.eslintignore
.eslintrc.js Add Typescript typings and improve the building process Mar 31, 2018
.gitignore Update .gitignore Apr 2, 2018
.npmignore chore: create .npmignore Mar 14, 2019
.travis.yml chore(travis): remove node v9 from testing Jun 5, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Mar 23, 2018
CONTRIBUTING.md Update CONTRIBUTING.md Apr 5, 2018
LICENSE Initial Commit Mar 23, 2018
README.md chore: remove Greenkeeper badge Jul 18, 2019
appveyor.yml chore(appveyor): add node v10 and v12 to the testing matrix Jun 5, 2019
commitlint.config.js chore: configure commitlint Oct 17, 2018
now.json chore(now): update alias Jun 10, 2019
package.json chore(deps): update dependency eslint-plugin-import to v2.18.1 Jul 19, 2019
renovate.json chore: configure schedule for renovate Jul 18, 2019
store.js Bump version to 1.0.0b Mar 31, 2018
sync.js
yarn.lock chore(deps): update dependency eslint-plugin-import to v2.18.1 Jul 19, 2019

README.md

Bazzite Project Codacy Badge Travis Build status codecov David David version License

Vue.js Warehouse

A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.

This plugin will pick the best available browser storage, and automatically falls back to the first available storage that works.

Read this in other languages: English, Español

Features

  • Backed by the great library Store.js
  • Support for multiple Storages (localStorage, cookies, etc.)
  • Basic key/value storage functionality (get/set/remove/each)
  • Easy integration with Vue.js
  • Support for Nuxt.js
  • Get notified with Vuex when the stored values change

Why use this plugin

Some reasons why you could consider to use this plugin:

  • Use a fallback Browser storage method in case the user's browser has limitations. Safari in Private mode can deny writing data in localStorage.
  • Easy extensibility with Plugins. Support for expiring stored values at a given time, declare default values, etc.
  • A consistent API across browsers for a key/value storage functionality.
  • Easy definition of alternative Storage methods. For example: you could reuse a Vue Component, that relies on a storage method, in the user's browser (using localStorage) or a mobile app (using NativeScript application-settings module) just by changing the storage method without modifying the internal logic of the component.
  • Synchronization of stored values changes with Vuex.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save store vue-warehouse

or

yarn add store vue-warehouse

Example of use

Suppose you want to use localStorage by default and cookies as an alternative in case your user's browser doesn't allow any interaction with localStorage (Safari Private mode). Besides, you want to define defaults values and an expiration date for all the data that is going to be saved.

Configuration for Vue.js

import Vue from 'vue'
import VueWarehouse from 'vue-warehouse'
import VueWarehouseSync from 'vue-warehouse/sync'

import VuexStore from './vuex/store' // vuex store instance
import VueWarehouseStore from 'store' // vue-warehouse store instance

VueWarehouseSync(VuexStore, VueWarehouseStore)

Vue.use(VueWarehouse, {
  store: VueWarehouseStore,
  plugins: [
    require('store/plugins/expire'),   // Expire stored values at a given time
    require('store/plugins/defaults')  // Declare default values
  ],
  storages: [
    require('store/storages/localStorage'),  // localStorage support
    require('store/storages/cookieStorage')  // cookies support
  ]
})

Configuration for Nuxt.js

{
  modules: [
    ['vue-warehouse/nuxt',
      {
        vuex: true,
        plugins: [
          'store/plugins/expire',
          'store/plugins/defaults'
        ],
        storages: [
          'store/storages/localStorage',
          'store/storages/cookieStorage'
        ]
      }
    ],
  ]
}

API Usage

// Define defaults values
this.$warehouse.defaults({ user: { name: 'John Doe' } })

// Change current user with an expiration date of 2 hours starting from now
const expiration = new Date().getTime() + (3600 * 2000)
this.$warehouse.set('user', { name:'Marie Doe' }, expiration)

// Get current user value
this.$warehouse.get('user')

// Get current user expiration
this.$warehouse.getExpiration('user')

// Remove current user
this.$warehouse.remove('user') // return the default value -> { name: 'John Doe' }

// Clear all keys
this.$warehouse.clearAll()

// Loop over all stored values
this.$warehouse.each(function(value, key) {
	console.log(key, '==', value)
})

Vuex State

The last change made to the browser store (localStorage, cookie, etc.) are synced with the Vuex state:

// Store current user
this.$warehouse.set('user', { name: 'John Doe' })

// Update the user
this.$warehouse.set('user', { name: 'Marie Doe' })

// get state values
store.state.warehouse.action    // action performed -> set
store.state.warehouse.key       // key affected     -> user
store.state.warehouse.value     // stored value     -> { name: 'Marie Doe' }
store.state.warehouse.oldValue  // last value       -> { name: 'John Doe' }

Documentation & Support

Professional Support

This project is sponsored by Bazzite. If you require Professional Assistance on your project(s), please contact us at https://www.bazzite.com/contact.

Contributing

Please make sure to read the Contributing Guide before making a pull request.

Code of Conduct

Everyone participating in this project is expected to agree to abide by the Code of Conduct.

License

Code released under the MIT License.

You can’t perform that action at this time.