Nuxt.js Support

Configuring the plugin for Nuxt.js is extremely simple and easy.

Installation

The installation process is the same you follow for Vue.js:

npm install --save store vue-warehouse

or

yarn add store vue-warehouse

Configuration

Basic

Add vue-warehouse/nuxt to modules section of nuxt.config.js

{
  modules: [
    'vue-warehouse/nuxt'
  ]
}

If no option is specified, require('store/dist/store.modern') will be used as a default store, supporting only modern browsers. No plugin or custom engine will be defined.

Plugins

You can defined plugins indicating the location inside your project structure or an npm package.

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        plugins: [
          '~utils/my-custom-plugin',
          'store/plugins/expire',
          'store/plugins/defaults'
        ] 
      }
    ],
  ]
}

Note: Vue.js Warehouse will include each of that plugins locations as modules, as follows:
require('plugin-location-here').

Storages

You can define storages the same way you define plugins:

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        storages: [
          '~utils/my-custom-storage',
          'store/storages/localStorage',
          'store/storages/cookieStorage'
        ] 
      }
    ],
  ]
}

Custom engine

Defining a custom engine is not different from defining plugins and storages:

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        engine: '~utils/my-custom-engine'
      }
    ],
  ]
}

Custom module name

If for any reason you want to change the name of the module you can do it this way:

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        moduleName: 'trunkOfMemories'
      }
    ],
  ]
}

Usage

Inside of a Vue instance or in the Nuxt.js context, you have access to the vue-warehouse instance as $warehouse. For example:

Vue Instance:

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

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

Nuxt.js context:

export default {
  asyncData (context) {
    const userId = context.$warehouse.get('userId')

    return axios.get(`https://my-api/user/${userId)}`)
    .then((res) => {
      return { name: res.data.name }
    })
  }
}

Vuex Support

The changes of the stored values in the user's browser (localStorage, cookie, etc.) can be synced with Vuex state. You can activate this feature this way:

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        vuex: true
      }
    ],
  ]
}

You can optionally set a custom vuex module name:

{
  modules: [
    ['vue-warehouse/nuxt', 
      { 
        vuex: {
          moduleName: 'vuexTrunkOfMemories'
        }
      }
    ],
  ]
}

Advanced Usage

For a complete guide of how to use this plugin, go to the Overview page.

Options

Below are all the available options you can use with Nuxt.js.

Name Type Description
moduleName String The name used to access the module in a Vue instance.
Default value: warehouse
store String A store gather together the engine, storages, and plugins
engine String An engine creates the API
storages An Array of strings A list of storages. A store defines where the data will be stored.
plugins An Array of strings A list of plugins. A plugin extends the default key/value storage functionality.
vuex A Boolean or An Object Add support for syncing the stored values changes with Vuex state.