SSR vuex store in NUXT

2
votes

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?

2
vue.jsvuejs2vuexserver-side-renderingnuxt.js
what persisted package do you use? do you use localStorage as storage in this package? – Max Sinev
I use this one github.com/robinvdvleuten/vuex-persistedstate . Yes localStorage – BT101
I solved this issue by making everythibg default to being hidden and then listening to when the state has been loaded back from LocalStorage, and havibg one additional variable that is just stateLoaded = false initially. So when the state is loaded anythibg that relies on it being loaded has to also rely on that one variable. – Simon Hyll
Yes but that's more like a trick not a real solution. It will still jump but the other way around - page will expand if element conditionally showed will be at the top of page. – BT101

2 Answers

5
votes

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.

0
votes

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)