fix: overwrite titleTemplate with undefined (#220)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sebastian Krüger <2pi_r2@gmx.de>

src/meta.ts

@@ -7,6 +7,7 @@ import {
   reactive,
   watch,
   UnwrapRef,
+  customRef,
 } from '@vue/composition-api'
 
 import type { MetaInfo } from 'vue-meta'
@@ -32,13 +33,15 @@ function assign<T extends Record<string, any>>(target: T, source: Partial<T>) {
   return target
 }
 
-export function createEmptyMeta(): MetaInfoMapper<Required<MetaInfo>> {
+export function createEmptyMeta(): Omit<
+  MetaInfoMapper<Required<MetaInfo>>,
+  'titleTemplate'
+> {
   return {
     __dangerouslyDisableSanitizers: [],
     __dangerouslyDisableSanitizersByTagID: {},
 
     title: undefined,
-    titleTemplate: undefined,
     htmlAttrs: {},
     headAttrs: {},
     bodyAttrs: {},
@@ -104,7 +107,30 @@ export const useMeta = <T extends MetaInfo>(init?: T) => {
   assign(_head, createEmptyMeta())
   assign<MetaInfo>(_head, init || {})
 
-  const refs = toRefs(_head) as ToRefs<ReturnType<typeof createEmptyMeta> & T>
+  const refs = toRefs(_head) as ToRefs<
+    ReturnType<typeof createEmptyMeta> & {
+      titleTemplate: ReactiveHead['titleTemplate']
+    } & T
+  >
+
+  refs.titleTemplate = customRef<ReactiveHead['titleTemplate']>(
+    (track, trigger) => {
+      return {
+        get() {
+          track()
+          return _head.titleTemplate
+        },
+        set(newValue) {
+          if (!_head.titleTemplate) {
+            Vue.set(_head, 'titleTemplate', newValue)
+          } else {
+            _head.titleTemplate = newValue
+          }
+          trigger()
+        },
+      }
+    }
+  )
 
   if (process.client)
     watch(Object.values(refs), vm.$meta().refresh, { immediate: true })

test/e2e/meta.ts

@@ -6,21 +6,28 @@ fixture`useMeta`
 
 test('Shows correct title on server-loaded page', async t => {
   await navigateTo('/meta')
-  await t.expect(Selector('title').innerText).eql('newSetTitle')
+  await t.expect(Selector('title').innerText).eql('newSetTitle - fixture')
   await expectOnPage('title-newSetTitle')
-  await t.expect(Selector('title').innerText).eql('mounted title')
+  await t.expect(Selector('title').innerText).eql('mounted title - fixture')
   await expectOnPage('title-mounted title')
   await t.expect(Selector('body').getAttribute('class')).eql('dark-mode mobile')
 
+  await t.click(Selector('button').withText('Change'))
+  await t.expect(Selector('title').innerText).eql('mounted title - Changed')
+
   await t.click(Selector('a').withText('back'))
-  await t.expect(Selector('title').innerText).eql('My fixture')
+  await t.expect(Selector('title').innerText).eql('My fixture - fixture')
 })
 
 test('Shows correct title on client-loaded page', async t => {
   await navigateTo('/')
-  await t.expect(Selector('title').innerText).eql('My fixture')
+  await t.expect(Selector('title').innerText).eql('My fixture - fixture')
 
   await t.click(Selector('a').withText('meta'))
-  await t.expect(Selector('title').innerText).eql('newSetTitle')
-  await t.expect(Selector('title').innerText).eql('mounted title')
+  await t.expect(Selector('title').innerText).eql('newSetTitle - fixture')
+
+  await t.expect(Selector('title').innerText).eql('mounted title - fixture')
+
+  await t.click(Selector('button').withText('Change'))
+  await t.expect(Selector('title').innerText).eql('mounted title - Changed')
 })

test/fixture/nuxt.config.js

@@ -28,6 +28,7 @@ module.exports = {
     },
   ],
   head: {
+    titleTemplate: title => `${title} - fixture`,
     link: isTesting
       ? []
       : [

test/fixture/pages/meta.vue

@@ -2,6 +2,9 @@
   <blockquote>
     <p>
       <code>title-{{ title }}</code>
+      <button @click="changeTitleTemplate">
+        Change title template
+      </button>
     </p>
   </blockquote>
 </template>
@@ -21,7 +24,7 @@ export default defineComponent({
 
     title.value = 'oldSetTitle'
 
-    const { title: newImport, bodyAttrs } = useMeta()
+    const { title: newImport, bodyAttrs, titleTemplate } = useMeta()
     newImport.value = 'newSetTitle'
 
     onMounted(() => {
@@ -32,7 +35,11 @@ export default defineComponent({
 
     bodyAttrs.value.class = ['dark-mode', 'mobile']
 
-    return { title }
+    function changeTitleTemplate() {
+      titleTemplate.value = `%s - Changed`
+    }
+
+    return { title, changeTitleTemplate, titleTemplate }
   },
 })
 </script>

test/tsd/meta.test-d.ts

@@ -3,4 +3,7 @@ import { expectType } from 'tsd'
 import { useMeta, Ref } from '../..'
 
 expectType<Ref<string>>(useMeta({ title: 'provided' }).title)
+expectType<Ref<undefined | string | ((title: string) => string)>>(
+  useMeta().titleTemplate
+)
 expectType<Ref<string | undefined>>(useMeta().title)