[Feature Request] Handle titleTemplate like vue-meta

[mathieutu]

Hi,
It could be really cool to have a titleTemplate like vue-meta, to be able to set a part of title for each page, and a global part.

For now, I've just made my own use head that just do that:

import { useHead as originalUseHead, HeadObject } from '@vueuse/head'

export const useHead = (head: HeadObject) => originalUseHead({
  ...head,
  title: `${head.title} - MyProject`
})

But it can't be customized in the app.

Thanks for your amazing work,
Mathieu.

[glen-84]

@egoist Would you accept a PR for this?

Maybe createHead could take an options object, with a titleFormatter: (title: string) => string option?

[theoephraim]

would definitely make sense to support natively... but until then, if anyone else needs a workaround, here is what I do. It's pretty hacky but it works.

utils/use-page-title.ts

import { useHead } from '@vueuse/head';
import { unref, computed, ComputedRef } from 'vue';

let siteTitle = 'hello';
let separator = '|';

export const usePageTitle = (pageTitle: string | ComputedRef<string>) => useHead(computed(() => ({
  title: `${unref(pageTitle)} ${separator} ${siteTitle}`,
})));

// this is expected to only be called once - should maybe add a check / error
export const usePageTitleTemplate = (newSiteTitle: string, newSeparator?: string) => {
  siteTitle = newSiteTitle;
  if (newSeparator) separator = newSeparator;
  return useHead({ title: siteTitle });
};

then once (usually in App.vue) call usePageTitleTemplate('My cool site');

and in each page component call usePageTitle('About us')

[gilesbutler]

Would love to see this too!