I have created fresh Nuxt 3 project with these dependencies.
"devDependencies": { "@nuxt/content": "^2.0.1", "@types/cookie": "^0.5.1", "@types/js-cookie": "^3.0.2", "nuxt": "3.0.0-rc.4", "tailwindcss": "^3.1.6" }, "dependencies": { "@heroicons/vue": "^1.0.6", "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0", "@pinia/nuxt": "^0.2.0", "cookie": "^0.5.0", "js-cookie": "^3.0.1", "pinia": "^2.0.15", "pinia-plugin-persistedstate-2": "^1.0.0" }
this is a plugin that I have followed by .md instructions for Nuxt.
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2' import Cookies from 'js-cookie' import cookie from 'cookie' export default function ({ $pinia, ssrContext }) { $pinia.use( createPersistedStatePlugin({ // plugin options goes here storage: { getItem: (key) => { // See https://nuxtjs.org/guide/plugins/#using-process-flags if (process.server) { const parsedCookies = cookie.parse(ssrContext.req.headers.cookie) return parsedCookies[key] } else { return Cookies.get(key) } }, // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON. setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: false }), removeItem: (key) => Cookies.remove(key), }, }), ) }
this is my nuxt.config.ts
modules: ['@pinia/nuxt', '@nuxt/content'], plugins: [ {src: '~/plugins/pinia-persisted2.universal.ts']
this is my state/index.ts
import { defineStore } from 'pinia' export const useFiltersStore = defineStore('my-store', () => { const counter = ref<number>(0); return { counter } })
Can you point out if I made some mistake or if I am missing something?
Thank you!
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]
Smartphone (please complete the following information):
Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]
Additional context
Add any other context about the problem here.
Describe the bug I have no errors with pinia, the state is working as expected but I am unable to have persisted state for 'my-state'. Following nuxt 3 universal guide, I have done everything the same but my state is not saved when i change it via code (state.counter++). Also, this code is not updating the counter value in this demo --> https://codesandbox.io/s/github/iendeavor/pinia-plugin-persistedstate-2/tree/main/examples/nuxt-3-universal-example?fontsize=14&hidenavigation=1&theme=dark&view=preview
To Reproduce A reproduce link: https://github.com/ASoldo/nuxt-app
Steps to reproduce the behavior:
I have created fresh Nuxt 3 project with these dependencies.
"devDependencies": { "@nuxt/content": "^2.0.1", "@types/cookie": "^0.5.1", "@types/js-cookie": "^3.0.2", "nuxt": "3.0.0-rc.4", "tailwindcss": "^3.1.6" }, "dependencies": { "@heroicons/vue": "^1.0.6", "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0", "@pinia/nuxt": "^0.2.0", "cookie": "^0.5.0", "js-cookie": "^3.0.1", "pinia": "^2.0.15", "pinia-plugin-persistedstate-2": "^1.0.0" }
this is a plugin that I have followed by .md instructions for Nuxt.
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2' import Cookies from 'js-cookie' import cookie from 'cookie' export default function ({ $pinia, ssrContext }) { $pinia.use( createPersistedStatePlugin({ // plugin options goes here storage: { getItem: (key) => { // See https://nuxtjs.org/guide/plugins/#using-process-flags if (process.server) { const parsedCookies = cookie.parse(ssrContext.req.headers.cookie) return parsedCookies[key] } else { return Cookies.get(key) } }, // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON. setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: false }), removeItem: (key) => Cookies.remove(key), }, }), ) }
this is my nuxt.config.ts
modules: ['@pinia/nuxt', '@nuxt/content'], plugins: [ {src: '~/plugins/pinia-persisted2.universal.ts']
this is my state/index.ts
import { defineStore } from 'pinia' export const useFiltersStore = defineStore('my-store', () => { const counter = ref<number>(0); return { counter } })
Can you point out if I made some mistake or if I am missing something?
Thank you!
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context Add any other context about the problem here.