Vue useStorage (usevue) always starting clean rather than importing state in Pinia store

Question

I built my app on top of vitesse-nuxt3, and all is going well except for trying to use LocalStorage via vueuse.

Component:

<script setup lang="ts">
const { test } = useTestStore()
</script>

<template>
  <div>
    <pre>{{ test }}</pre>
    <hr>
    <input
      :id="slug"
      v-model="value"
      type="text"
    >
  </div>
</template>

Pinia Store:

import { acceptHMRUpdate, defineStore } from 'pinia'
import { useStorage } from '@vueuse/core'

export const useTestStore = defineStore('test', () => {
  const test = ref(
    useStorage('test', {
      initials: 'It is initials',
    }),
  )

  return ({
    test,
  })
})

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useTestStore, import.meta.hot))

I watch it set the data (in Chrome's dev tools), but it always reloads the default data instead rather than persisting between refreshes.

Thank you.

Answer 1

The problem in your demo is that the component is being rendered server-side, which has no Local Storage, so useStorage() defaults to the given initial value.

One workaround is to render the component on the client only, using the <client-only> component:

<client-only>
  <component-that-uses-local-storage />
</client-only>

demo

Or if you are using useStorage() in a pinia store you can skip hydration to avoid the server side generated state making it to the client side, see here.

export const useTestStore = defineStore('test', () => {
  const test = useStorage('test', {
    initials: 'It is initials',
  })

  return {
    test: skipHydrate(test),
  )
})