composables
useContentHead()
The useContentHead() composable provides a binding between your content data and useHead() composable.
Usage
useContentHead() is available everywhere in your app where useHead would be.
It takes two arguments:
document: A document data (of any type)to: A route path- Default:
useRoute()
- Default:
<script setup lang="ts">
const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)
useContentHead(page)
</script>
Automation
When using the <ContentDoc /> component or the default document-driven page, the composable will be automatically used.
To disable the automation, you can set the contentHead option to false in your nuxt.config:
nuxt.config.ts
export default defineNuxtConfig({
content: {
contentHead: false
}
})
Parameters
These parameters can be used from the Front-Matter section of your pages.
| Key | Type | Default | Description |
|---|---|---|---|
head | object | A useHead compatible object | |
title | string | Will be used as the default value for head.title | |
head.title | string | Parsed title | Sets the <title> tag |
description | string | Will be used as the default value for head.description | |
head.description | string | Parsed description | Sets the <meta name="description"> tag |
image | string | object | Will be used as the default value for head.image | |
image.src | string | The source of the image | |
image.alt | string | The alt description of the image | |
image.xxx | string | Any og:image:xxx compatible attribute | |
head.image | string | object | Overrides the <meta property="og:image"> |
At the exception of title, description and image, the head object behaves exactly the same in Front-Matter as it would in useHead({ ... }) composable.
You can specify any value that is writeable in yaml format.
example-usage.md
---
title: 'My Page Title'
description: 'What a lovely page.'
image:
src: '/assets/image.jpg'
alt: 'An image showcasing My Page.'
width: 400
height: 300
head:
meta:
- name: 'keywords'
content: 'nuxt, vue, content'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'NuxtLabs'
- name: 'copyright'
content: '© 2022 NuxtLabs'
---