Search code examples
vue.jsnuxt.jspinia

Pinia persist doesnt work when store is used in plugin with Nuxt 3


Trying to use store in a plugin but I found out that states do not persist when a store is used in a plugin with Nuxt 3. When removed from plugin, persist works. Followed nuxt 3 doc to use pinia in plugin nuxt 3 doc

// store/test.ts

export const useTestStore = defineStore('test-store', {
  state: () => ({
    count: 0,
  }),
  actions: {
    addCount() {
      this.count++;
    },
  },
  persist: {
    storage: persistedState.localStorage,
  },
});
// plugin/store.ts
export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      store: useTestStore($pinia),
    },
  };
});

Reproduction using stackblitz


Solution

  • Author of pinia persist has gotten back to me, turns out you should skip defining the plugin in nuxt.config and it will work. Link to issue: https://github.com/prazdevs/pinia-plugin-persistedstate/issues/190