feat✨: allow to change and persist cookie before nuxt init

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

packages/nuxt/playground/app.vue

@@ -1,6 +1,7 @@
 <script setup>
 const local = useLocalUser()
 const cookie = useCookieUser()
+const preset_cookie = usePresetCookie()
 </script>
 
 <template>
@@ -12,4 +13,8 @@ const cookie = useCookieUser()
     <span>Cookie:</span>
     <input v-model="cookie.username">
   </div>
+  <div>
+    <span>UserAgent:</span>
+    <input v-model="preset_cookie.token" readonly>
+  </div>
 </template>

packages/nuxt/playground/composables/presetCookie.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+
+export const usePresetCookie = defineStore('preset-cookie', {
+  state: () => ({
+    access_token: 0,
+    refresh_token: 0,
+  }),
+  actions: {
+    setToken(token?: number) {
+      this.access_token = token ?? this.access_token + 1
+      this.refresh_token = token ?? this.refresh_token + 1
+    },
+  },
+  persist: {
+    storage: persistedState.cookies,
+  },
+})

packages/nuxt/playground/middleware/change-cookie.global.ts

@@ -0,0 +1,11 @@
+/* eslint-disable no-console */
+/* eslint-disable n/prefer-global/process */
+export default defineNuxtRouteMiddleware(() => {
+  if (process.client)
+    return
+  const preset_cookie = usePresetCookie()
+  console.log(toRaw(preset_cookie.$state))
+  preset_cookie.setToken()
+  console.log(toRaw(preset_cookie.$state))
+  persistCookie(preset_cookie, ['access_token'])
+})

packages/nuxt/src/constant.ts

@@ -0,0 +1,7 @@
+export const persisted_state = '__persisted-state'
+
+declare module 'h3' {
+  interface H3EventContext {
+    [persisted_state]?: Record<string, any>
+  }
+}

packages/nuxt/src/module.ts

@@ -1,4 +1,4 @@
-import { addImports, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addImports, addPlugin, addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { type CookieOptions } from 'nuxt/app'
 import { type NuxtModule } from 'nuxt/schema'
 import { defu } from 'defu'
@@ -36,9 +36,15 @@ export default defineNuxtModule<ModuleOptions>({
       from: resolve('./runtime/storages'),
     })
 
+    addImports({
+      name: 'persistCookie',
+      from: resolve('./runtime/persist-cookie'),
+    })
+
     // provides plugin
     nuxt.hook('modules:done', () => {
       addPlugin(resolve('./runtime/plugin'), { append: true })
+      addServerPlugin(resolve('./server/plugin'))
     })
   },
 }) satisfies NuxtModule<ModuleOptions>

packages/nuxt/src/runtime/persist-cookie.ts

@@ -0,0 +1,12 @@
+import type { Store } from 'pinia'
+import { pick } from 'pinia-plugin-persistedstate'
+import { persisted_state } from '../constant'
+import { useRequestEvent } from '#imports'
+
+export function persistCookie(store: Store, path?: string[]) {
+  const event = useRequestEvent()
+  if (event) {
+    const cookies = event.context[persisted_state] ??= {}
+    cookies[store.$id] = path ? pick(store.$state, path) : store.$state
+  }
+}

packages/nuxt/src/server/plugin.ts

@@ -0,0 +1,11 @@
+import { persisted_state } from '../constant'
+import { defineNitroPlugin } from '#imports'
+
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('render:response', (_, { event }) => {
+    const cookies = event.context[persisted_state] ?? {}
+    const id_list = Object.keys(cookies)
+    for (const id of id_list)
+      setCookie(event, id, JSON.stringify(cookies[id]))
+  })
+})

packages/nuxt/src/server/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../playground/.nuxt/tsconfig.server.json",
+  "include": ["./", "../runtime/persist-cookie.ts"]
+}

packages/nuxt/tsconfig.json

@@ -1,4 +1,5 @@
 {
   "extends": "./playground/.nuxt/tsconfig.json",
-  "include": ["./src"]
+  "include": ["./src"],
+  "exclude": ["./src/server"]
 }

packages/plugin/src/index.ts

@@ -1,5 +1,7 @@
 import { createPersistedState } from './plugin'
 
+export { pick } from './pick'
+
 export {
   type PersistedStateOptions,
   type PersistedStateFactoryOptions,

packages/plugin/src/pick.ts

@@ -6,13 +6,10 @@ function get(state: StateTree, path: Array<string>): unknown {
   }, state)
 }
 
+const ProtoRE = /^(__proto__)$/
 function set(state: StateTree, path: Array<string>, val: unknown): StateTree {
   return (
-    (path.slice(0, -1).reduce((obj, p) => {
-      if (/^(__proto__)$/.test(p))
-        return {}
-      else return (obj[p] = obj[p] || {})
-    }, state)[path[path.length - 1]] = val),
+    (path.slice(0, -1).reduce((obj, p) => ProtoRE.test(p) ? {} : (obj[p] ||= {}), state)[path.at(-1)!] = val),
     state
   )
 }