Aceforth Aceforth

# 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.
Last Updated: 2019-06-05T12:51:34.314Z
Caught a mistake or want to contribute to the documentation?
Edit this page on GitHub!
© Aceforth Privacy Code of Conduct