Best posts made by Tobias Mesquita

folami, there isn’t hard to make vuex-persistedstate to work in a SSR application, but first u need to understand a couple of things.

1 - LocalStorage and Session Storage isn’t avaliable at server-side, since it’s running on NodeJS.

So if u are persisting u stores in a WebStorage, so u need to ensure than that will happen only on the client-side, boot files can help u to do that.

quasar new boot persist-client

quasar.config.js

boot: [
  ...,
  { path: 'persist-client', server: false }
]

boot/persist-client.js

import createPersistedState from 'vuex-persistedstate'

export default async ({ app, router, store, Vue }) => {
  // window.setTimeout is needed to ensure than data will be rehydrated in the client-side, i know, that is ugly and don't make sense.
  window.setTimeout(() => {
    createPersistedState({
      paths: [...]
    })(store)
  }, 0)
}

but remember, that states will not be available at server-side, so try not persist data who will be needed in your server-side while booting or preFetching your pages.

2 - So, what i can to do with sensitive data like jwt tokens? who need to be stored in the client and the server needs that.

In that case u can persist you state in a Cookie, but remember, u can’t store alot of data inside a cookie, and that will be send to the server in each request.

quasar new boot persist-auth

quasar.config.js

boot: [
  ...,
  'persist-auth'
]

boot/persist-auth.js

import { Cookies } from 'quasar'
import createPersistedState from 'vuex-persistedstate'

export default async ({ app, router, store, Vue }) => {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies

  createPersistedState({
      paths: [...],
      storage: {
        getItem: key => JSON.stringify(cookies.get(key)),
        setItem: (key, value) => cookies.set(key, value),
        removeItem: key => cookies.remove(key)
      }
  })(store)
}