Options API · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview) [Releases](https://unhead.unjs.io/docs/vue/releases/v3) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation) v3 (stable) Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn) - Get Started - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts) - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) - [ Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - Build Plugins - [Overview](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/overview) - [Tree-Shaking](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/tree-shaking) - [useSeoMeta Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/seo-meta-transform) - [Minify Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/minify-transform) - [Devtools](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/devtools) - Plugins - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/vue/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate) Core Concepts # Options API [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/3.options-api.md) Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9). On this page - [What is the Options API for Unhead?](#what-is-the-options-api-for-unhead) - [How Do I Set Up the Options API?](#how-do-i-set-up-the-options-api) - [How Do I Use the head() Option?](#how-do-i-use-the-head-option) **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?](#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?](#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. Client Server ``` 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') ``` ## [How Do I Use the head() Option?](#how-do-i-use-the-head-option) Pass your head data to the `head` property in your component options. ``` ``` Any data provided follows the same [Vue Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/docs/vue/head/guides/core-concepts/reactivity-and-context) that `useHead()` provides. You can alternative provide a plain object to the `head` property. ``` ``` Unhead will automatically handle mixin merging for you. [Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.vue/head/guides/1.core-concepts/3.options-api.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/3.options-api.md) Did this page help you? [ Component Template-based head management with Head, Title, Meta, Link, Script components. Alternative to useHead() for Vue templates.](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) [Pause DOM Rendering Pause Unhead DOM updates during route transitions. Use dom:beforeRender hook with Vue Suspense for smoother page loads.](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) On this page - [What is the Options API for Unhead?](#what-is-the-options-api-for-unhead) - [How Do I Set Up the Options API?](#how-do-i-set-up-the-options-api) - [How Do I Use the head() Option?](#how-do-i-use-the-head-option) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Head Management - [Getting Started](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) - [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer) ### Articles - [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo) ### Research - [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026) - [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance) - [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)