Persist state in nuxt3 not working

[chrispreisler]

Describe the bug

Hey guys,

I would love to use this plugin to persist state, but for me it is not working right now. Maybe I do something wrong, but I have created a very simple reproduction link and when I look into my dev tools, there are no cookies written in to the cookie storage.

Thanks so much for your help.

Best regards Chris

Reproduction

https://stackblitz.com/edit/nuxt-3-z5lbsn?file=app.vue

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 483.38 MB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 9.2.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 108.1.46.138
    Chrome: 108.0.5359.124
    Safari: 15.6.1

Used Package Manager

yarn

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible of the bug.

[prazdevs]

Hi, I tested and it works (with your example)?

The thing is you need to change the state for it to be persisted (or call $persist) as there is no point automatically persisting a state that is equal to the initial state.

[chrispreisler]

Aaaaah that's it. Okay maybe it would be nice to add this in the docs or I overread it. Or this is clear to everyone except me ;) thanks for the great work.

[prazdevs]

I may consider adding a note as you're not the first person surprised by it. It was a behaviour on vuex-persistedstate that I kept, but people who didnt use it may not expect this. :)

[chrispreisler]

Yeah it also confuses me, because useCookie from nuxt directly writes to the cookie storage.

[adamndev]

Just installed in to a fresh Nuxt 3 app and I'm not seeing anything be persisted after following the Nuxt 3 install guide. I'm updating the store state within with a store action, and have tried manually updating the store state within the Vue devtools but no luck. I saw on another thread that it persists once the default state has updated but I can't get any persistence, am I missing something else? Thanks.

[prazdevs]

Just installed in to a fresh Nuxt 3 app and I'm not seeing anything be persisted after following the Nuxt 3 install guide. I'm updating the store state within with a store action, and have tried manually updating the store state within the Vue devtools but no luck. I saw on another thread that it persists once the default state has updated but I can't get any persistence, am I missing something else? Thanks.

feel free to open an issue with a proper reproduction

[folamy]

Hi, I tested and it works (with your example)?

The thing is you need to change the state for it to be persisted (or call $persist) as there is no point automatically persisting a state that is equal to the initial state.

@prazdevs I am having the same issue, how/where do you call $persist I think a working sample will suffice. thanks

[dixhuit]

I was having the same issue too but I seem to have got things working by setting storage globally:

// nuxt.config.ts

piniaPersistedstate: {
  storage: "localStorage",
},

With that I can now see localStorage updating as expected.

When trying to configure storage on a per-store basis I found that:

1. Contrary to the docs, the default storage uses cookies, not localStorage as stated.
2. Setting storage at the store level to "localStorage" didn't seem to result in any persisted storage (not via localStorage, not via cookie, nothing).

I still think there's a problem here.

[dixhuit]

Ah, it seems the docs for Nuxt now suggest setting storage to persistedState.localStorage - this does indeed seem to work.

[kaboume]

I confirm that the module only works if the configuration below is present

piniaPersistedstate: {
     storage: 'localStorage',
   },

[prazdevs]

https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt-3.html#choosing-a-storage

Everything is in the docs. Cookies are used by default with Nuxt as they are SSR friendly while localStorage and sessionStorage are client only.

[kaboume]

And how to explain that :

piniaPersistedstate: {
    storage: 'cookies',
  },

doesn't work on my Nuxt3 App with SSR ?

[prazdevs]

It does work with Nuxt3 and SSR... ?

As state (so many times already), because it "works on my machine", I cannot consider issues without a reproduction repo. ty.

[kaboume]

Hi, For information, I've updated all my npm packages with the last release and now it works with "cookies" storage !!! Thanks!

[DenisBorisenko]

• Nuxt3
• SSR
• "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
• "pinia": "^2.1.6",

Ожидаемое поведение: хранилище будет сохранять state с помощью cookies (хранилище по умолчанию для nuxt3, согласно документации pinia-plugin-persistedstate/nuxt) Действительное поведение: cookies не сохранялись

В моем случае, это происходило потому, что в моем state был объявлен массив. Если его убрать - все отлично работает, как и ожидается