---
title: "Options API"
description: "Use the head() option in Vue components with VueHeadMixin. Access component data and computed properties for reactive head tags."
canonical_url: "https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api"
last_updated: "2026-05-22T16:41:27.332Z"
---

**Quick Answer:** Use the `head()` option in Vue components to define head tags. It receives the component instance as `this`, allowing access to data and computed properties.

## What is the Options API for Unhead?

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

## How Do I Set Up the Options API?

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.

<code-group>

```ts [Client]
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')
```

```ts [Server]
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')
```

</code-group>

## How Do I Use the head() Option?

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

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

Any data provided follows the same [Vue Reactivity](docs/vue/head/guides/core-concepts/reactivity-and-context) that `useHead()` provides.

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

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

Unhead will automatically handle mixin merging for you.