I'm trying to get a value from localStorage to determine the value of a variable in store. I remember trying something similar with vuejs about a year ago and it seemed to work. I also have no issues with this on Reactjs. But for some reason i keep getting this error when doing the same in Nuxt

this is my user.js file

export const state = () => ({
  isLoggedIn: !!localStorage.getItem('userDetails')
})

export const mutations = {
  login(state) {
    state.isLoggedIn = true;
  },
  logout(state) {
    window.localStorage.clear()
    state.isLoggedIn = false;
  }
}

am i approaching this problem wrong? or is this not supposed to work? Any help is appreciated.

I'm trying to get a value from localStorage to determine the value of a variable in store. I remember trying something similar with vuejs about a year ago and it seemed to work. I also have no issues with this on Reactjs. But for some reason i keep getting this error when doing the same in Nuxt

this is my user.js file

export const state = () => ({
  isLoggedIn: !!localStorage.getItem('userDetails')
})

export const mutations = {
  login(state) {
    state.isLoggedIn = true;
  },
  logout(state) {
    window.localStorage.clear()
    state.isLoggedIn = false;
  }
}

am i approaching this problem wrong? or is this not supposed to work? Any help is appreciated.

• javascript
• vue.js
• vuex
• nuxt.js

• Are you doing ssr? – Raffobaffo Commented Jul 8, 2020 at 7:30
• I believe so. Do I have to recreate the app as PWA for this to work? but then i'd be giving up the ssr. Is there another workaround? or recreating as PWA is the only way around this. – Rogelio Commented Jul 8, 2020 at 7:36
• @Roj I added a new answer to get around the SSR problem – Raffobaffo Commented Jul 8, 2020 at 7:38

5 Answers 5

When you use SSR you don't have access to the browser storage.

To do a workaround, you can dispatch an action on the mounted ponent hook.

mounted() {

 if(!process.client) return;
 const savedData = localStorage.getItem("userDetails");
 if(savedData){
    this.$store.mit('myMutation',savedData)
}
}

Try it like this:

isLoggedIn: process.server ? '' : !!localStorage.getItem('userDetails')

The problem is that you try to access the localstorage while nuxt is on the server side. you need to check with process.server if you are on the server side or not. It returns either true or false.

I didnt tested it but with this ternary operator it should work.

Here: https://nuxtjs/faq/window-document-undefined/

In nuxt3, you can just use useCookie to persist small amounts of data. https://v3.nuxtjs/examples/posables/use-cookie#usecookie

For the people ing here from Google, I wrote a plugin that will allow you to do this without having to disable SSR.

https://www.npmjs./package/nuxt-vuex-localstorage-sync

I can see that you have not set any localstorage. Please set localstorage by

localstorage.setItem()