[Nuxt] Value is not restored, but available in storage

Create nuxt project and add vuex-presist

store/index.js

import Vue from 'vue';

export const state = () => ({
    preview: {},
    templateR: false
})

export const mutations = {
    update(state, data) {
        console.log(state)
        for (let field of Object.keys(data)) {
            Vue.set(state, field, data[field]);
        }
    },
}
export const getters = {
}

nuxt.config.js

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false },
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

package.json

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "My sublime Nuxt.js project",
  "author": "Mateusz",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0-rc.11",
    "nuxt": "^2.0.0",
    "vuex-persist": "^2.0.1"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

and finally:

  <div class="container">
 
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  mounted: function() {
    // this.$store.commit('update', {preview: 1})
    console.log(this.$store.state.preview)
  }
}
</script>

Uncomment this.$store.commit('update', {preview: 1}) only to save value (which works), comment this line and then restart app an, value will not be loaded, why?

[itsfarseen]

I removed window.onNuxtReady in plugins/vuex-persist.js:

export default ({ store }) => {
  new VuexPersistence({
    key: 'key'
  }).plugin(store)
}

Now it appears to work.

[nwittwer]

This fix https://github.com/championswimmer/vuex-persist/issues/119#issuecomment-504863193 seems to work for Nuxt apps with ssr: false (previously called: mode: 'spa').

However it doesn’t seem to work for ssr: true (previously called mode: 'universal'). The window.onNuxtReady seems to be important for SSR apps; not having it leads to errors about the DOM being out of sync.

Docs about the ssr property: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr