diff --git a/docs/content/2.guide/2.features/13.modules.md b/docs/content/2.guide/2.features/13.modules.md index 1a89c692f9..4ac82eb9a4 100644 --- a/docs/content/2.guide/2.features/13.modules.md +++ b/docs/content/2.guide/2.features/13.modules.md @@ -1,10 +1,10 @@ # Modules -::ReadMore{link="https://modules.nuxtjs.org/?version=3.x" title="Nuxt 3 Compatible Modules"} -:: +Nuxt modules make integrations super simple. You don't have to develop everything from scratch nor bear with maintaining an extra boilerplate when there is already a Nuxt module for it. Adding Nuxt modules is possible using [`nuxt.config`](/api/configuration/nuxt.config#modules). -::ReadMore{link="/guide/going-further/modules" title="Module Author Guide"} -:: +You can find a list of [Nuxt 3 compatible modules here](https://modules.nuxtjs.org/?version=3.x). + +Everyone has the opportunity to develop modules. Read more about developing modules in the [Module Author Guide](/guide/going-further/modules). ::NeedContribution :: diff --git a/docs/content/3.api/1.composables/use-head.md b/docs/content/3.api/1.composables/use-head.md index e37268663b..da557e3371 100644 --- a/docs/content/3.api/1.composables/use-head.md +++ b/docs/content/3.api/1.composables/use-head.md @@ -1,7 +1,47 @@ # `useHead` ::ReadMore{link="/guide/features/head-management"} + +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: + +`title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata. + +```js +useHead(options: MetaObject) +``` + +::alert{icon=👉} +**`useHead` only works during `setup`**. :: -::NeedContribution -:: +## Example + +The example below changes the website's title in the `meta` and inserts a Google Font using the `link` property. + +```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: '' }, + ] + }) + } +} +``` + +## `MetaObject` + +* **charset**: the character encoding in which the document is encoded => `` (default: `'utf-8'`) +* **viewport**: configuration of the viewport (the area of the window in which web content can be seen) => `` (default: `'width=device-width, initial-scale=1'`) +* **meta**: array, each item maps to a newly-created `` element, where object properties map to attributes. +* **link**: array, each item maps to a newly-created `` element, where object properties map to attributes. +* **style**: array, each item maps to a newly-created `