'Nuxt3 + Pinia + VueUse -> useStorage() not working

Setup: I'm using Nuxt3 + Pinia + VueUse.

Goal: I want to save a state of a pinia store to localstorage via VueUse: useStorage.

Problem: For some reason no item is created in localstorage. I feel like I'm missing something here. In components I can use useStorage fine.

in stores/piniaStoreVueUse.js

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

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: useStorage('my-state', 'empty'),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

in components/SampleComponentStatePiniaVueUse.vue

<script lang="ts" setup>
    import { usePiniaStoreVueUse } from '~/stores/piniaStoreVueUse';

    const piniaStoreVueUse = usePiniaStoreVueUse();
</script>

<template>
    <div>
        piniaStoreVueUse.state: {{ piniaStoreVueUse.state }}<br>
        <button class="button" @click="piniaStoreVueUse.enrollState()">
            enrollState
        </button>
        <button class="button" @click="piniaStoreVueUse.emptyState()">
            clearState
        </button>
    </div>
</template>

<style scoped>
</style>

Live Version here

Thank you.

vuejs2nuxt.jsnuxtjs3piniavueuse


Solution 1:[1]

I found an answer to this:

Nuxt3 uses SSR by default. But since useStorage() (from VueUse) uses the browsers localstorage this can’t work.

Solution 1:

Disables SSR in your nuxt.config.js

export default defineNuxtConfig({
  ssr: false,
  
  // ... other options
})

Careful:
This globally disables SSR.

Solution 2:

Wrap your component in <client-only placeholder="Loading…”>

 <client-only placeholder="Loading...">
    <MyComponent class="component-block"/>
 </client-only>

I'd love to hear about other ways to deal with this. I feel like there should be a better way.

Solution 2:[2]

you can use ref with useStorage()

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

export const usePiniaStoreVueUse = defineStore('piniaStoreUseVue', {
    state: () => {
        return { 
            state: ref(useStorage('my-state', 'empty')),
        }
    },
    actions: {
        enrollState() {
            this.state = 'enroll';
        },
        emptyState() {
            this.state = 'empty'; 
        },
    },
    getters: {
    }
});

Solution 3:[3]

I'm folowed this topic two week. My resoleved use plugin pinia-plugin-persistedstate. I'm touch plugin/persistedstate.js and add persist: true, in Pinia defineStore()

First install plugin yarn add pinia-plugin-persistedstate or npm i pinia-plugin-persistedstate

#plugin/persistedstate.js
import { createNuxtPersistedState } from 'pinia-plugin-persistedstate'

export default defineNuxtPlugin(nuxtApp => {
 nuxtApp.$pinia.use(createNuxtPersistedState(useCookie))
})

and

#story.js
export const useMainStore = defineStore('mainStore', {
state: () => {
    return {
        todos: useStorage('todos', []),
        ...
    }
},
persist: true, #add this
getters: {...},
actions: {...}
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DharmanBot
Solution 2
Solution 3 Vladislav Moshikov

Related Questions