Make compatible with SSR about vuex-persistedstate

[DiegoPerea]

@raymayemir We are working around it, manually getting the cookies both in the entry-client (but it's not immediate) and in the component we are needing the data, before it requests it.
Useful info:
-Remember a coookie can only have 4kb, so maybe all your store can't live in one cookie.
-Vuex-persist (https://github.com/championswimmer/vuex-persist/) lets you reduce your store, so you save all you need in different cookies.

[fogil]

Or make it so references to window object are removed, then on mount() we can call some static method to restore state.

I don't mind the first frame of the app shows things in the default state (so SSR + client render are the same), but we need the references to window object removed so that the library would work in a SSR environment.

[CDuane]

Is there any update on this? I'm trying to make this work with Nuxt.js but no luck so far. Thanks.

[romandrahan]

👍 same issue for me.

[robinvdvleuten]

So it turned out the customization example was currently not reflecting the latest changes to the underlaying API. I've updated it accordingly and if followed correctly, it would solve this SSR issue;

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

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => Cookies.getJSON(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: (key) => Cookies.remove(key);
      }
    })
  ]
})

As you can see, you'll have to overwrite the storage key instead of the getState and setState keys. If it's still not working, please open another issue.

[DiegoPerea]

Its not working for me. The cookie comes back to original every time i update the page,

[raymayemir]

@DiegoPerea +

You managed to solve?

[edum18]

Still not working for me too... Lack of documentation

[raymayemir]

Still not working for me too... Lack of documentation

@edum18
what exactly is not working?

[bswank]

@robinvdvleuten Is there any update and/or a new issue regarding this?

I implemented your method into my Nuxt app and the cookie is being properly set, but when I load the page, I'm getting Cookies.getJSON(key) = undefined. Not sure why, but this has always been my issue with trying to grab cookies on the server-side of Nuxt.

Please advise, if you could!

[robinvdvleuten]

@bswank first things that comes to mind is that you have not set secure to false when writing to cookies and thus no cookie will be persisted on localhost.

[bswank]

@robinvdvleuten Thanks for your response. The cookie is being persisted just fine and secure is set to false.

The problem I've faced in the past is that I call Cookies.set() upon login, and on nuxtServerInit, or asyncData when I'm trying to get that cookie prior to render, it's always undefined. Your solution produces the same result.

Just wondering if this is possible to fix. I need my store/ccokies prior to render so I can pre-fetch data. Otherwise, I have no place to store a logged-in user ID, etc.

[robinvdvleuten]

@bswank I don't know what nuxtServerInit and asyncData does, sorry. I am not a Nuxt.js user and this library predates them. The cookies library does not depend on Nuxt.js, so if anything there is undefined, something else may go wrong. If you think that this is an issue with vuex-persisted state, please open a new issue with a codesandbox containing the issue. I simply do not have the time to guess everybody's Vue / Nuxt / Vuex setup.

[bswank]

@robinvdvleuten No worries; thanks anyway! Just wanted to see if your proposed solution was usable on the server-side of Nuxt.