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