fix(nuxt)!: remove __NUXT__ after hydration (#27745)

This commit is contained in:
Daniel Roe 2024-06-26 12:32:50 +02:00 committed by GitHub
parent c628975efc
commit 5f819ab88e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 24 additions and 6 deletions

View File

@ -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 #### Directory index scanning
🚦 **Impact Level**: Medium 🚦 **Impact Level**: Medium

View File

@ -49,7 +49,6 @@ export default defineNuxtPlugin({
definePayloadReviver(reviver, revivers[reviver as keyof typeof revivers]) definePayloadReviver(reviver, revivers[reviver as keyof typeof revivers])
} }
Object.assign(nuxtApp.payload, await nuxtApp.runWithContext(getNuxtClientPayload)) Object.assign(nuxtApp.payload, await nuxtApp.runWithContext(getNuxtClientPayload))
// For backwards compatibility - TODO: remove later delete window.__NUXT__
window.__NUXT__ = nuxtApp.payload
}, },
}) })

View File

@ -267,7 +267,7 @@ declare module 'nitropack' {
export const clientConfigTemplate: NuxtTemplate = { export const clientConfigTemplate: NuxtTemplate = {
filename: 'nitro.client.mjs', filename: 'nitro.client.mjs',
getContents: () => ` getContents: () => `
export const useRuntimeConfig = () => window?.__NUXT__?.config || {} export const useRuntimeConfig = () => window?.__NUXT__?.config || window?.useNuxtApp?.().payload?.config || {}
`, `,
} }

View File

@ -19,7 +19,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
for (const outputDir of ['.output', '.output-inline']) { for (const outputDir of ['.output', '.output-inline']) {
it('default client bundle size', async () => { it('default client bundle size', async () => {
const clientStats = await analyzeSizes('**/*.js', join(rootDir, outputDir, 'public')) 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(` expect(clientStats.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
[ [
"_nuxt/entry.js", "_nuxt/entry.js",

View File

@ -3,7 +3,7 @@ async function getData () { }
await getData() await getData()
// break server-side // break server-side
const data = window.__NUXT__ const data = window.useNuxtApp().payload
</script> </script>
<template> <template>

View File

@ -1,6 +1,6 @@
<script setup> <script setup>
// break server-side // break server-side
const data = window.__NUXT__ const data = window.useNuxtApp().payload
</script> </script>
<template> <template>