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()

<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:

export default defineNuxtConfig({
  content: {
    contentHead: false
  }
})

Parameters

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

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.

---
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'
---