Universal Storage Utilities for Nuxt

Downloads in past


275100.5.9a year ago3 years agoMinified + gzip package size for @nuxtjs/universal-storage in KB


Nuxt Universal Storage Module
npm (scoped with tag) npm GitHub Actions Codecov Dependencies js-standard-style
Universal Storage Utilities for Nuxt.js based on @nuxt-community/auth-module

📖 Release Notes


  • Add @nuxtjs/universal-storage dependency using yarn or npm to your project

yarn add @nuxtjs/universal-storage

npm install @nuxtjs/universal-storage --save

  • Add @nuxtjs/universal-storage to the modules section of your nuxt.config.js file

  modules: [

  storage: {




Options are defined as following:
storage: {
 vuex, // boolean or {namespace}
 localStorage, // boolean or {prefix}
 cookie, // boolean or {prefix, options}
 initialState,  // Object {}
 ignoreExceptions //

and default to the following values:
 vuex: {
   namespace: 'storage'
 cookie: {
   prefix: '',
   options: {
     path: '/'
 localStorage: {
   prefix: ''
 ignoreExceptions: false,

Full synchronise on start with initialState as default

Since version 0.4.0 this module allows full state synchronisation with cookies, localStorage and initialState as a default value. That allows for a very neat usage pattern: For example, if you have an initialState like the following in your nuxt.config.js file:
storage: {
  initialState: { testParam: false }

then in my component I can simply declare (with decorators)
@State(s => s.storage.testParam)

or (with mapState)
computed: mapState({
  testParam: s => s.storage.testParam

Afterwards you can get the computed property testParam with whatever value it had in your last session and on change you just have to call this.$storage.setUniversal("testParam", newVal) to get the new value saved.

Hidden settings (private state)

Private state is suitable to keep information not being exposed to the Vuex store. This helps prevent stealing tokens from the SSR response HTML.

If the key name starts with _ then that value is kept separate in the memory storage and not exposed to the Vuex store like the rest of the values.
For example:
$storage.setState("_password", "alpha1")


  • $storage.getUniversal(key)

  • $storage.setUniversal(key, value)

  • $storage.syncUniversal(key, defaultValue)

  • $storage.removeUniversal(key)

  • $storage.getState(key)

  • $storage.setState(key, value)

  • $storage.removeState(key)

  • $storage.watchState(key, fn)

  • $storage.getLocalStorage(key)

  • $storage.setLocalStorage(key, value)

  • $storage.removeLocalStorage(key)

  • $storage.getCookies()

  • $storage.getCookie(key)

  • $storage.setCookie(key, value)

  • $storage.removeCookie(key)


  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using yarn run dev or npm run dev
  • Point your browser to http://localhost:3000


  • Add Encryption
  • Universal Session Handling


MIT License