Neologistic Paraphasic Mumbling

    @nuxtjs/universal-storage
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.9 • Public • Published

    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

    Setup

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

    OR

    npm install @nuxtjs/universal-storage --save
    • Add @nuxtjs/universal-storage to the modules section of your nuxt.config.js file
    {
      modules: [
        '@nuxtjs/universal-storage',
      ],
    
      storage: {
    
      }
    }

    Usage

    Options

    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)
      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")

    Api

    • $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)

    Development

    • 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

    Roadmap

    • Add Encryption
    • Universal Session Handling

    License

    MIT License

    Keywords

    none

    Install

    npm i @nuxtjs/universal-storage

    DownloadsWeekly Downloads

    2,851

    Version

    0.5.9

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • antfu
    • danielroe
    • clarkdo
    • pi0
    • atinux
    • alexchopin
    • kevinmarrec
    • farzadso