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.
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. |