vuejs created hook: window/localstorage is not defined

Question

I would like to save authenticated user to localstorage and load them into vuex on the next page load:

created () {
    let user = window.localStorage.getItem('user')
    if(user) {
        this.setUser(JSON.parse(user))
    }
}

I thought that the created hook in my root component would be the right place for this. Unfortunately I get 'window is not defined'.

It works when I put it in the mounted hook instead. Unfortunately this is to late and shows the login page for a few ms.

Where should I put this logic?

Answer 1

I would try first remove window, because you don't need to write that let user = localStorage.getItem('user')

If this is not sufficient just use this vuex plugin https://github.com/robinvdvleuten/vuex-persistedstate it does exactly what you want with zero config. If you want only one value to be persisted you can set this as path in the plugin config.