fix(nuxt): avoid duplicate titleTemplate (#6296)

nuxt · Aug 2, 2022 · aa653ef · aa653ef
1 parent c72093b
commit aa653ef
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 22 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
@@ -47,7 +47,7 @@ The `titleTemplate` can either be a string, where `%s` is replaced with the titl
 </script>
 ```
 
-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.
+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 `null` to default to the site title.
 
 ## Meta Components
 

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -38,7 +38,7 @@
     "@nuxt/vite-builder": "^3.0.0-rc.6",
     "@vue/reactivity": "^3.2.37",
     "@vue/shared": "^3.2.37",
-    "@vueuse/head": "^0.7.8",
+    "@vueuse/head": "^0.7.9",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.0.0",

diff --git a/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts b/packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts
@@ -25,8 +25,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 
     const headObj = computed(() => {
       const overrides: MetaObject = { meta: [] }
-      if (titleTemplate.value && 'title' in meta.value) {
-        overrides.title = typeof titleTemplate.value === 'function' ? titleTemplate.value(meta.value.title) : titleTemplate.value.replace(/%s/g, meta.value.title)
+      // cast a null titleTemplate to an empty string so @vueuse/head ignores it
+      if (titleTemplate.value === null) {
+        overrides.titleTemplate = ''
       }
       if (meta.value.charset) {
         overrides.meta!.push({ key: 'charset', charset: meta.value.charset })

diff --git a/test/basic.test.ts b/test/basic.test.ts
@@ -131,21 +131,21 @@ describe('pages', () => {
 
 describe('head tags', () => {
   it('should render tags', async () => {
-    const html = await $fetch('/head')
-    expect(html).toContain('<title>Using a dynamic component - Fixture</title>')
-    expect(html).not.toContain('<meta name="description" content="first">')
-    expect(html).toContain('<meta charset="utf-16">')
-    expect(html).not.toContain('<meta charset="utf-8">')
-    expect(html).toContain('<meta name="description" content="overriding with an inline useHead call">')
-    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>')
-
-    const index = await $fetch('/')
+    const headHtml = await $fetch('/head')
+    expect(headHtml).toContain('<title>Using a dynamic component - Title Template Fn Change</title>')
+    expect(headHtml).not.toContain('<meta name="description" content="first">')
+    expect(headHtml).toContain('<meta charset="utf-16">')
+    expect(headHtml).not.toContain('<meta charset="utf-8">')
+    expect(headHtml).toContain('<meta name="description" content="overriding with an inline useHead call">')
+    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>')
+
+    const indexHtml = await $fetch('/')
     // should render charset by default
-    expect(index).toContain('<meta charset="utf-8">')
+    expect(indexHtml).toContain('<meta charset="utf-8">')
     // should render <Head> components
-    expect(index).toContain('<title>Basic fixture - Fixture</title>')
+    expect(indexHtml).toContain('<title>Basic fixture</title>')
   })
 
   // TODO: Doesn't adds header in test environment

diff --git a/test/fixtures/basic/pages/head.vue b/test/fixtures/basic/pages/head.vue
@@ -1,6 +1,8 @@
 <script setup>
 const a = ref('')
 useHead({
+  // title template function example
+  titleTemplate: title => `${title} - Title Template Fn Change`,
   bodyAttrs: {
     class: 'body-attrs-test'
   },

diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
@@ -24,6 +24,11 @@ import { useRuntimeConfig } from '#imports'
 
 const config = useRuntimeConfig()
 
+// reset title template example
+useHead({
+  titleTemplate: null
+})
+
 const foo = useFoo()
 const bar = useBar()
 </script>
diff --git a/yarn.lock b/yarn.lock
@@ -3120,12 +3120,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vueuse/head@npm:^0.7.8":
-  version: 0.7.8
-  resolution: "@vueuse/head@npm:0.7.8"
+"@vueuse/head@npm:^0.7.9":
+  version: 0.7.9
+  resolution: "@vueuse/head@npm:0.7.9"
   peerDependencies:
     vue: ">=3"
-  checksum: 524996626e799dda718da1076d227940e3f4ddd63d8b410d8807b02b3870e6e682cae3e4491b94fe4e3ea6bcb8d08defdb27a5e400f6c4146036bc51eb61c211
+  checksum: 2b8078a4e7c1f797d74ff5ea9b80bffad8f24f6738aacfb2466d8f042814fbe6579f6afdca7071f3e24eba984391240e481adb3757d715b537737a8840d09859
   languageName: node
   linkType: hard
 
@@ -9795,7 +9795,7 @@ __metadata:
     "@types/hash-sum": ^1.0.0
     "@vue/reactivity": ^3.2.37
     "@vue/shared": ^3.2.37
-    "@vueuse/head": ^0.7.8
+    "@vueuse/head": ^0.7.9
     chokidar: ^3.5.3
     cookie-es: ^0.5.0
     defu: ^6.0.0