Options API

Use the head() option to read component data and computed properties through this.

Opt-In Support

Options API support is opt-in through VueHeadMixin.

Setup

Install VueHeadMixin in both the client and server entries used by the application. Each Unhead entry point exports it alongside createHead().

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)

// Render `app` with Vue's server renderer.

The head() Option

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.

Alternatively, you can provide a plain object to the head property.

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

Vue's normal mixin merge rules apply when several mixins define head.