docs: mention options api equivalent for head() (#18650)

This commit is contained in:
Daniel Roe 2023-02-01 11:12:42 -08:00 committed by GitHub
parent 727cf7958f
commit d496703fb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
```