mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +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. 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`
|
||||
|
||||
@ -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. 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