Nuxt 3 + Pinia, Store property not hydrated from server to client

[soylomass]

Reproduction

Steps to reproduce the bug

1. Create a Nuxt 3 application with Pinia as the state management library
2. Set a property of a Pinia store on the setup function of App.vue, only on the server side using process.server check
3. Run the application and access it from a browser
4. Check the state of the Pinia store in the client

Expected behavior

I expect the Pinia store on the client to be hydrated with the property set on the server side. This would allow the client to access the updated store state and render the application accordingly.

Is this what's supposed to happen? Or I misunderstood?

Actual behavior

The Pinia store on the client does not have the property set on the server side. The store state is not being hydrated from the server to the client, causing inconsistencies between the server-rendered and client-rendered content.

Additional information

No response

[soylomass]

After more tests, it seems it works correctly using Option Stores, but not with Setup Stores, which I was using.

[soylomass]

After yet more tests, it works with setup stores too, but only if you return the state properties unchanged.

I'm used to returning a readonly property and a setter function for each store property, to prevent direct change of properties. But looks like this doesn't work well with hydration:

What I was doing:

export const useLanguageStore = defineStore("language", () => {
  const language = ref("en");

  function setLanguage(lang: string) {
    language.value = lang;
  }

  return {
    language: **readonly(language)**,
    setLanguage,
  };
});

What needs to be done:

export const useLanguageStore = defineStore("language", () => {
  const language = ref("en");

  function setLanguage(lang: string) {
    language.value = lang;
  }

  return {
    **language**,
    setLanguage,
  };
});

Is there any workaround to continue using readonly?

[ryanrobertsname]

Just to add to this discussion, I ran across a similar issue and believe it's not limited to the readonly scenario (doesn't apply to my case.)

In my example I have a simple setup store with a single ref and I want provide a get function for use in my Nuxt page. In addition, I have a hydration function that is called via a Nuxt plugin.

If my store only returns the get function and hydration function I end up with a Hydration text content mismatch warning. If I also return the ref the warning goes away (even though I never access or use it).

Store Example (doesn't work):

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', () => {
   const things = ref('no things here');
	
    function getThings() {
        return things.value;
    }
    
    function hydrate() {
        things.value = 'now we have things!';
    }
    
    return {
        getThings,
        hydrate, 
    };
});

Warning Message:
[Vue warn]: Hydration text content mismatch in <div>:
- Client: now we have things!
- Server: no things here

Return the ref as well (this works):

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', () => {
   const things = ref('no things here');
	
    function getThings() {
        return things.value;
    }
    
    function hydrate() {
        things.value = 'now we have things!';
    }
    
    return {
        getThings,
        hydrate,
        things,  // Added this to make it work, even though it is never used
   };
});

For clarity on the other moving parts, here is the page component and the plugin that calls the hydrate function.

Page Component:

<template>
    <div>
        {{ myThings }}
    </div>
</template>

<script setup>
import { useMyStore } from '~/stores/myStore.js';
const myStore = useMyStore();

const myThings = myStore.getThings();

</script>

Plugin calling hydration function:

import { useMyStore } from '~/stores/myStore.js';

export default defineNuxtPlugin(async (nuxtApp) => {

	const myStore = useMyStore(nuxtApp.$pinia);
	myStore.hydrate();

});

[p12s]

Works for me with SSR (persist: true):

import { defineStore } from 'pinia'

export type ServiceType = {
  id: number
  name: string
  createdAt: string
}

export const useSourceStore = defineStore('source', {
  state: () => {
    return {
      serviceTypes: <ServiceType[]> [],
    }
  },
  persist: true, // <--
  getters: {
    ...
  },
  actions: {
    ...
  },
})

[zestlee1106]

@soylomass
I also use readonly, so I can't get the data of the store from the client side.
Have you found a solution?