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: 300head: meta: - name: 'keywords' content: 'nuxt, vue, content' - name: 'robots' content: 'index, follow' - name: 'author' content: 'NuxtLabs' - name: 'copyright' content: '© 2022 NuxtLabs'---