docs: add documentation for `titleTemplate` #5057

entity · 2022-05-19T07:54:08Z

🔗 Linked issue

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This change adds more clarity to the titleTemplate option, as currently in Nuxt 3 this doesn't work as intended. This resolves nuxt/nuxt#13981.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

netlify · 2022-05-19T07:54:14Z

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	`b746828`
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62889508251d530008b5a346
😎 Deploy Preview	https://deploy-preview-5057--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

docs/content/2.guide/2.features/4.head-management.md

entity · 2022-05-19T07:59:52Z

Preview: https://deploy-preview-5057--nuxt3-docs.netlify.app/guide/features/head-management#title-templates

Co-authored-by: Alexander Lichter <[email protected]>

docs/content/2.guide/2.features/4.head-management.md

Co-authored-by: Damian <[email protected]>

docs/content/2.guide/2.features/4.head-management.md

danielroe · 2022-05-19T11:58:02Z

docs/content/2.guide/2.features/4.head-management.md

+## 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:


Suggested change

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:

danielroe · 2022-05-19T11:58:23Z

docs/content/2.guide/2.features/4.head-management.md

+```js
+export default defineNuxtPlugin(() => {
+  useHead({
+    titleTemplate: (titleChunk) => {
+      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
+    },
+  });
+});
+```
+
+Then you can set a title as you usually would:


Suggested change

```js

export default defineNuxtPlugin(() => {

useHead({

titleTemplate: (titleChunk) => {

return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';

},

});

});

```

Then you can set a title as you usually would:

danielroe · 2022-05-19T11:58:58Z

docs/content/2.guide/2.features/4.head-management.md

+```vue [/pages/my-page.vue]
+<script setup>
+  useHead({
+    title: 'My Page'


Suggested change

title: 'My Page'

titleTemplate: (titleChunk) => {

return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';

},

I thought we needed a plugin for it to work? As the current function approach does nothing.

the function approach should work everywhere but in nuxt.config. If not, it's a bug and I'll fix it.

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.

Yes, that's a separate issue.

PR to fix it: #5064

danielroe · 2022-05-19T11:59:53Z

docs/content/2.guide/2.features/4.head-management.md

+  });
+</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.


Suggested change

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.

Co-authored-by: Daniel Roe <[email protected]>

pi0 · 2022-05-20T09:25:19Z

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 app.vue which is meant to be entry of global setup such as layout and styles, it can also be used to declare titleTemplate without an additional file.

Additionally, we could introduce app/router.options support for runtime function.

danielroe · 2022-05-20T09:27:09Z

@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.

entity · 2022-05-20T09:29:11Z

The only issue I've personally found, but this would be a separate issue :-

Setting it within app.vue, if you don't specify a title within a page, it'll show up as null.

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 titleTemplate.

danielroe · 2022-05-20T09:30:02Z

@heychazza I have submitted a PR to fix that 😉

entity · 2022-05-20T09:30:58Z

@heychazza I have submitted a PR to fix that 😉

Smh Daniel, beating me to it 😂

Thanks though, haha

entity · 2022-05-21T09:59:55Z

Oh eek, I tried to do another PR, so I reset my main repo, apologies, will fix that and re-send it.

Added explainer for titleTemplate.

4663a2f

entity changed the title ~~DOCS: Added more detail to titleTemplate.~~ docs: Added more detail to titleTemplate. May 19, 2022

TheAlexLichter reviewed May 19, 2022

View reviewed changes

docs/content/2.guide/2.features/4.head-management.md Outdated Show resolved Hide resolved

Update docs/content/2.guide/2.features/4.head-management.md

5170d33

Co-authored-by: Alexander Lichter <[email protected]>

DamianGlowala suggested changes May 19, 2022

View reviewed changes

docs/content/2.guide/2.features/4.head-management.md Outdated Show resolved Hide resolved

docs/content/2.guide/2.features/4.head-management.md Outdated Show resolved Hide resolved

entity and others added 2 commits May 19, 2022 12:28

Update docs/content/2.guide/2.features/4.head-management.md

4121af7

Co-authored-by: Damian <[email protected]>

Update docs/content/2.guide/2.features/4.head-management.md

b616cdc

Co-authored-by: Damian <[email protected]>

danielroe reviewed May 19, 2022

View reviewed changes

danielroe changed the title ~~docs: Added more detail to titleTemplate.~~ docs: add documentation for titleTemplate May 19, 2022

danielroe added the documentation Improvements or additions to documentation label May 19, 2022

Updated wording for title template

071c14e

Co-authored-by: Daniel Roe <[email protected]>

pi0 added the pending label May 20, 2022

Fix linting issue

b746828

entity mentioned this pull request May 21, 2022

docs: add documentation for titleTemplate #5093

Merged

7 tasks

danielroe added the 3.x label Jan 19, 2023

This pull request was closed.

	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:

	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.

Uh oh!

Uh oh!

docs: add documentation for titleTemplate #5057

docs: add documentation for titleTemplate #5057

Uh oh!

Conversation

entity commented May 19, 2022

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

netlify bot commented May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for nuxt3-docs ready!

Uh oh!

Uh oh!

entity commented May 19, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielroe May 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pi0 commented May 20, 2022

Uh oh!

danielroe commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

entity commented May 20, 2022

Uh oh!

danielroe commented May 20, 2022

Uh oh!

entity commented May 20, 2022

Uh oh!

entity commented May 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

docs: add documentation for `titleTemplate` #5057

docs: add documentation for `titleTemplate` #5057

netlify bot commented May 19, 2022 •

edited

Loading

danielroe May 19, 2022 •

edited

Loading

danielroe commented May 20, 2022 •

edited

Loading