fix(nuxt): fix skipHydrate payload plugin and add test

Author: kabalage

packages/nuxt/__tests__/nuxt.spec.ts

@@ -34,8 +34,9 @@ describe('works with nuxt', async () => {
     expect(html).toContain('Count: 101')
   })
 
-  it.todo('drop state that is marked with skipHydrate', async () => {
+  it('drops state that is marked with skipHydrate', async () => {
     const html = await $fetch('/skip-hydrate')
-    // TODO:
+    expect(html).not.toContain('I should not be serialized or hydrated')
+    expect(html).toContain('skipHydrate-wrapped state is correct')
   })
 })

packages/nuxt/playground/pages/skip-hydrate.vue

@@ -1,8 +1,13 @@
 <script lang="ts" setup>
 const store = useWithSkipHydrateStore()
+const skipHydrateState = computed(() => {
+  return store.skipped?.text === 'I should not be serialized or hydrated'
+    ? 'skipHydrate-wrapped state is correct'
+    : 'skipHydrate-wrapped state is incorrect'
+})
 </script>
 
 <template>
   <h2>skipHydrate() test</h2>
-  <pre>{{ store.skipped }}</pre>
+  <p>{{ skipHydrateState }}</p>
 </template>

packages/nuxt/playground/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/nuxt/src/runtime/payload-plugin.ts

@@ -11,9 +11,10 @@ import { shouldHydrate } from 'pinia'
 const payloadPlugin = definePayloadPlugin(() => {
   definePayloadReducer(
     'skipHydrate',
-    (data: unknown) => !shouldHydrate(data) && undefined
+    // We need to return something truthy to be treated as a match
+    (data: unknown) => !shouldHydrate(data) && 1
   )
-  definePayloadReviver('skipHydrate', (data: undefined) => data)
+  definePayloadReviver('skipHydrate', (_data: 1) => undefined)
 })
 
 export default payloadPlugin