[Vuejs]-Nuxt JS LocalStorage in Universal mode not working

by

2👍

✅

You don’t have localStorage because there is no such thing in Node.js environment. You also don’t have window and document objects.

https://ssr.vuejs.org/guide/universal.html#access-to-platform-specific-apis

Nuxt.js uses Vue SSR under the hood.

However, you still have a store (Vuex). And it will be synchronized between node and browser.

0👍

I needed data to persist between sessions for GDPR. You can use the mounted life cycle event and wait for window.localStorage to be available. Then assign it to a data property and add a v-if in a wrapper tag so the page doesn’t start rendering before localeStorage is available. I’m doing this with a static nuxt build:

<div v-if="localStorageReady">
    Awesome stuff here...
</div>

data() {
  return {
    localStorageReady: false,
  }
},

mounted() {
  if (window.localStorage) {
    this.localStorageReady = true
  }
}

Leave a comment