feat(nuxt): do not serialize skipHydrate properties

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

Author: kabalage

packages/nuxt/__tests__/nuxt.spec.ts

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

packages/nuxt/playground/app.vue

@@ -1,21 +1,3 @@
-<script lang="ts" setup>
-// import {useCounter }from '~/stores/counter'
-
-const counter = useCounter()
-
-useTestStore()
-useSomeStoreStore()
-
-// await useAsyncData('counter', () => counter.asyncIncrement().then(() => true))
-
-if (import.meta.server) {
-  counter.increment()
-}
-</script>
-
 <template>
-  <div>
-    <p>Count: {{ counter.$state.count }}</p>
-    <button @click="counter.increment()">+</button>
-  </div>
+  <NuxtPage />
 </template>

packages/nuxt/playground/nuxt.config.ts

@@ -3,9 +3,11 @@ import { defineNuxtConfig } from 'nuxt/config'
 import piniaModule from '../src/module'
 
 export default defineNuxtConfig({
+  devtools: { enabled: true },
   alias: {
     pinia: fileURLToPath(new URL('../../pinia/src/index.ts', import.meta.url)),
   },
+
   modules: [piniaModule],
 
   pinia: {
@@ -19,4 +21,6 @@ export default defineNuxtConfig({
       __TEST__: false,
     },
   },
+
+  compatibilityDate: '2024-09-26',
 })

packages/nuxt/playground/pages/index.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+// import {useCounter }from '~/stores/counter'
+
+const counter = useCounter()
+
+useTestStore()
+useSomeStoreStore()
+
+// await useAsyncData('counter', () => counter.asyncIncrement().then(() => true))
+
+if (import.meta.server) {
+  counter.increment()
+}
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ counter.$state.count }}</p>
+    <button @click="counter.increment()">+</button>
+  </div>
+</template>

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

@@ -0,0 +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>
+  <p>{{ skipHydrateState }}</p>
+</template>

packages/nuxt/playground/stores/with-skip-hydrate.ts

@@ -0,0 +1,16 @@
+import { skipHydrate } from 'pinia'
+
+export const useWithSkipHydrateStore = defineStore('with-skip-hydrate', () => {
+  const skipped = skipHydrate(
+    ref({
+      text: 'I should not be serialized or hydrated',
+    })
+  )
+  return { skipped }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useWithSkipHydrateStore, import.meta.hot)
+  )
+}

packages/nuxt/playground/tsconfig.json

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

packages/nuxt/src/module.ts

@@ -11,6 +11,7 @@ import {
   addImportsDir,
 } from '@nuxt/kit'
 import type { NuxtModule } from '@nuxt/schema'
+import { fileURLToPath } from 'node:url'
 
 export interface ModuleOptions {
   /**
@@ -44,7 +45,9 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     disableVuex: true,
   },
   setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url)
+    // configure transpilation
+    const { resolve } = createResolver(import.meta.url)
+    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
 
     // Disable default Vuex store (Nuxt v2.10+ only)
     if (
@@ -58,7 +61,7 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     }
 
     // Transpile runtime
-    nuxt.options.build.transpile.push(resolver.resolve('./runtime'))
+    nuxt.options.build.transpile.push(resolve(runtimeDir))
 
     // Make sure we use the mjs build for pinia
     nuxt.options.alias.pinia =
@@ -76,14 +79,15 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     // https://github.com/nuxt/framework/issues/9130
     nuxt.hook('modules:done', () => {
       if (isNuxt2()) {
-        addPlugin(resolver.resolve('./runtime/plugin.vue2'))
+        addPlugin(resolve(runtimeDir, 'plugin.vue2'))
       } else {
-        addPlugin(resolver.resolve('./runtime/plugin.vue3'))
+        addPlugin(resolve(runtimeDir, 'plugin.vue3'))
+        addPlugin(resolve(runtimeDir, 'payload-plugin'))
       }
     })
 
     // Add auto imports
-    const composables = resolver.resolve('./runtime/composables')
+    const composables = resolve(runtimeDir, 'composables')
     addImports([
       { from: composables, name: 'defineStore' },
       { from: composables, name: 'acceptHMRUpdate' },
@@ -93,12 +97,12 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
 
     if (!options.storesDirs) {
       // resolve it against the src dir which is the root by default
-      options.storesDirs = [resolver.resolve(nuxt.options.srcDir, 'stores')]
+      options.storesDirs = [resolve(nuxt.options.srcDir, 'stores')]
     }
 
     if (options.storesDirs) {
       for (const storeDir of options.storesDirs) {
-        addImportsDir(resolver.resolve(nuxt.options.rootDir, storeDir))
+        addImportsDir(resolve(nuxt.options.rootDir, storeDir))
       }
     }
   },

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

@@ -0,0 +1,20 @@
+import {
+  definePayloadPlugin,
+  definePayloadReducer,
+  definePayloadReviver,
+} from '#imports'
+import { shouldHydrate } from 'pinia'
+
+/**
+ * Removes properties marked with `skipHydrate()` to avoid sending unused data to the client.
+ */
+const payloadPlugin = definePayloadPlugin(() => {
+  definePayloadReducer(
+    'skipHydrate',
+    // We need to return something truthy to be treated as a match
+    (data: unknown) => !shouldHydrate(data) && 1
+  )
+  definePayloadReviver('skipHydrate', (_data: 1) => undefined)
+})
+
+export default payloadPlugin

packages/nuxt/src/runtime/plugin.vue3.ts

@@ -1,6 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import type { Pinia } from 'pinia'
 import { defineNuxtPlugin, type Plugin } from '#app'
+import { toRaw } from 'vue'
 
 const plugin: Plugin<{ pinia: Pinia }> = defineNuxtPlugin({
   name: 'pinia',
@@ -10,7 +11,7 @@ const plugin: Plugin<{ pinia: Pinia }> = defineNuxtPlugin({
     setActivePinia(pinia)
 
     if (import.meta.server) {
-      nuxtApp.payload.pinia = pinia.state.value
+      nuxtApp.payload.pinia = toRaw(pinia.state.value)
     } else if (nuxtApp.payload && nuxtApp.payload.pinia) {
       pinia.state.value = nuxtApp.payload.pinia as any
     }