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

This commit is contained in:
Harlan Wilton 2022-08-02 21:20:44 +10:00 committed by GitHub
parent c72093b1f2
commit aa653ef6cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 21 deletions

View File

@ -47,7 +47,7 @@ The `titleTemplate` can either be a string, where `%s` is replaced with the titl
</script> </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 ## Meta Components

View File

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

View File

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

View File

@ -131,21 +131,21 @@ describe('pages', () => {
describe('head tags', () => { describe('head tags', () => {
it('should render tags', async () => { it('should render tags', async () => {
const html = await $fetch('/head') const headHtml = await $fetch('/head')
expect(html).toContain('<title>Using a dynamic component - Fixture</title>') expect(headHtml).toContain('<title>Using a dynamic component - Title Template Fn Change</title>')
expect(html).not.toContain('<meta name="description" content="first">') expect(headHtml).not.toContain('<meta name="description" content="first">')
expect(html).toContain('<meta charset="utf-16">') expect(headHtml).toContain('<meta charset="utf-16">')
expect(html).not.toContain('<meta charset="utf-8">') expect(headHtml).not.toContain('<meta charset="utf-8">')
expect(html).toContain('<meta name="description" content="overriding with an inline useHead call">') expect(headHtml).toContain('<meta name="description" content="overriding with an inline useHead call">')
expect(html).toMatch(/<html[^>]*class="html-attrs-test"/) expect(headHtml).toMatch(/<html[^>]*class="html-attrs-test"/)
expect(html).toMatch(/<body[^>]*class="body-attrs-test"/) expect(headHtml).toMatch(/<body[^>]*class="body-attrs-test"/)
expect(html).toContain('script>console.log("works with useMeta too")</script>') expect(headHtml).toContain('script>console.log("works with useMeta too")</script>')
const index = await $fetch('/') const indexHtml = await $fetch('/')
// should render charset by default // should render charset by default
expect(index).toContain('<meta charset="utf-8">') expect(indexHtml).toContain('<meta charset="utf-8">')
// should render <Head> components // 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 // TODO: Doesn't adds header in test environment

View File

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

View File

@ -24,6 +24,11 @@ import { useRuntimeConfig } from '#imports'
const config = useRuntimeConfig() const config = useRuntimeConfig()
// reset title template example
useHead({
titleTemplate: null
})
const foo = useFoo() const foo = useFoo()
const bar = useBar() const bar = useBar()
</script> </script>

View File

@ -3120,12 +3120,12 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@vueuse/head@npm:^0.7.8": "@vueuse/head@npm:^0.7.9":
version: 0.7.8 version: 0.7.9
resolution: "@vueuse/head@npm:0.7.8" resolution: "@vueuse/head@npm:0.7.9"
peerDependencies: peerDependencies:
vue: ">=3" vue: ">=3"
checksum: 524996626e799dda718da1076d227940e3f4ddd63d8b410d8807b02b3870e6e682cae3e4491b94fe4e3ea6bcb8d08defdb27a5e400f6c4146036bc51eb61c211 checksum: 2b8078a4e7c1f797d74ff5ea9b80bffad8f24f6738aacfb2466d8f042814fbe6579f6afdca7071f3e24eba984391240e481adb3757d715b537737a8840d09859
languageName: node languageName: node
linkType: hard linkType: hard
@ -9795,7 +9795,7 @@ __metadata:
"@types/hash-sum": ^1.0.0 "@types/hash-sum": ^1.0.0
"@vue/reactivity": ^3.2.37 "@vue/reactivity": ^3.2.37
"@vue/shared": ^3.2.37 "@vue/shared": ^3.2.37
"@vueuse/head": ^0.7.8 "@vueuse/head": ^0.7.9
chokidar: ^3.5.3 chokidar: ^3.5.3
cookie-es: ^0.5.0 cookie-es: ^0.5.0
defu: ^6.0.0 defu: ^6.0.0