---
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-08-11T00:44:31.397Z"
---

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

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

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

</code-group>

## 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.

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

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

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