Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs(head): enhance usehead and fix broken links (#7364)

This commit is contained in:
Julien Huang 2022-09-08 20:54:02 +02:00 committed by GitHub
parent 0cc49e2a20
commit 6c462b3315
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` m
## `useHead` Composable ## `useHead` Composable
Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata. Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. There are also two shorthand properties, `charset` and `viewport`, which set the corresponding meta tags. Alternatively, you can pass a function returning the object for reactive metadata.
For example: For example:
@ -70,7 +70,7 @@ useHead({
## Meta Components ## 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. Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
Because these component names match native HTML elements, it is very important that they are capitalized in the template. Because these component names match native HTML elements, it is very important that they are capitalized in the template.

4
docs/content/4.examples/3.composables/use-head.md
View File

@ -7,10 +7,10 @@ template: Example
This example shows how to use `useHead` and Nuxt built-in components to bind meta data to the head of the page. This example shows how to use `useHead` and Nuxt built-in components to bind meta data to the head of the page.
::alert{type=info icon=👉} ::alert{type=info icon=👉}
Learn more about [meta tags](/api/composables/use-meta). Learn more about [meta tags](/guide/features/head-management#meta-components).
:: ::
::ReadMore{link="/api/composables/use-fetch"} ::ReadMore{link="/api/composables/use-head"}
:: ::
::ReadMore{link="/guide/features/head-management"} ::ReadMore{link="/guide/features/head-management"}

2
docs/content/migration/4.meta.md
View File

@ -11,7 +11,7 @@ Nuxt 3 provides several different ways to manage your meta tags.
2. Through the `useHead` [composable](/guide/features/head-management) 2. Through the `useHead` [composable](/guide/features/head-management)
3. Through [global meta components](/guide/features/head-management) 3. Through [global meta components](/guide/features/head-management)
You can customize `title`, `titleTemplate`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`. You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
::alert{icon=📦} ::alert{icon=📦}
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change. Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.