conflict in using @nuxtjs/auth

[Qanah]

how to use vuex-persist and @nuxtjs/auth I can't login when I implement nuxt plugin

import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
      /* your options */
      modules: ['account']
    }).plugin(store)
  })
}

[kilakewe]

+1 I'm experiencing the same issues too.

[jremi]

I also have the same exact issue.

FYI: For anyone else that comes to this issue... I was having this issue with the following dependencies:

    "nuxt": "^2.11.0",
    "@nuxtjs/auth": "^4.8.5",

I was able to swap out this package and use another vuex persistence library called vuex-persistedstate (https://github.com/robinvdvleuten/vuex-persistedstate). This package is working great with my Nuxt project using @nuxtjs/auth package. If you don't want the headache consider swapping the package 🙏

[PRAJINPRAKASH]

Still some issues with Auth module

use this

// ~/store/index.js
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

export const plugins = [vuexLocal.plugin]

instead of this in the documentation

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
    /* your options */
    }).plugin(store);
  });
}

[dtmzr]

Like @jremi I switched to vuex-persistedstate which solves this issue. Thanks a lot for sharing this!

[anandkkpr]

Still some issues with Auth module

use this

// ~/store/index.js
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

export const plugins = [vuexLocal.plugin]

instead of this in the documentation

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
    /* your options */
    }).plugin(store);
  });
}

Thank you SO MUCH for this @PRAJINPRAKASH !!! This was a life saver!!!

In order to get things working on my end, I followed your instructions and did the following:

in /nuxt.config.js, I made the following edit:

from

  plugins: [
    '@plugins/vue-inject-uuid',
    '@plugins/vue-inject-lodash',
    '@plugins/vue-inject-authUtils',
    '@plugins/vuetify-datetime-picker',
    {src: '@/plugins/vuex-persist', mode: 'client'},
  ],

to (removed the Vuex Persist plugin that the Vuex-Persist doc says we need to have)

  plugins: [
    '@plugins/vue-inject-uuid',
    '@plugins/vue-inject-lodash',
    '@plugins/vue-inject-authUtils',
    '@plugins/vuetify-datetime-picker',
  ],

then... I deleted the plugin file - /plugins/vuex-persist.js - which, for posterity's sake had the following code in it:

/**
 * @see https://github.com/championswimmer/vuex-persist#tips-for-nuxt
 */
import VuexPersistence from 'vuex-persist';

export default ({store}) => {
  if (process.browser) {
    window.onNuxtReady(() => {
      new VuexPersistence({
        strictMode: process.env.NODE_ENV !== 'production',
        storage: localStorage,
      }).plugin(store);
    });
  }
};

Finally, I updated my root Store file with @PRAJINPRAKASH's suggestion - but also needed to ensure the Vue-Persist RESTORE_MUTATION mutation is declared as well - else Vuex-Persist will be unable to restore the state from on page reload.

In the root Store file at /store/index.js:

import VuexPersistence from 'vuex-persist';

const vuexPersist = new VuexPersistence({
  strictMode: process.env.NODE_ENV !== 'production',
  storage: window.localStorage,
});

export const mutations = {
  RESTORE_MUTATION: vuexPersist.RESTORE_MUTATION,
};

export const plugins = [vuexPersist.plugin];

So, with just the above file, I've finally got Vuex-Persist working with Nuxt.js with Nuxt Auth module turned on and working AND, the main reason why I was having so many issues - that, if you are logged out then refresh your login page (as configured in nuxt.config.js in the auth module's redirect options) and then try to login, upon successful login, the page would not redirect to the next page - regardless of whether you set the auth.redirect.home option in nuxt.config.js or, if you use this.$auth.loginWith('local',...).then(()=>{ this.$router.push('/'); });, neither option worked.

The above has finally fixed things, what a relief - and the end of some 5 days of debugging!

EDIT:

As far as this Issue is concerned, I think it would be great if the Vuex-Persist documentation could benefit from being updated so that the section for use with Nuxt explains what to do if a project uses Nuxt Auth.

I'd also really like to understand what the problem was/is - @PRAJINPRAKASH, could you please explain why the existing documentation causes this issue if you're able to?

Thanks everyone!

[zakarialounes]

@anand-k-p [vuex] mutations should be function but "mutations.RESTORE_MUTATION" is undefined. How do you manage to use window.localStorage inside the store/index.js please?