From 4663a2f39ed05bf624ff90d88df8ed035263e8f8 Mon Sep 17 00:00:00 2001 From: Charlie Joseph Date: Thu, 19 May 2022 08:50:01 +0100 Subject: [PATCH 1/6] Added explainer for `titleTemplate`. --- .../2.guide/2.features/4.head-management.md | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 591edab4cc1..561067d299d 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -13,9 +13,7 @@ For example: ```vue +``` +This will now appear as 'My Page - Site Title' in the browser tab, you can also pass `null` to default to the site title. + ## Meta Components Nuxt provides ``, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template. From 5170d3320baa8423504e5c70ddcd4b6c89a70ec5 Mon Sep 17 00:00:00 2001 From: Charlie Joseph <ch@rli.es> Date: Thu, 19 May 2022 09:04:29 +0100 Subject: [PATCH 2/6] Update docs/content/2.guide/2.features/4.head-management.md Co-authored-by: Alexander Lichter <manniL@gmx.net> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 561067d299d..eb92fe99d43 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -45,7 +45,7 @@ export default defineNuxtPlugin(() => { ``` Then you can set a title as you usually would: -```js +```vue // pages/my-page.vue <script setup> useHead({ From 4121af749ef1d2c7d5f8ea083ccaeefa7d6b7159 Mon Sep 17 00:00:00 2001 From: Charlie Joseph <ch@rli.es> Date: Thu, 19 May 2022 12:28:28 +0100 Subject: [PATCH 3/6] Update docs/content/2.guide/2.features/4.head-management.md Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index eb92fe99d43..1158c6171fa 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -53,7 +53,7 @@ Then you can set a title as you usually would: }); </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. +This will now appear as 'My Page - Site Title' in the browser tab. You can also pass `null` to default to the site title. ## Meta Components From b616cdc6a6075f71e29c725c1253d6ae3331b7b0 Mon Sep 17 00:00:00 2001 From: Charlie Joseph <ch@rli.es> Date: Thu, 19 May 2022 12:30:22 +0100 Subject: [PATCH 4/6] Update docs/content/2.guide/2.features/4.head-management.md Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/2.guide/2.features/4.head-management.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 1158c6171fa..d86cf35ef33 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -45,8 +45,7 @@ export default defineNuxtPlugin(() => { ``` Then you can set a title as you usually would: -```vue -// pages/my-page.vue +```vue [/pages/my-page.vue] <script setup> useHead({ title: 'My Page' From 071c14ef662ad9fe473c4da47c41cfa46cc9a0f4 Mon Sep 17 00:00:00 2001 From: Charlie Joseph <ch@rli.es> Date: Thu, 19 May 2022 13:05:34 +0100 Subject: [PATCH 5/6] Updated wording for title template Co-authored-by: Daniel Roe <daniel@roe.dev> --- docs/content/2.guide/2.features/4.head-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index d86cf35ef33..1abb6e0e2c5 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -30,7 +30,7 @@ useHead({ :: ## 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. +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. Create a `title.js` plugin within your `plugins` folder, with the following code: From b74682895e09c5185f4071db2da7ad43605396b9 Mon Sep 17 00:00:00 2001 From: Charlie Joseph <ch@rli.es> Date: Sat, 21 May 2022 08:30:12 +0100 Subject: [PATCH 6/6] Fix linting issue --- docs/content/2.guide/2.features/4.head-management.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/content/2.guide/2.features/4.head-management.md b/docs/content/2.guide/2.features/4.head-management.md index 1abb6e0e2c5..ff602f9e33c 100644 --- a/docs/content/2.guide/2.features/4.head-management.md +++ b/docs/content/2.guide/2.features/4.head-management.md @@ -30,6 +30,7 @@ useHead({ :: ## 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. Create a `title.js` plugin within your `plugins` folder, with the following code: @@ -45,6 +46,7 @@ export default defineNuxtPlugin(() => { ``` Then you can set a title as you usually would: + ```vue [/pages/my-page.vue] <script setup> useHead({ @@ -52,6 +54,7 @@ Then you can set a title as you usually would: }); </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. ## Meta Components