fix(nuxt): mark entire payload as reactive (#20218)

packages/nuxt/src/app/nuxt.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { getCurrentInstance, reactive, shallowReactive } from 'vue'
+import { getCurrentInstance, reactive } from 'vue'
 import type { App, Ref, VNode, onErrorCaptured } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { HookCallback, Hookable } from 'hookable'
@@ -181,10 +181,10 @@ export function createNuxtApp (options: CreateOptions) {
       get nuxt () { return __NUXT_VERSION__ },
       get vue () { return nuxtApp.vueApp.version }
     },
-    payload: shallowReactive({
+    payload: reactive({
-      data: shallowReactive({}),
+      data: {},
-      state: shallowReactive({}),
+      state: {},
-      _errors: shallowReactive({}),
+      _errors: {},
       ...(process.client ? window.__NUXT__ ?? {} : { serverRendered: true })
     }),
     static: {

test/basic.test.ts

@@ -544,6 +544,7 @@ describe('errors', () => {
     const { page, consoleLogs } = await renderPage('/')
     await page.getByText('Increment state').click()
     await page.getByText('Increment state').click()
+    expect(await page.innerText('div')).toContain('Some value: 3')
     await page.getByText('Chunk error').click()
     await page.waitForURL(url('/chunk-error'))
     expect(consoleLogs.map(c => c.text).join('')).toContain('caught chunk load error')

test/bundle.test.ts

@@ -5,8 +5,16 @@ import { execaCommand } from 'execa'
 import { globby } from 'globby'
 import { join } from 'pathe'
 import { isWindows } from 'std-env'
+import { isRenderingJson } from './utils'
 
-describe.skipIf(isWindows || process.env.ECOSYSTEM_CI)('minimal nuxt application', () => {
+// We only want to run this test for:
+// - ubuntu
+// - vite
+// - in our own CI
+// - using JS (default) payload rendering
+// - production build
+
+describe.skipIf(isWindows || process.env.TEST_BUILDER === 'webpack' || process.env.ECOSYSTEM_CI || !isRenderingJson || process.env.TEST_ENV === 'dev')('minimal nuxt application', () => {
   const rootDir = fileURLToPath(new URL('./fixtures/minimal', import.meta.url))
   const publicDir = join(rootDir, '.output/public')
   const serverDir = join(rootDir, '.output/server')
@@ -40,7 +48,7 @@ describe.skipIf(isWindows || process.env.ECOSYSTEM_CI)('minimal nuxt application
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"93k"')
+    expect(roundToKilobytes(stats.server.totalBytes)).toMatchInlineSnapshot('"92.5k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2650k"')
@@ -107,5 +115,5 @@ async function analyzeSizes (pattern: string | string[], rootDir: string) {
 }
 
 function roundToKilobytes (bytes: number) {
-  return (Math.round(bytes / 1024) + 'k')
+  return (bytes / 1024).toFixed(bytes > (100 * 1024) ? 0 : 1) + 'k'
 }

test/fixtures/basic/pages/index.vue

@@ -18,6 +18,7 @@
     <NuxtLink to="/chunk-error" :prefetch="false">
       Chunk error
     </NuxtLink>
+    Some value: {{ someValue }}
     <button @click="someValue++">
       Increment state
     </button>