How to get page title globally when using useHead() ?
useHead() seems to be strongly recommended for setting page titles & other meta, great, it works... but how can I access the current page meta data globally, in any component? Previously I used some form of
{{ route.meta.title }} to do so, however, route.meta doesn't seem to be affected by changes made with useHead(). Use cases: a global header component, or perhaps some kind of breadcrumb component living in a layout. I literally just need the current page title, anywhere.3 Replies
Hello,
I know I'm almost 2 years late to the party xD
but did you find a solution to this?
best solution is to make your own
useTitle() function that wraps useHead() otherwise you can look at how Nuxt Scripts is handling it https://github.com/nuxt/scripts/blob/main/src/runtime/composables/useScriptEventPage.tsGitHub
scripts/src/runtime/composables/useScriptEventPage.ts at main · nux...
Third-Party Scripts Meets Nuxt Developer Experience. - nuxt/scripts
My memory is vague but looking at the post date I think I was still using Vue2 at the time.
Anyhow, testing in Nuxt3 just now, looks like things are easier/work as you expect:
1. Set a page title dynamically, somewhere:
definePageMeta({
title: 'My page title'
})
2. Somewhere else, grab the page title as you need:
(Script)
const route = useRoute()
(Template)
{{ route.meta.title }}