Options API

If you prefer using the options API, you can use the head key in your components.

Options API is opt-in, so you will need to import the mixin.

// Vue 3
import { createApp } from "vue"
import { createHead, VueHeadMixin } from "@unhead/vue"
const app = createApp()
const head = createHead()
// add options API support

This key can either be a function or a plain object.

All input is passed to the useHead function and is reactive.

export default {
data() {
return {
title: 'Hello world'
head() {
return {
title: this.title
<h1>Hello World</h1>