Options API

Introduction

While using the composition API with Unhead is encouraged, the options API is still supported as opt-in for those that prefer it.

Setup

To use the options API, you need to install the mixin VueHeadMixin with Vue.

The mixin is exported by both the client and server entry files of Unhead, @unhead/vue/client and @unhead/vue/server respectively and you'll need to install it for both depending on if you server render or not.

import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/client'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')

import { createApp } from './main'
import { createHead, VueHeadMixin } from '@unhead/vue/server'

const { app } = createApp()
const head = createHead()
app.use(head)
app.mixin(VueHeadMixin)

app.mount('#app')

Usage

Pass your head data to the head property in your component options.

<script>
export default {
  data() {
    return {
      title: 'Hello World'
    }
  },
  head() {
    return {
      title: this.title,
    }
  }
}
</script>

Any data provided follows the same Vue Reactivity that useHead() provides.

You can alternative provide a plain object to the head property.

<script>
export default {
  // or a plain object
  head: {
    title: 'Hello World'
  }
}
</script>

Unhead will automatically handle mixin merging for you.