SSR vuex store in NUXT

Question

I'm developing vue2+nuxt application and I'm using vuex+persisted state package. In one of components I display div with condition basing on state boolean variable:

<template>
    <div class="nav__topbar" v-if="show">
         ....
    </div>
</template>
<script>
    export default {
        computed: {
            show() {
                return this.$store.state.navInfo.navInfo
            }
        }
    }
</script>

Everything works fine - if this.$store.state.navInfo.navInfo is true then it display if not it disapear. Also after refresh it still work.

The only issue that I can not solve is that when boolean is false after refresh div show for a part of second. It disapear after lets say .2s but even tho it's so fast it still make page "jumping" because .nav__topbar is 100% width and 20vh height. So for a part of second I can see this div then it hide and all page jump up which looks very ugly and I can't ignore that.

Is there any way to prevent this behaviour?

---

Maybe I can make use of this fetch() or asyncData hooks provided by Nuxt?

Answer 1

I had the same issue the last days until I found this comment

plugins/persistedstate.js

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
import cookie from 'cookie'

export default ({store, req, isDev}) => {
    createPersistedState({
        key: 'your_key',
        paths: ['state1', 'state2',...so_on],
        storage: {
            getItem: (key) => process.client ? Cookies.getJSON(key) : cookie.parse(req.headers.cookie||'')[key],
            setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: !isDev }),
            removeItem: (key) => Cookies.remove(key)
        }
    })(store)
}

nuxt.config.js

plugins: [
  { src: '~plugins/persistedstate.js' }
]

Solved my issue, I hope it solves yours, too. Only thing i recognized is that the function is called BOTH on server and on client now. Will try to figue out why.

Answer 2

If using blackfaded's solution , you should add mode: 'client' when declaring plugin in nuxt.config.js :

export default {
  plugins: [
    { src: '~plugins/persistedstate.js', mode: 'client' }
  ]
}

See https://fr.nuxtjs.org/guide/plugins/

(it's the new version of option ssr: false )