CODEWITHSUNDEEP
nuxt3.jspinia
Gaurav Gusain
Gaurav Gusain

Reputation: 86

Persist State using Pinia in Nuxt 3

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.

Upvotes: 6

Views: 14444

Answers (6)

Mithri
Mithri

Reputation: 1

Don't need to create the /plugins/persistedstate.ts file. just define '@pinia-plugin-persistedstate/nuxt' in nuxt.config.ts under modules

and then in pinia store file do :

persist: {
  storage: localStorage, // you can also choose sessionStorage
  pick: [
    "persisted state" //it should be inside ""
  ]
}

Upvotes: 0

Zack
Zack

Reputation: 1

  • install both @pinia-plugin-persistedstate/nuxt and pinia-plugin-persistedstate
  • add @pinia-plugin-persistedstate/nuxt to nuxt modules and you dont need the plugin

Upvotes: 0

rysama
rysama

Reputation: 1796

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.

Upvotes: 4

mrvnklm
mrvnklm

Reputation: 1848

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>

Upvotes: 1

Chukwuemeka Odigwe
Chukwuemeka Odigwe

Reputation: 1

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

Upvotes: 0

Franco Labuschagne
Franco Labuschagne

Reputation: 151

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

Upvotes: 3

Related Questions