Implement titleTemplate from vue-meta

Environment

---

• Operating System: Darwin
• Node Version: v14.19.0
• Nuxt Version: 3.0.0-27386975.6e06d2b
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: css
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Attempt to use titleTemplate like Nuxt 2 offers, and observe that it is ignored.

Describe the bug

Following on the issue from https://github.com/nuxt/nuxt.js/issues/10073, it appears that titleTemplate from vue-meta is not implemented in Nuxt 3. It is implemented in Nuxt 2.

I make use of titleTemplate in all of my Nuxt 2 applications, and I’m curious what the official recommended replacement is for this feature. How can I arrange to have my page titles be something like “PageName - ApplicationName” in Nuxt 3? In Nuxt 2, I would set titleTemplate to %s - ApplicationName in the default layout, then set title in each of my pages’ head section of the Options API. In Nuxt 3, there doesn’t appear to be a way to do this without porting this feature forward from Nuxt 2. Happy to be wrong about this 😃

Additional context

No response

Logs

No response

[command-tab]

Closing this one out.

With useState, a working solution ends up looking like this in a layout:

<script setup>
const pageTitle = useState('pageTitle')
useMeta({
  title: computed(() => `My App Name - ${pageTitle.value}`)
})
</script>

And this on a simple page:

<script setup>
const pageTitle = useState('pageTitle')
pageTitle.value = 'Some Page Title'
</script>

And when using useAsyncData to load external content in a page and using a value from that content in the page title:

<script setup>
const { data } = await useAsyncData('userDetail', () => $fetch('https://api.github.com/users/command-tab'))
const pageTitle = useState('pageTitle')
pageTitle.value = data.value.name
</script>

Doing the equivalent with a store like Pinia instead of Nuxt State would likely be a very similar implementation.

Thanks to @danielroe for all the help! 🙌🏻

[jiblett1000]

@danielroe Will Do 😃