useContentHead()

Configuring your <head> tag from your content has never been easier!

useContentHead() is a composable providing a binding between your content data and useHead.

It is already implemented for you in both <ContentDoc /> component and the default documentDriven page.

Parameters

These parameters can be used from the Front-Matter section of your pages.

KeyTypeDefaultDescription
headObjectA useHead compatible object
titleStringWill be used as the default value for head.title
head.titleStringParsed titleSets the <title> tag
descriptionStringWill be used as the default value for head.description
head.descriptionStringParsed descriptionSets the <meta name="description"> tag
imageString | ObjectWill be used as the default value for head.image
image.srcStringThe source of the image
image.altStringThe alt description of the image
image.xxxStringAny og:image:xxx compatible attribute
head.imageString | ObjectOverrides 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'---

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()
with documentDriven
<script setup lang="ts">const { page } = useContent()useContentHead(page)</script>
with queryContent
<script setup lang="ts">const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)useContentHead(page)</script>
Table of Contents