From 7dab2ddbb00b16392a15c1b1fa6d932d397b7117 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Tue, 2 Aug 2022 20:21:46 +1000 Subject: [PATCH 1/8] fix(head): render scripts using `body: true` Resolves naming difference with NuxtMeta and @vueuse/head causing the scripts not to be rendered. This allows applies to `link`. --- .../2.guide/2.features/4.head-management.md | 20 +++++++++++++++++++ .../nuxt/src/core/runtime/nitro/renderer.ts | 1 + .../head/runtime/lib/vueuse-head.plugin.ts | 9 ++++++++- test/basic.test.ts | 1 + test/fixtures/basic/pages/head.vue | 6 ++++++ 5 files changed, 36 insertions(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 7cba23c8f94..524f3c51ef0 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -49,6 +49,26 @@ The `titleTemplate` can either be a string, where `%s` is replaced with the titl Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `undefined` to default to the site title. +## Body Meta Tags + +You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of your `` tag. + +For example: + +```vue + +``` + + ## Meta Components Nuxt provides ``, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template. diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index b046437ec07..20ab4e9f8c4 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -171,6 +171,7 @@ export default eventHandler(async (event) => { bodyAppend: normalizeChunks([ `<script>window.__NUXT__=${devalue(ssrContext.payload)}</script>`, _rendered.renderScripts(), + // Note: bodyScripts may contain other tags other than <script> renderedMeta.bodyScripts ]) } diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts index 0e3bb809bfa..f53a9faeb7b 100644 --- a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts +++ b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts @@ -54,6 +54,13 @@ export default defineNuxtPlugin((nuxtApp) => { } if (process.server) { - nuxtApp.ssrContext.renderMeta = () => renderHeadToString(head) + nuxtApp.ssrContext.renderMeta = () => { + const meta = renderHeadToString(head) + return { + ...meta, + // resolves naming difference with NuxtMeta and @vueuse/head + bodyScripts: meta.bodyTags + } + } } }) diff --git a/test/basic.test.ts b/test/basic.test.ts index 9b6bb232d3e..96838259ff0 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -140,6 +140,7 @@ describe('head tags', () => { expect(html).toMatch(/<html[^>]*class="html-attrs-test"/) expect(html).toMatch(/<body[^>]*class="body-attrs-test"/) expect(html).toContain('script>console.log("works with useMeta too")</script>') + expect(html).toContain('<script src="https://a-body-appended-script.com" data-meta-body="true"></script></body>') const index = await $fetch('/') // should render charset by default diff --git a/test/fixtures/basic/pages/head.vue b/test/fixtures/basic/pages/head.vue index 2a7d81659f6..c28c88144d3 100644 --- a/test/fixtures/basic/pages/head.vue +++ b/test/fixtures/basic/pages/head.vue @@ -4,6 +4,12 @@ useHead({ bodyAttrs: { class: 'body-attrs-test' }, + script: [ + { + src: 'https://a-body-appended-script.com', + body: true + } + ], meta: [{ name: 'description', content: 'first' }] }) useHead({ charset: 'utf-16', meta: [{ name: 'description', content: computed(() => `${a.value} with an inline useHead call`) }] }) From 39ba7b0b5dd6a85da39f87e37aa607e0f3b8d762 Mon Sep 17 00:00:00 2001 From: Harlan Wilton <harlan@harlanzw.com> Date: Tue, 2 Aug 2022 20:40:23 +1000 Subject: [PATCH 2/8] chore: fix failing tests --- docs/content/2.guide/2.features/4.head-management.md | 1 - test/basic.test.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 524f3c51ef0..16a3a42da4c 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -68,7 +68,6 @@ useHead({ </script> ``` - ## Meta Components Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template. diff --git a/test/basic.test.ts b/test/basic.test.ts index 96838259ff0..e4352f53e19 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -140,7 +140,7 @@ describe('head tags', () => { expect(html).toMatch(/<html[^>]*class="html-attrs-test"/) expect(html).toMatch(/<body[^>]*class="body-attrs-test"/) expect(html).toContain('script>console.log("works with useMeta too")</script>') - expect(html).toContain('<script src="https://a-body-appended-script.com" data-meta-body="true"></script></body>') + expect(html).toContain('<script src="https://a-body-appended-script.com" data-meta-body></script></body>') const index = await $fetch('/') // should render charset by default From 8c0b0dcf0d87761974859ef70b3d10876f0f44ea Mon Sep 17 00:00:00 2001 From: Harlan Wilton <harlan@harlanzw.com> Date: Tue, 2 Aug 2022 21:25:28 +1000 Subject: [PATCH 3/8] chore: broken tests --- test/basic.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/basic.test.ts b/test/basic.test.ts index 4c8e19725d6..98ea1156a67 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -140,7 +140,7 @@ describe('head tags', () => { expect(headHtml).toMatch(/<html[^>]*class="html-attrs-test"/) expect(headHtml).toMatch(/<body[^>]*class="body-attrs-test"/) expect(headHtml).toContain('script>console.log("works with useMeta too")</script>') - expect(html).toContain('<script src="https://a-body-appended-script.com" data-meta-body></script></body>') + expect(headHtml).toContain('<script src="https://a-body-appended-script.com" data-meta-body="true"></script></body>') const indexHtml = await $fetch('/') // should render charset by default From d1271561530012004b533ca766637d4f8e17b3a7 Mon Sep 17 00:00:00 2001 From: Pooya Parsa <pooya@pi0.io> Date: Tue, 2 Aug 2022 13:30:08 +0200 Subject: [PATCH 4/8] docs: add edge banner --- docs/content/2.guide/2.features/4.head-management.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index ef5e83b97c3..e4711293af3 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -51,6 +51,9 @@ Now, if you set the title to `My Page` with `useHead` on another page of your si ## Body Meta Tags +::StabilityEdge{title="Body Meta Tatgs"} +:: + You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of your `<body>` tag. For example: From c73e1066325e5622116dfb01664311a985ddd1f6 Mon Sep 17 00:00:00 2001 From: pooya parsa <pyapar@gmail.com> Date: Tue, 2 Aug 2022 13:41:33 +0200 Subject: [PATCH 5/8] Update docs/content/2.guide/2.features/4.head-management.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index e4711293af3..22ceaa57085 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -51,7 +51,7 @@ Now, if you set the title to `My Page` with `useHead` on another page of your si ## Body Meta Tags -::StabilityEdge{title="Body Meta Tatgs"} +::StabilityEdge{title="Body Meta Tags"} :: You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of your `<body>` tag. From cbb2cc8af5ff4d7033375262f15f46d2d561eda9 Mon Sep 17 00:00:00 2001 From: pooya parsa <pyapar@gmail.com> Date: Tue, 2 Aug 2022 13:41:42 +0200 Subject: [PATCH 6/8] Update docs/content/2.guide/2.features/4.head-management.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 22ceaa57085..5c12349eec7 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -54,7 +54,7 @@ Now, if you set the title to `My Page` with `useHead` on another page of your si ::StabilityEdge{title="Body Meta Tags"} :: -You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of your `<body>` tag. +You can use the `body: true` option on the `link` and `script` meta tags to append them to the end of the `<body>` tag. For example: From 1ebfec7969ae6aa9d062283e86e9a00106a1037a Mon Sep 17 00:00:00 2001 From: pooya parsa <pyapar@gmail.com> Date: Tue, 2 Aug 2022 13:41:49 +0200 Subject: [PATCH 7/8] Update docs/content/2.guide/2.features/4.head-management.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 5c12349eec7..7ffa13bd9a8 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -66,7 +66,7 @@ useHead({ src: 'https://third-party-script.com', body: true } - ], + ] }) </script> ``` From ed33e1e30fbaa64fcf5ee3ce89a77887d43042bd Mon Sep 17 00:00:00 2001 From: pooya parsa <pyapar@gmail.com> Date: Tue, 2 Aug 2022 13:41:54 +0200 Subject: [PATCH 8/8] Update packages/nuxt/src/core/runtime/nitro/renderer.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- packages/nuxt/src/core/runtime/nitro/renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts index 20ab4e9f8c4..7f157c76bf8 100644 --- a/packages/nuxt/src/core/runtime/nitro/renderer.ts +++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts @@ -171,7 +171,7 @@ export default eventHandler(async (event) => { bodyAppend: normalizeChunks([ `<script>window.__NUXT__=${devalue(ssrContext.payload)}</script>`, _rendered.renderScripts(), - // Note: bodyScripts may contain other tags other than <script> + // Note: bodyScripts may contain tags other than <script> renderedMeta.bodyScripts ]) }