Retreive head data

[mrleblanc101]

Describe the feature

Currently, if I set the title in my Pages using useSeoMeta() or useHead().
I have no way of accessing this value inside my Layouts.

// pages/index.vue
<script setup>
useSeoMeta({
    title: () => t('Internationalization'),
});
</script>

To work around this, I use definePageMeta.
But this requires me to move my translations to the global scope.

// pages/index.vue
<script setup>
definePageMeta({
    title: 'Internationalization',
});
useSeoMeta({
    title: () => $t('Internationalization'),
});
</script>

// layouts/default.vue
<template>
    <div>
        <h1>{{ $t($route.meta.title) }}</h1>
    </div>
</template>

Maybe useHead() with no arguments should return the head object like so:

// layouts/default.vue
<script setup>
const head = useHead()
</script>

<template>
    <div>
        <h1>{{ head.title }}</h1>
    </div>
</template>

The alternative would be to use useState or a pinia store, but maybe this should be baked-in.
If this is implemented, there should be a way to get both the original title, and the title after ran into titleTemplate.
For exemple, with this config:

// nuxt.config.js
app: {
    head: {
        title: 'Home,
        titleTemplate: `%s %separator %siteName`,
        templateParams: {
            siteName: 'Site Name',
        },
    },
},

Maybe:

head.renderedTitle = Home - Site Name 
head.originalTitle = Home
head.title = ?? // Not sure if `head.title` should return what is shown in the `<title>` tag (after titleTemplate), or the property `title` of useHead / useSeoMeta (before titleTemplate)

Additional information

• Would you be willing to help implement this feature?

[mrleblanc101]

My current workaround.
I created a custom useTitle() composable:

export default function (title: string) {
    const state = useState('state', () => '');

    if (title) {
        state.value = title;

        useSeoMeta({
            title,
        });
    }

    return { title: state };
}

So in my page I do:

<script lang="ts" setup>
useTitle(t('My Page Title'));
</script>

And in my AppHeader, I do:

<script lang="ts" setup>
const { title } = useTitle()
</script>

<template>
    <header>
        ...
        <h1>{{ title }}</h1>
        ...
    </header>
</template>

[harlan-zw]

The specific issue in why the head data can't just be retrieved immediately is that it's resolved async after the component tree is finished updating. If it was to give you all of the data that was rendered it could lead to recursive reactivity issues or just triggering flashes of the title.

The solution you have here is good, Nuxt Scripts exports a similar function to use the title but for the context of analytic reporting.

Not too sure how else to solve this at the Unhead level while it's async (running it sync will be a big performance loss and lead to reactivity issues).

export function useScriptEventPage(onChange?: (payload: TrackedPage) => void) {
  const nuxt = useNuxtApp()
  const route = useRoute()
  const head = injectHead()
  const payload = ref<TrackedPage>({
    path: route.fullPath,
    title: import.meta.client ? document.title : '',
  })
  // no know to know the title on the server until the page is rendered
  if (import.meta.server)
    return payload

  let lastPayload: TrackedPage = { path: '', title: '' }
  let stopDomWatcher = () => {}
  // TODO make sure useAsyncData isn't running
  nuxt.hooks.hook('page:finish', () => {
    Promise.race([
      // possibly no head update is needed
      new Promise(resolve => setTimeout(resolve, 100)),
      new Promise<void>((resolve) => {
        stopDomWatcher = head.hooks.hook('dom:rendered', () => resolve())
      }),
    ])
      .finally(stopDomWatcher)
      .then(() => {
        payload.value = {
          path: route.fullPath,
          title: document.title,
        }
        if (lastPayload.path !== payload.value.path || lastPayload.title !== payload.value.title) {
          if (onChange) {
            onChange(payload.value)
          }
          lastPayload = payload.value
        }
      })
  })
  return payload
}