Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-16 21:58:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add documentation for titleTemplate (#5093)

Browse Source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Charlie Joseph 2022-06-03 16:37:56 +01:00 committed by GitHub
parent d61864b1a9
commit e6b48c2b20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ For example:
```vue
<script setup>
useHead({
titleTemplate: 'My App - %s',
title: 'My App',
// or, instead:
// titleTemplate: (title) => `My App - ${title}`,
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
@ -31,6 +31,24 @@ useHead({
::ReadMore{link="/api/composables/use-head"}
::
## Title Templates
You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site, for example, by adding the name of your site to the title of every page.
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:
```vue [app.vue]
<script setup>
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})
</script>
```
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 could also pass `null` to default to the site title.
## Meta Components
Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.