Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 4 commits into from
Sep 8, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abff6cb
docs(use-head): fix /api/composables/use-meta to /api/composables/use…
huang-julien Sep 7, 2022
8362149
docs(head): mention noscript for useHead and Meta Tags
huang-julien Sep 8, 2022
cd0ace0
docs(use-head): fix links
huang-julien Sep 8, 2022
6ba1fe3
docs: fix meta tags link
huang-julien Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/content/2.guide/2.features/4.head-management.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` m

## `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:

Expand Down Expand Up @@ -70,7 +70,7 @@ useHead({

## 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.

Expand Down
4 changes: 2 additions & 2 deletions docs/content/4.examples/3.composables/use-head.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

::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"}
Expand Down
2 changes: 1 addition & 1 deletion docs/content/migration/4.meta.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Nuxt 3 provides several different ways to manage your meta tags.
2. Through the `useHead` [composable](/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=📦}
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
Expand Down