Persist State using Pinia in Nuxt 3

Question

I am trying to persist the state of a variable in a fresh Nuxt 3 app by using the package pinia-plugin-persistedstate.

I've implemented the steps provided in the guide for nuxt 3:

1. Created the /plugins/persistedstate.ts file.
2. Added persist: true option in the store file.

But nothing is happening. Whenever I refresh the page the store value is getting lost.

Can someone please help me to understand what is the issue here? Also if someone has used the package please share the steps that I may be missing while implementation.

Fundament

Do you use localStorage or cookie setup? – Oribel

I used cookieSetup – Fundament

Have you tried a local storage setup? Do you use server-side rendering? Can you share some code examples? – Oribel

I'm trying to use it and I'm having the same problem. Managed to solve? – Accommodation

in your store function, you use option api or setup? its a bit different to set "persist: true", i test it and it work fine actually, just the problem is it use cookies, and wont work for me – Daffi

Answer 1

I have found this integration to work, but the problem is that a cookie can only be a certain size. That might be the problem. ie Your response object is bigger than the available size to store the data in the cookie

Darleen

Refer to this post: #72204119 I think I found a viable solution – Darleen

Answer 2

As per the documentation here, for Nuxt3, the pinia persisted state plugin must be configured as a module in the nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
})

In Nuxt3, there is no need to create the /plugins/persistedstate.ts file.

Nodal

Answer 3

I had the same issues and decided to go for a quick and easy workaround, without using any plugins:

// app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
import { watch, onBeforeMount } from "vue";
import { usePersistentStore } from "~~/store/persistent";

const ps = usePersistentStore();

onBeforeMount(() => {
  ps.$state = JSON.parse(localStorage.getItem("persistent"));
});
watch(ps.$state, (value) => {
  localStorage.setItem("persistent", JSON.stringify(ps.$state));
});
</script>

Bussy

Answer 4

This worked for me. Instead of using cookies which relies on useCookie composable of nuxt which seems to be having issues presently, select localstorage and turn off the ssr for the pages involved by using <client-side> ... </client-side> or globally on your nuxtjs.config

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: {
    storage: persistedState.localStorage,
  },
})

Here code sample: Then turn off Server side rendering Here a link to help https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt-3.html

Advertise