---
title: Options API
description: Learn how to use the options API with Unhead.
---

## 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`{lang="ts"} and `@unhead/vue/server`{lang="ts"} respectively and you'll need
to install it for both depending on if you server render or not.

::code-group

```ts{2,7} [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{2,7} [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')
```

::

## Usage

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()`{lang="ts"} 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.