From 5f819ab88e150235f7a2accbadc34b2f0d9b1175 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 26 Jun 2024 12:32:50 +0200
Subject: [PATCH] fix(nuxt)!: remove `__NUXT__` after hydration (#27745)

---
 docs/1.getting-started/12.upgrade.md          | 19 +++++++++++++++++++
 .../src/app/plugins/revive-payload.client.ts  |  3 +--
 packages/nuxt/src/core/templates.ts           |  2 +-
 test/bundle.test.ts                           |  2 +-
 .../basic/components/BreakInAsyncSetup.vue    |  2 +-
 .../basic/components/BreakInSetup.vue         |  2 +-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/1.getting-started/12.upgrade.md b/docs/1.getting-started/12.upgrade.md
index 760b8c306d..ab3f5a1dd8 100644
--- a/docs/1.getting-started/12.upgrade.md
+++ b/docs/1.getting-started/12.upgrade.md
@@ -371,6 +371,25 @@ However, if you are a module author using the `builder:watch` hook and wishing t
   })
 ```
 
+#### Removal of `window.__NUXT__` object
+
+##### What Changed
+
+We are removing the global `window.__NUXT__` object after the app finishes hydration.
+
+##### Reasons for Change
+
+This opens the way to multi-app patterns ([#21635](https://github.com/nuxt/nuxt/issues/21635)) and enables us to focus on a single way to access Nuxt app data - `useNuxtApp()`.
+
+##### Migration Steps
+
+The data is still available, but can be accessed with `useNuxtApp().payload`:
+
+```diff
+- console.log(window.__NUXT__)
++ console.log(useNuxtApp().payload)
+```
+
 #### Directory index scanning
 
 🚦 **Impact Level**: Medium
diff --git a/packages/nuxt/src/app/plugins/revive-payload.client.ts b/packages/nuxt/src/app/plugins/revive-payload.client.ts
index 7deec66618..24452437b6 100644
--- a/packages/nuxt/src/app/plugins/revive-payload.client.ts
+++ b/packages/nuxt/src/app/plugins/revive-payload.client.ts
@@ -49,7 +49,6 @@ export default defineNuxtPlugin({
       definePayloadReviver(reviver, revivers[reviver as keyof typeof revivers])
     }
     Object.assign(nuxtApp.payload, await nuxtApp.runWithContext(getNuxtClientPayload))
-    // For backwards compatibility - TODO: remove later
-    window.__NUXT__ = nuxtApp.payload
+    delete window.__NUXT__
   },
 })
diff --git a/packages/nuxt/src/core/templates.ts b/packages/nuxt/src/core/templates.ts
index 706b32e38f..a3ecadefd4 100644
--- a/packages/nuxt/src/core/templates.ts
+++ b/packages/nuxt/src/core/templates.ts
@@ -267,7 +267,7 @@ declare module 'nitropack' {
 export const clientConfigTemplate: NuxtTemplate = {
   filename: 'nitro.client.mjs',
   getContents: () => `
-export const useRuntimeConfig = () => window?.__NUXT__?.config || {}
+export const useRuntimeConfig = () => window?.__NUXT__?.config || window?.useNuxtApp?.().payload?.config || {}
 `,
 }
 
diff --git a/test/bundle.test.ts b/test/bundle.test.ts
index 4b8fa7990d..32bb10310c 100644
--- a/test/bundle.test.ts
+++ b/test/bundle.test.ts
@@ -19,7 +19,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
   for (const outputDir of ['.output', '.output-inline']) {
     it('default client bundle size', async () => {
       const clientStats = await analyzeSizes('**/*.js', join(rootDir, outputDir, 'public'))
-      expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot(`"106k"`)
+      expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot(`"107k"`)
       expect(clientStats.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
         [
           "_nuxt/entry.js",
diff --git a/test/fixtures/basic/components/BreakInAsyncSetup.vue b/test/fixtures/basic/components/BreakInAsyncSetup.vue
index 44eaf24d5b..33798a2676 100644
--- a/test/fixtures/basic/components/BreakInAsyncSetup.vue
+++ b/test/fixtures/basic/components/BreakInAsyncSetup.vue
@@ -3,7 +3,7 @@ async function getData () { }
 await getData()
 
 // break server-side
-const data = window.__NUXT__
+const data = window.useNuxtApp().payload
 </script>
 
 <template>
diff --git a/test/fixtures/basic/components/BreakInSetup.vue b/test/fixtures/basic/components/BreakInSetup.vue
index 8eef1408d0..495a80546e 100644
--- a/test/fixtures/basic/components/BreakInSetup.vue
+++ b/test/fixtures/basic/components/BreakInSetup.vue
@@ -1,6 +1,6 @@
 <script setup>
 // break server-side
-const data = window.__NUXT__
+const data = window.useNuxtApp().payload
 </script>
 
 <template>