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: 300
head:
  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>
Edit this page on GitHub
Table of Contents