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..cbeca416f0c 100644
--- 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
```
-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
index cb67b51cc74..8c3c690846c 100644
--- 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
index 0e3bb809bfa..224a3facef0 100644
--- 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
index 9b6bb232d3e..524676238a9 100644
--- 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('Using a dynamic component - Fixture')
- expect(html).not.toContain('')
- expect(html).toContain('')
- expect(html).not.toContain('')
- expect(html).toContain('')
- expect(html).toMatch(/]*class="html-attrs-test"/)
- expect(html).toMatch(/]*class="body-attrs-test"/)
- expect(html).toContain('script>console.log("works with useMeta too")')
-
- const index = await $fetch('/')
+ const headHtml = await $fetch('/head')
+ expect(headHtml).toContain('Using a dynamic component - Title Template Fn Change')
+ expect(headHtml).not.toContain('')
+ expect(headHtml).toContain('')
+ expect(headHtml).not.toContain('')
+ expect(headHtml).toContain('')
+ expect(headHtml).toMatch(/]*class="html-attrs-test"/)
+ expect(headHtml).toMatch(/]*class="body-attrs-test"/)
+ expect(headHtml).toContain('script>console.log("works with useMeta too")')
+
+ const indexHtml = await $fetch('/')
// should render charset by default
- expect(index).toContain('')
+ expect(indexHtml).toContain('')
// should render components
- expect(index).toContain('Basic fixture - Fixture')
+ expect(indexHtml).toContain('Basic fixture')
})
// TODO: Doesn't adds header in test environment
diff --git a/test/fixtures/basic/pages/head.vue b/test/fixtures/basic/pages/head.vue
index 2a7d81659f6..61a6cbca9ac 100644
--- a/test/fixtures/basic/pages/head.vue
+++ b/test/fixtures/basic/pages/head.vue
@@ -1,6 +1,8 @@
diff --git a/yarn.lock b/yarn.lock
index 517a435145c..1f1d586b552 100644
--- 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