From cc182454776a2e29b0320e4f9693758ace0f4ad9 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Wed, 31 Aug 2022 00:20:47 +1000
Subject: [PATCH 1/8] docs(api): enhance useHead composable

---
 docs/content/3.api/1.composables/use-head.md | 138 ++++++++++++++++---
 1 file changed, 117 insertions(+), 21 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 411e50a7dff..60f5e467811 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -1,48 +1,144 @@
 # `useHead`
 
-::ReadMore{link="/guide/features/head-management"}
+Nuxt provides `useHead` composable to add and customize the head properties of individual pages of Nuxt app. Unlike [definePageMeta](/api/utils/define-page-meta), properties of `useHead` can be dynamic and can accept a function returning the object with reactive metadata.
 
-Nuxt provides a composable to update the head properties of your page with an [`MetaObject`](/api/composables/use-head/#metaobject) of meta properties with keys corresponding to meta tags:
+`useHead` accepts properties of type `MetaObject` as listed below.
 
-`title`, `base`, `script`, `noscript`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
+## Type
 
-```js
+```js [Signature]
 useHead(options: MetaObject)
+
+interface MetaObject extends Record<string, any> {
+  charset?: string
+  viewport?: string
+  meta?: Array<Record<string, any>>
+  link?: Array<Record<string, any>>
+  style?: Array<Record<string, any>>
+  script?: Array<Record<string, any>>
+  noscript?: Array<Record<string, any>>
+  titleTemplate?: string | ((title: string) => string)
+  title?: string
+  bodyAttrs?: Record<string, any>
+  htmlAttrs?: Record<string, any>
+}
 ```
 
+Application-wide configuration of the same properties listed above is possible through [nuxt.config](/api/configuration/nuxt.config#head). However, `useHead` composable allows customizing these properties at page-level.
+
 ::alert{icon=👉}
 **`useHead` only works during `setup`**.
 ::
 
-## Example
+## Properties
+
+* **charset**: `type: string` | `default: 'utf-8'` - Character encoding in which the document is encoded
+
+* **viewport**: `type: string` | `default: 'width=device-width, initial-scale=1'` - Configure the viewport (the area of the window in which web content can be seen)
+
+* **meta**: `type: array` - Each item in meta array maps to a newly-created `<meta>` element, where object properties map to attributes.
+
+* **link**: `type: array` - Each item maps to a newly-created `<link>` element, where object properties map to attributes.
+
+* **style**: `type: array` - Each item maps to a newly-created `<style>` element, where object properties map to attributes.
 
-The example below changes the website's title in the `meta` and inserts a Google Font using the `link` property.
+* **script**: `type: array` - Each item maps to a newly-created `<script>` element, where object properties map to attributes.
+
+* **noscript**: `type: array` - Each item maps to a newly-created `<noscript>` element, where object properties map to attributes.
+
+* **titleTemplate**: `type: string | function` - Configure dynamic template to customise page title on individual page
+
+* **title**: `type: string` - Provide static page title for Nuxt application
+
+* **bodyAttrs**: `type: Record` - Keys in `bodyAttrs` can be `class`, `id` or `inheritAttrs`. See the full [list of keys](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/meta.ts) available to add as key-value pairs in `bodyAttrs`.
+
+* **htmlAttrs**: `type: Record` - Keys in `htmlAttrs` can be `class`, `id`, `manifest`, `version` or `xmlns`. See the full [list of keys](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/meta.ts) available to add as key-value pairs in `htmlAttrs`.
+
+> All elements in the meta object are optional. You can also pass only single values.
+
+## Examples
+
+### Customize metadata
+
+The example below changes the website's `title` and `description` using `meta` option within `useHead` composable.
+
+```js
+export default {
+  setup () {
+    const title = ref('My App')
+    const description = ref('My amazing Nuxt app')
+    useHead({
+      title,
+      meta: [{
+        name: 'description',
+        content: description
+      }]
+    })
+  }
+}
+```
+
+### Add dynamic title
+
+In the example below, `titleTemplate` is set as a `function` to have full control over setting dynamic title for each route of your Nuxt app.
+
+```vue [app.vue]
+<script setup>
+  useHead({
+    // as a string
+    // `%s` is replaced with the title
+    titleTemplate: '%s - Site Title',
+    // or as a function 
+    titleTemplate: (productCategory) => {
+      return productCategory ? `${productCategory} - Site Title` : 'Site Title';
+    }
+  })
+</script>
+```
+
+`nuxt.config` is also used as an alternative to set the page title. However, `nuxt.config` does not allow the page title to be dynamic. Therefore, it is recommended to use `titleTemplate` in `app.vue` file to add dynamic title which is then applied to all routes of your Nuxt app.
+
+### Add external CSS
+
+The example below inserts Google Fonts using the `link` property of `useHead` composable.
 
 ```js
 export default {
   setup () {
     useHead({
-      meta: [
-        { name: 'title' content: 'Nuxt 3 - The Hybrid Vue Framework' }
-      ],
       link: [
-        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' },
+        { 
+          rel: 'preconnect', 
+          href: 'https://fonts.googleapis.com'
+        },
+        { 
+          rel: 'stylesheet', 
+          href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
+          crossorigin: '' 
+        },
       ]
     })
   }
 }
 ```
 
-## `MetaObject`
+### Add third-party script
 
-* **charset**: the character encoding in which the document is encoded => `<meta charset="<value>" />` (default: `'utf-8'`)
-* **viewport**: configuration of the viewport (the area of the window in which web content can be seen) => `<meta name="viewport" content="<value>" />` (default: `'width=device-width, initial-scale=1'`)
-* **meta**: array, each item maps to a newly-created `<meta>` element, where object properties map to attributes.
-* **link**: array, each item maps to a newly-created `<link>` element, where object properties map to attributes.
-* **style**: array, each item maps to a newly-created `<style>` element, where object properties map to attributes.
-* **script**: array, each item maps to a newly-created `<script>` element, where object properties map to attributes.
-* **noscript**: array, each item maps to a newly-created `<noscript>` element, where object properties map to attributes.
+The example below inserts third-party JavaScript using the `script` property of the `useHead` composable.
 
-All elements in the meta object are optional. You can also pass only single values.
+```vue
+<script setup>
+useHead({
+  script: [
+    {
+      src: 'https://third-party-script.com',
+      body: true
+    }
+  ]
+})
+</script>
+```
+
+You can use the `body: true` option on `script` meta tags to add script at the end of the `<body>` tag.
+
+::ReadMore{link="/guide/features/head-management"}

From e76b003e96ba6811b99244255583b8b333cf54bb Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Wed, 31 Aug 2022 00:55:43 +1000
Subject: [PATCH 2/8] docs(api): add vueuse reference on useHead page

---
 docs/content/3.api/1.composables/use-head.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 60f5e467811..17eabd7186c 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -1,6 +1,6 @@
 # `useHead`
 
-Nuxt provides `useHead` composable to add and customize the head properties of individual pages of Nuxt app. Unlike [definePageMeta](/api/utils/define-page-meta), properties of `useHead` can be dynamic and can accept a function returning the object with reactive metadata.
+Nuxt provides `useHead` composable to add and customize the head properties of individual pages of Nuxt app. `useHead` uses [@vueuse/head](https://github.com/vueuse/head) underneath and unlike [definePageMeta](/api/utils/define-page-meta), properties of `useHead` can be dynamic and can accept a function returning the object with reactive metadata.
 
 `useHead` accepts properties of type `MetaObject` as listed below.
 

From c78b31e931b9df3e0712803d0a465f33b87321b0 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Wed, 31 Aug 2022 09:08:59 +1000
Subject: [PATCH 3/8] docs(api): standardize the code snippets

---
 docs/content/3.api/1.composables/use-head.md | 76 ++++++++++----------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 17eabd7186c..314f952e2d4 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -62,20 +62,18 @@ Application-wide configuration of the same properties listed above is possible t
 
 The example below changes the website's `title` and `description` using `meta` option within `useHead` composable.
 
-```js
-export default {
-  setup () {
-    const title = ref('My App')
-    const description = ref('My amazing Nuxt app')
-    useHead({
-      title,
-      meta: [{
-        name: 'description',
-        content: description
-      }]
-    })
-  }
-}
+```vue
+<script setup>
+  const title = ref('My App')
+  const description = ref('My amazing Nuxt app')
+  useHead({
+    title,
+    meta: [{
+      name: 'description',
+      content: description
+    }]
+  })
+</script>
 ```
 
 ### Add dynamic title
@@ -102,24 +100,22 @@ In the example below, `titleTemplate` is set as a `function` to have full contro
 
 The example below inserts Google Fonts using the `link` property of `useHead` composable.
 
-```js
-export default {
-  setup () {
-    useHead({
-      link: [
-        { 
-          rel: 'preconnect', 
-          href: 'https://fonts.googleapis.com'
-        },
-        { 
-          rel: 'stylesheet', 
-          href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
-          crossorigin: '' 
-        },
-      ]
-    })
-  }
-}
+```vue [app.vue]
+<script setup>  
+  useHead({
+    link: [
+      { 
+        rel: 'preconnect', 
+        href: 'https://fonts.googleapis.com'
+      },
+      { 
+        rel: 'stylesheet', 
+        href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
+        crossorigin: '' 
+      },
+    ]
+  })
+</script>
 ```
 
 ### Add third-party script
@@ -128,14 +124,14 @@ The example below inserts third-party JavaScript using the `script` property of
 
 ```vue
 <script setup>
-useHead({
-  script: [
-    {
-      src: 'https://third-party-script.com',
-      body: true
-    }
-  ]
-})
+  useHead({
+    script: [
+      {
+        src: 'https://third-party-script.com',
+        body: true
+      }
+    ]
+  })
 </script>
 ```
 

From 538160e6fa8be478b10dcb5be29f35c054d2433d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 1 Sep 2022 09:37:42 +0100
Subject: [PATCH 4/8] docs: small updates

---
 docs/content/3.api/1.composables/use-head.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 314f952e2d4..1c7c2c2629f 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -1,6 +1,6 @@
 # `useHead`
 
-Nuxt provides `useHead` composable to add and customize the head properties of individual pages of Nuxt app. `useHead` uses [@vueuse/head](https://github.com/vueuse/head) underneath and unlike [definePageMeta](/api/utils/define-page-meta), properties of `useHead` can be dynamic and can accept a function returning the object with reactive metadata.
+Nuxt provides the `useHead` composable to add and customize the head properties of individual pages of Nuxt app. `useHead` uses [@vueuse/head](https://github.com/vueuse/head) underneath.
 
 `useHead` accepts properties of type `MetaObject` as listed below.
 
@@ -26,6 +26,9 @@ interface MetaObject extends Record<string, any> {
 
 Application-wide configuration of the same properties listed above is possible through [nuxt.config](/api/configuration/nuxt.config#head). However, `useHead` composable allows customizing these properties at page-level.
 
+::alert{type=info}
+The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. It can also accept a function returning an object to make the entire object reactive.
+::
 ::alert{icon=👉}
 **`useHead` only works during `setup`**.
 ::
@@ -137,4 +140,4 @@ The example below inserts third-party JavaScript using the `script` property of
 
 You can use the `body: true` option on `script` meta tags to add script at the end of the `<body>` tag.
 
-::ReadMore{link="/guide/features/head-management"}
+:ReadMore{link="/guide/features/head-management"}

From c48e593a552e91be0e31c4c902a3f19e8546d30a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?=
 <48835293+DamianGlowala@users.noreply.github.com>
Date: Thu, 1 Sep 2022 13:50:48 +0200
Subject: [PATCH 5/8] Update use-head.md

---
 docs/content/3.api/1.composables/use-head.md | 139 +++++++++++++------
 1 file changed, 97 insertions(+), 42 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index 1c7c2c2629f..b17f8f805a2 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -1,13 +1,15 @@
 # `useHead`
 
-Nuxt provides the `useHead` composable to add and customize the head properties of individual pages of Nuxt app. `useHead` uses [@vueuse/head](https://github.com/vueuse/head) underneath.
+Nuxt provides the `useHead` composable to add and customize the head properties of individual pages of your Nuxt app. `useHead` uses [@vueuse/head](https://github.com/vueuse/head) under the hood.
 
-`useHead` accepts properties of type `MetaObject` as listed below.
+::alert{icon=👉}
+**`useHead` must be placed within the `setup` function**.
+::
 
 ## Type
 
-```js [Signature]
-useHead(options: MetaObject)
+```ts
+useHead(meta: Computable<MetaObject>): void
 
 interface MetaObject extends Record<string, any> {
   charset?: string
@@ -24,86 +26,139 @@ interface MetaObject extends Record<string, any> {
 }
 ```
 
-Application-wide configuration of the same properties listed above is possible through [nuxt.config](/api/configuration/nuxt.config#head). However, `useHead` composable allows customizing these properties at page-level.
+Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt.config#head), or by placing the `useHead` in the `app.vue` file.
 
 ::alert{type=info}
-The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. It can also accept a function returning an object to make the entire object reactive.
-::
-::alert{icon=👉}
-**`useHead` only works during `setup`**.
+The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
 ::
 
-## Properties
+## Parameters
+
+### `meta`
+
+**Type**: `MetaObject`
+
+An object accepting the following head metadata:
+
+  - `charset`
+
+    **Type**: `string`
+    **Default**: `utf-8`
+
+    Specifies character encoding for the HTML document.
+
+  - `viewport`
+
+    **Type**: `string`
+    **Default**: `width=device-width, initial-scale=1`
+
+    Configures the viewport (the user's visible area of a web page).
+
+  - `meta`
+
+    **Type**: `Array<Record<string, any>>`
+    **Default**: `width=device-width, initial-scale=1`
+
+    Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
+
+  - `link`
+
+    **Type**: `Array<Record<string, any>>`
 
-* **charset**: `type: string` | `default: 'utf-8'` - Character encoding in which the document is encoded
+    Each element in the array is mapped to a newly-created `<link>` tag, where object properties are mapped to the corresponding attributes.
 
-* **viewport**: `type: string` | `default: 'width=device-width, initial-scale=1'` - Configure the viewport (the area of the window in which web content can be seen)
+  - `style`
 
-* **meta**: `type: array` - Each item in meta array maps to a newly-created `<meta>` element, where object properties map to attributes.
+    **Type**: `Array<Record<string, any>>`
 
-* **link**: `type: array` - Each item maps to a newly-created `<link>` element, where object properties map to attributes.
+    Each element in the array is mapped to a newly-created `<style>` tag, where object properties are mapped to the corresponding attributes.
 
-* **style**: `type: array` - Each item maps to a newly-created `<style>` element, where object properties map to attributes.
+  - `script`
 
-* **script**: `type: array` - Each item maps to a newly-created `<script>` element, where object properties map to attributes.
+    **Type**: `Array<Record<string, any>>`
 
-* **noscript**: `type: array` - Each item maps to a newly-created `<noscript>` element, where object properties map to attributes.
+    Each element in the array is mapped to a newly-created `<script>` tag, where object properties are mapped to the corresponding attributes.
 
-* **titleTemplate**: `type: string | function` - Configure dynamic template to customise page title on individual page
+  - `noscript`
 
-* **title**: `type: string` - Provide static page title for Nuxt application
+    **Type**: `Array<Record<string, any>>`
 
-* **bodyAttrs**: `type: Record` - Keys in `bodyAttrs` can be `class`, `id` or `inheritAttrs`. See the full [list of keys](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/meta.ts) available to add as key-value pairs in `bodyAttrs`.
+    Each element in the array is mapped to a newly-created `<noscript>` tag, where object properties are mapped to the corresponding attributes.
 
-* **htmlAttrs**: `type: Record` - Keys in `htmlAttrs` can be `class`, `id`, `manifest`, `version` or `xmlns`. See the full [list of keys](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/meta.ts) available to add as key-value pairs in `htmlAttrs`.
+  - `titleTemplate`
 
-> All elements in the meta object are optional. You can also pass only single values.
+    **Type**: `string` | `((title: string) => string)`
+
+    Configures dynamic template to customize the page title on an individual page.
+
+  - `title`
+
+    **Type**: `string`
+
+    Sets static page title on an individual page.
+
+  - `bodyAttrs`
+
+    **Type**: `Record<string, any>`
+
+    Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
+
+  - `htmlAttrs`
+
+    **Type**: `Record<string, any>`
+
+    Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
 
 ## Examples
 
-### Customize metadata
+### Customize Metadata
 
-The example below changes the website's `title` and `description` using `meta` option within `useHead` composable.
+The example below changes the website's `title` and `description` using `meta` option of the `useHead` composable:
 
 ```vue
 <script setup>
   const title = ref('My App')
   const description = ref('My amazing Nuxt app')
+
   useHead({
     title,
-    meta: [{
-      name: 'description',
-      content: description
-    }]
+    meta: [
+      {
+        name: 'description',
+        content: description
+      }
+    ]
   })
 </script>
 ```
 
-### Add dynamic title
+### Add Dynamic Title
 
-In the example below, `titleTemplate` is set as a `function` to have full control over setting dynamic title for each route of your Nuxt app.
+In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
 
 ```vue [app.vue]
 <script setup>
   useHead({
-    // as a string
-    // `%s` is replaced with the title
+    // as a string,
+    // where `%s` is replaced with the title
     titleTemplate: '%s - Site Title',
-    // or as a function 
+    // ... or as a function 
     titleTemplate: (productCategory) => {
-      return productCategory ? `${productCategory} - Site Title` : 'Site Title';
+      return productCategory
+        ? `${productCategory} - Site Title`
+        : 'Site Title'
     }
   })
 </script>
 ```
 
-`nuxt.config` is also used as an alternative to set the page title. However, `nuxt.config` does not allow the page title to be dynamic. Therefore, it is recommended to use `titleTemplate` in `app.vue` file to add dynamic title which is then applied to all routes of your Nuxt app.
+`nuxt.config` is also used as an alternative way of setting the page title. However, `nuxt.config` does not allow the page title to be dynamic. Therefore, it is recommended to use `titleTemplate` in the `app.vue` file to add a dynamic title, which is then applied to all routes of your Nuxt app.
 
-### Add external CSS
+### Add External CSS
 
-The example below inserts Google Fonts using the `link` property of `useHead` composable.
+The example below inserts Google Fonts using the `link` property of the `useHead` composable:
 
-```vue [app.vue]
+```vue
 <script setup>  
   useHead({
     link: [
@@ -115,15 +170,15 @@ The example below inserts Google Fonts using the `link` property of `useHead` co
         rel: 'stylesheet', 
         href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', 
         crossorigin: '' 
-      },
+      }
     ]
   })
 </script>
 ```
 
-### Add third-party script
+### Add Third-party Script
 
-The example below inserts third-party JavaScript using the `script` property of the `useHead` composable.
+The example below inserts a third-party script using the `script` property of the `useHead` composable:
 
 ```vue
 <script setup>
@@ -138,6 +193,6 @@ The example below inserts third-party JavaScript using the `script` property of
 </script>
 ```
 
-You can use the `body: true` option on `script` meta tags to add script at the end of the `<body>` tag.
+You can use the `body: true` option to add the above script at the end of the `<body>` tag.
 
 :ReadMore{link="/guide/features/head-management"}

From f1d9ba14a93c05421aba471010e047ffc18414e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?=
 <48835293+DamianGlowala@users.noreply.github.com>
Date: Thu, 1 Sep 2022 13:55:43 +0200
Subject: [PATCH 6/8] Update use-head.md

---
 docs/content/3.api/1.composables/use-head.md | 72 ++++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index b17f8f805a2..be6603ae375 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -40,74 +40,74 @@ The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `rea
 
 An object accepting the following head metadata:
 
-  - `charset`
+- `charset`
 
-    **Type**: `string`
-    **Default**: `utf-8`
+  **Type**: `string`
+  **Default**: `utf-8`
 
-    Specifies character encoding for the HTML document.
+  Specifies character encoding for the HTML document.
 
-  - `viewport`
+- `viewport`
 
-    **Type**: `string`
-    **Default**: `width=device-width, initial-scale=1`
+  **Type**: `string`
+  **Default**: `width=device-width, initial-scale=1`
 
-    Configures the viewport (the user's visible area of a web page).
+  Configures the viewport (the user's visible area of a web page).
 
-  - `meta`
+- `meta`
 
-    **Type**: `Array<Record<string, any>>`
-    **Default**: `width=device-width, initial-scale=1`
+  **Type**: `Array<Record<string, any>>`
+  **Default**: `width=device-width, initial-scale=1`
 
-    Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
+  Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.
 
-  - `link`
+- `link`
 
-    **Type**: `Array<Record<string, any>>`
+  **Type**: `Array<Record<string, any>>`
 
-    Each element in the array is mapped to a newly-created `<link>` tag, where object properties are mapped to the corresponding attributes.
+  Each element in the array is mapped to a newly-created `<link>` tag, where object properties are mapped to the corresponding attributes.
 
-  - `style`
+- `style`
 
-    **Type**: `Array<Record<string, any>>`
+  **Type**: `Array<Record<string, any>>`
 
-    Each element in the array is mapped to a newly-created `<style>` tag, where object properties are mapped to the corresponding attributes.
+  Each element in the array is mapped to a newly-created `<style>` tag, where object properties are mapped to the corresponding attributes.
 
-  - `script`
+- `script`
 
-    **Type**: `Array<Record<string, any>>`
+  **Type**: `Array<Record<string, any>>`
 
-    Each element in the array is mapped to a newly-created `<script>` tag, where object properties are mapped to the corresponding attributes.
+  Each element in the array is mapped to a newly-created `<script>` tag, where object properties are mapped to the corresponding attributes.
 
-  - `noscript`
+- `noscript`
 
-    **Type**: `Array<Record<string, any>>`
+  **Type**: `Array<Record<string, any>>`
 
-    Each element in the array is mapped to a newly-created `<noscript>` tag, where object properties are mapped to the corresponding attributes.
+  Each element in the array is mapped to a newly-created `<noscript>` tag, where object properties are mapped to the corresponding attributes.
 
-  - `titleTemplate`
+- `titleTemplate`
 
-    **Type**: `string` | `((title: string) => string)`
+  **Type**: `string` | `((title: string) => string)`
 
-    Configures dynamic template to customize the page title on an individual page.
+  Configures dynamic template to customize the page title on an individual page.
 
-  - `title`
+- `title`
 
-    **Type**: `string`
+  **Type**: `string`
 
-    Sets static page title on an individual page.
+  Sets static page title on an individual page.
 
-  - `bodyAttrs`
+- `bodyAttrs`
 
-    **Type**: `Record<string, any>`
+  **Type**: `Record<string, any>`
 
-    Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
+  Sets attributes of the `<body>` tag. Each object property is mapped to the corresponding attribute.
 
-  - `htmlAttrs`
+- `htmlAttrs`
 
-    **Type**: `Record<string, any>`
+  **Type**: `Record<string, any>`
 
-    Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
+  Sets attributes of the `<html>` tag. Each object property is mapped to the corresponding attribute.
 
 ## Examples
 

From cc61694f0b58fb91924e44af3d36ea5456341dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?=
 <48835293+DamianGlowala@users.noreply.github.com>
Date: Thu, 1 Sep 2022 14:03:52 +0200
Subject: [PATCH 7/8] Update use-head.md

---
 docs/content/3.api/1.composables/use-head.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index be6603ae375..a96042bf84a 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -43,6 +43,7 @@ An object accepting the following head metadata:
 - `charset`
 
   **Type**: `string`
+
   **Default**: `utf-8`
 
   Specifies character encoding for the HTML document.
@@ -50,6 +51,7 @@ An object accepting the following head metadata:
 - `viewport`
 
   **Type**: `string`
+ 
   **Default**: `width=device-width, initial-scale=1`
 
   Configures the viewport (the user's visible area of a web page).
@@ -57,6 +59,7 @@ An object accepting the following head metadata:
 - `meta`
 
   **Type**: `Array<Record<string, any>>`
+
   **Default**: `width=device-width, initial-scale=1`
 
   Each element in the array is mapped to a newly-created `<meta>` tag, where object properties are mapped to the corresponding attributes.

From ea9050cf48187aa885889e6130422f6e19ddd10b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damian=20G=C5=82owala?=
 <48835293+DamianGlowala@users.noreply.github.com>
Date: Thu, 1 Sep 2022 15:31:11 +0200
Subject: [PATCH 8/8] Update use-head.md

---
 docs/content/3.api/1.composables/use-head.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md
index a96042bf84a..51a9db990da 100644
--- a/docs/content/3.api/1.composables/use-head.md
+++ b/docs/content/3.api/1.composables/use-head.md
@@ -51,7 +51,7 @@ An object accepting the following head metadata:
 - `viewport`
 
   **Type**: `string`
- 
+
   **Default**: `width=device-width, initial-scale=1`
 
   Configures the viewport (the user's visible area of a web page).