Using @vueuse/nuxt 's useStorage with nuxt and pinia

[last oak]

I am trying to set/get key value pairs to localStorage with vueuse's useStorage in a pinia store. It set's and gets the value fine but after a refresh it resets the value to the default value.

Here is my store

import { useStorage } from '@vueuse/core';

export const useMyStore = defineStore(
  'my-store',
  () => {
    const myKV = useStorage('mykv', false);

    return {
      myKV,
    };
  },
);

And here is the component

<script setup lang="ts">
const myStore = useMyStore();
</script>
<template>
<div>
  <span>{{ myStore.myKV }}</span>
  <button @click="myStore.myKV = !myStore.myKV">Toggle</button>
</div>
</template>

[sonic yarrow]

Hi @last oak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your usage of @vueuse/core's useStorage inside a Pinia store is correct for basic localStorage binding, and it should persist values across reloads. However, if you are experiencing that the value resets to the default after a refresh, there are a few things to check:

1. Pinia Store Initialization: Make sure your store is actually being used in your component. Pinia stores are only initialized when you import and use them in a component. If you don't, the store (and thus useStorage) won't be active, and nothing will be persisted. This is a common pitfall—see the example below:

   <script setup>
   import { useMyStore } from '~/stores/my-store'
   const myStore = useMyStore()
   </script>
   

   If you don't import and call useMyStore(), the store won't be initialized and the storage won't persist as expected. This was the issue in a similar case, and importing the store in a component resolved it Pinia store does not initialise.

2. File Extension and Import Path: Double-check that your import path and file extension are correct. For example, if your store file is my-store.ts, make sure you import from '~/stores/my-store' (not '~/stores/my-store.js' unless you are using JS).

3. SSR Caveats: If you are using SSR (which Nuxt 3 does by default), remember that localStorage is only available on the client side. If you try to access it on the server, it will not work. Make sure any logic that depends on localStorage is only run on the client.

4. DevTools and Hot Module Replacement: Sometimes, during development, hot module replacement or devtools can cause unexpected resets. Try a full page reload or test in a production build.

5. Default Value: If the key does not exist in localStorage, useStorage will use the default value you provide. If something is clearing your localStorage (e.g., browser settings, another part of your app), it will reset.

Summary:

• Ensure your store is imported and used in a component.
• Confirm correct import paths and file extensions.
• Be aware of SSR limitations.
• Check for anything that might clear localStorage.

If you follow these steps and still experience issues, please provide more details about your Nuxt version, browser, and any relevant configuration.

Reference:
This issue and its solution are discussed in Pinia store does not initialise.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@last oak Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[last oak]

Ok this doesn't help at all 😦 maybe it's related with SSR but I have no idea how to solve that. Normally pinia works with SSR automatically

[muted briar]

Yes that's because on the server you don't have access to the localStorage. Try wrapping you're component with the ClientOnly component.

<!-- your component here -->
</ClientOnly>```

[last oak]

I see. So I should probably use <ClientOnly> to the deepest level possible as a best practice right?

[last oak]

thanks I guess this is the way then 🙂

[muted briar]

Yes and there is another solution as well. I wasn't aware of this one before. You can mark state in pinia as client-only with skipHydrate. See Chapter Bonus: Using client-only state with SSRin this article: https://masteringpinia.com/blog/my-top-5-tips-for-using-pinia

that makes it even easier and you don't have to wrap your component in a ClientOnlycomponent.

[last oak]

Oh yes. That's perfect and exactly what I need. Pinia hasn't documented this on guide section. It's only in the API part of the documentation. Thanks a lot. 👍 ✅