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)
}

Regarding the firebase, i really don’t know, since them is completely out of of knowledge.

But u can use the QCookies to share data between the client and server.

https://quasar.dev/quasar-plugins/cookies#Note-about-SSR

However, you aren’t able to read cookies from another domain, so you can’t read cookies of a third party api, like firebase.

If u wanna to share a vuex module, you would use vuex-persistedstate, here a example.:

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

export default function ({ store, ssrContext }) {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies

  createPersistedState({
    paths: ['shared'],
    filter ({ type }) {
      return type.startsWith('shared')
    },
    storage: {
      getItem (key) {
        return JSON.stringify(cookies.get(key))
      },
      setItem (key, value) {
        cookies.set(key, value)
      },
      removeItem (key) {
        cookies.remove(key)
      }
    }
  })(store)
}

But remember, cookies are very limited, so be very selective about what you’ll persist.