Nuxt•3mo ago

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

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,
    };
  },
);

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>

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

9 Replies

kapa.ai•3mo ago

Hi @zigglearner1235. 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>

   <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: ----------------------

kapa.ai•3mo ago

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

zigglearner1235OP•3mo ago

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

marc•3mo ago

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

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

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

zigglearner1235OP•3mo ago

I see. So I should probably use <ClientOnly> to the deepest level possible as a best practice right? thanks I guess this is the way then 🙂

marc•3mo ago

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

My Top 5 Tips for using Pinia

The Top 5 Tips for using Pinia by Eduardo San Martin Morote, the author of Pinia himself

marc•3mo ago

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

zigglearner1235OP•3mo ago

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. 👍 ✅

marc•3mo ago

you're welcome!

Gaming

Programming

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

Did you find this page helpful?