Pinia Cookie Persist - Nuxt 3 Module

Persist Pinia state in cookies with flexible global & per-store options.

---

📦 Installation

1. Install the package:

   1npm install pinia-cookie-persist
   2# or
   3yarn add pinia-cookie-persist

2. Add to nuxt.config.ts:

   1export default defineNuxtConfig({
   2  modules: [
   3    'pinia-cookie-persist' // 👈 Add this
   4  ]
   5})

---

⚙️ Configuration

1. Global Options (Optional)

Set defaults in nuxt.config.ts:

1export default defineNuxtConfig({
2  modules: ['pinia-cookie-persist'],
3  piniaCookiePersist: {
4    globalCookieOptions: { // Applies to all stores unless overridden
5      path: '/',
6      maxAge: 86400, // 1 day
7      secure: true,  // HTTPS-only in production
8      sameSite: 'lax'
9    }
10  }
11})

2. Per-Store Options

Override global settings in any Pinia store:

1export const useAuthStore = defineStore('auth', {
2  state: () => ({
3    token: null,
4    user: null
5  }),
6  persist: {
7    key: 'auth', // Custom cookie name (default: store.$id)
8    paths: ['token'], // Only persist these fields
9    cookieOptions: { // Overrides global settings
10      maxAge: 3600, // 1 hour (for this store only)
11      sameSite: 'strict'
12    }
13  }
14})

---

✨ Features

✅ Flexible Priority System

• Store-level cookieOptions > Global globalCookieOptions > Plugin defaults.

✅ Automatic Cookie Management

• Hydrates store from cookies on page load
• Updates cookies when state changes

✅ Secure by Default

• secure: true in production
• Configurable sameSite policies

✅ SSR Compatible

• Works seamlessly with server-side rendering

---

🔧 Troubleshooting

Q: Why isn't maxAge working?

• Ensure values are in seconds (not milliseconds)
• Check browser DevTools (Application → Cookies)

Q: How to clear persisted data?

1 const store = useStore()
2 store.$reset() // Clears both state and cookie

OR

1   const authCookie = useCookie('auth) //cookie-key-name
2   authCookie.expires = new Date(0); // Clear cookie

Q: Why isn't my cookie persisting?

• Verify paths are correctly specified
• Check browser DevTools → Application → Cookies
• Ensure you're not in Incognito mode

---

📝 Examples

1. Basic Persistence

1// stores/counter.ts
2export const useCounter = defineStore('counter', {
3  state: () => ({ count: 0 }),
4  persist: {
5    paths: ['count'] // Persist only 'count'
6  }
7})

2. Advanced Store

1// stores/auth.ts
2export const useAuth = defineStore('auth', {
3  state: () => ({
4    token: null,
5    user: { name: '', email: '' }
6  }),
7  persist: {
8    key: 'session', // Custom cookie name
9    paths: ['token', 'user.name'], // Partial persistence
10    cookieOptions: {
11      maxAge: 7200, // 2 hours
12      domain: '.yourdomain.com' // Cross-subdomain
13    }
14  }
15})

---

📌 Notes

• Requires Nuxt 3 + Pinia
• No extra dependencies (uses Nuxt's built-in useCookie)
• TypeScript support out of the box

---

📜 License

MIT © Zeeshan Siddique

---

🔗 Links

• GitHub Repository
• Report Issues

---

🎉 Happy persisting!
For support or feature requests, please open an issue on GitHub.