From 36c7e353878d553d7a8c2667e1b4abf615e2e335 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Tue, 2 Aug 2022 21:01:41 +1000 Subject: [PATCH] feat(head): migrate to native @vueuse/head titleTemplate --- .../2.guide/2.features/4.head-management.md | 2 +- packages/nuxt/package.json | 2 +- .../head/runtime/lib/vueuse-head.plugin.ts | 5 ++-- test/basic.test.ts | 26 +++++++++---------- test/fixtures/basic/pages/head.vue | 2 ++ test/fixtures/basic/pages/index.vue | 5 ++++ yarn.lock | 10 +++---- 7 files changed, 30 insertions(+), 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 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