docs: add documentation for titleTemplate#5057
Conversation
✅ Deploy Preview for nuxt3-docs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
entity
changed the title
Co-authored-by: Alexander Lichter <manniL@gmx.net>
Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
| ## Title Templates | ||
| In previous versions of Nuxt, you could use the `titleTemplate` option to dynamically customize the title of your site. However, this is no longer supported in Nuxt 3, and can instead be done via a plugin. | ||
|
|
||
| Create a `title.js` plugin within your `plugins` folder, with the following code: |
There was a problem hiding this comment.
| Create a `title.js` plugin within your `plugins` folder, with the following code: | |
| The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function. If you want to use a function (for full control), then this cannot be set in your `nuxt.config`, and it is recommended instead to set it within your `app.vue` file, where it will apply to all pages on your site: |
| ```js | ||
| export default defineNuxtPlugin(() => { | ||
| useHead({ | ||
| titleTemplate: (titleChunk) => { | ||
| return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'; | ||
| }, | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| Then you can set a title as you usually would: |
There was a problem hiding this comment.
| ```js | |
| export default defineNuxtPlugin(() => { | |
| useHead({ | |
| titleTemplate: (titleChunk) => { | |
| return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'; | |
| }, | |
| }); | |
| }); | |
| ``` | |
| Then you can set a title as you usually would: |
| ```vue [/pages/my-page.vue] | ||
| <script setup> | ||
| useHead({ | ||
| title: 'My Page' |
There was a problem hiding this comment.
| title: 'My Page' | |
| titleTemplate: (titleChunk) => { | |
| return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'; | |
| }, |
There was a problem hiding this comment.
I thought we needed a plugin for it to work? As the current function approach does nothing.
There was a problem hiding this comment.
the function approach should work everywhere but in nuxt.config. If not, it's a bug and I'll fix it.
There was a problem hiding this comment.
Even with the following example in app.vue:
<script setup>
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site` : 'Site: Default Text';
},
});
</script>
<template>
<div>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
</div>
</template>If you don't pass a useHead to your page, it won't default it.
There was a problem hiding this comment.
Yes, that's a separate issue.
| }); | ||
| </script> | ||
| ``` | ||
| This will now appear as 'My Page - Site Title' in the browser tab. You can also pass `null` to default to the site title. |
There was a problem hiding this comment.
| This will now appear as 'My Page - Site Title' in the browser tab. You can also pass `null` to default to the site title. | |
| Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You can also pass `null` to default to the site title. |
danielroe
changed the title
titleTemplate
Co-authored-by: Daniel Roe <daniel@roe.dev>
|
Thanks for working on this amazing PR @heychazza @manniL @danielroe 💚 I believe before adding docs and instead of advising to use a Nuxt plugin, we can improve experience by suggesting to either use new Additionally, we could introduce |
|
@pi0 Agreed. I think my pending review comments should exactly implement that 👍 Once suggestions are accepted, it no longer advises to use a Nuxt plugin. |
|
The only issue I've personally found, but this would be a separate issue :- Setting it within I'll be back on PC in ~2 hours so I could make a reproduction repo if needed. TL;DR is if no title is specified in pages, it doesn't use the default from the |
|
@heychazza I have submitted a PR to fix that 😉 |
Smh Daniel, beating me to it 😂 Thanks though, haha |
|
Oh eek, I tried to do another PR, so I reset my main repo, apologies, will fix that and re-send it. |
5 participants
🔗 Linked issue
nuxt/nuxt#13981
❓ Type of change
📚 Description
This change adds more clarity to the
titleTemplateoption, as currently in Nuxt 3 this doesn't work as intended. This resolves nuxt/nuxt#13981.📝 Checklist