如何在Nuxt 3页面获取经titleTemplate计算的标题并设置og:title？

方法一：自定义组合式函数（推荐） #

把设置页面标题和同步og:title的逻辑封装成可复用的函数，避免重复写代码。

1. 在项目的composables/usePageTitle.ts文件中添加以下代码：

export const usePageTitle = (pageTitle: string) => {
  const nuxtApp = useNuxtApp()
  // 从Nuxt配置里获取titleTemplate，默认用%s兜底
  const titleTemplate = nuxtApp._instance?.appHead?.titleTemplate || '%s'
  // 计算经过模板处理后的完整标题
  const fullTitle = titleTemplate.replace('%s', pageTitle)
  
  // 一次性设置页面标题和og:title元标签
  useHead({
    title: pageTitle,
    meta: [
      {
        property: 'og:title',
        content: fullTitle
      }
    ]
  })
}

2. 在任意页面中直接调用这个函数即可：

<script setup>
usePageTitle('Page title')
</script>

方法二：全局插件自动同步 #

如果想彻底不用手动处理，写个Nuxt插件全局监听标题变化，自动同步og:title。

1. 在plugins/titleSync.ts文件中添加：

export default defineNuxtPlugin(nuxtApp => {
  // 客户端监听标题DOM变化
  if (process.client) {
    nuxtApp.hook('app:mounted', () => {
      const titleElement = document.querySelector('title')
      if (!titleElement) return
      
      const observer = new MutationObserver(() => {
        // 标题变化时同步更新og:title
        useHead({
          meta: [
            {
              property: 'og:title',
              content: document.title
            }
          ]
        })
      })
      
      observer.observe(titleElement, { childList: true })
    })
  }
  
  // 服务端渲染时直接计算完整标题
  if (process.server) {
    nuxtApp.hook('page:finish', () => {
      const appHead = nuxtApp._instance?.appHead
      const pageHead = nuxtApp._instance?.pageHead
      const pageTitle = pageHead?.title || appHead?.title || ''
      const titleTemplate = appHead?.titleTemplate || '%s'
      const fullTitle = titleTemplate.replace('%s', pageTitle)
      
      useHead({
        meta: [
          {
            property: 'og:title',
            content: fullTitle
          }
        ]
      })
    })
  }
})

之后页面里正常使用useHead({ title: 'Page title' })就行，og:title会自动同步处理后的完整标题。

方法三：页面内直接计算（适合临时场景） #

如果只是个别页面需要，也可以直接在页面里计算：

<script setup>
const pageTitle = 'Page title'
const titleTemplate = useNuxtApp()._instance?.appHead?.titleTemplate || '%s'
const fullTitle = titleTemplate.replace('%s', pageTitle)

useHead({
  title: pageTitle,
  meta: [
    { property: 'og:title', content: fullTitle }
  ]
})
</script>

内容的提问来源于stack exchange，提问作者grandouassou