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
app.mixin(VueHeadMixin)
app.use(head)
app.mount("#app")

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

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

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