Nuxt.js Support

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

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.