mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 21:55:11 +00:00
docs: mention options api equivalent for head()
(#18650)
This commit is contained in:
parent
727cf7958f
commit
d496703fb4
@ -18,6 +18,7 @@ Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage yo
|
|||||||
|
|
||||||
1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
|
1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
|
||||||
1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.
|
1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components.
|
||||||
|
1. If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
|
||||||
|
|
||||||
### Example: `useHead`
|
### Example: `useHead`
|
||||||
|
|
||||||
@ -104,3 +105,22 @@ export default {
|
|||||||
1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (`<Title>` rather than `<title>`).
|
1. Make sure you use capital letters for these component names to distinguish them from native HTML elements (`<Title>` rather than `<title>`).
|
||||||
1. You can place these components anywhere in your template for your page.
|
1. You can place these components anywhere in your template for your page.
|
||||||
::
|
::
|
||||||
|
|
||||||
|
### Example: Options API
|
||||||
|
|
||||||
|
```vue [Nuxt 3 (Options API)]
|
||||||
|
<script>
|
||||||
|
// if using options API `head` method you must use `defineNuxtComponent`
|
||||||
|
export default defineNuxtComponent({
|
||||||
|
head (nuxtApp) {
|
||||||
|
// `head` receives the nuxt app but cannot access the component instance
|
||||||
|
return {
|
||||||
|
meta: [{
|
||||||
|
name: 'description',
|
||||||
|
content: 'This is my page description.'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
Loading…
Reference in New Issue
Block a user