Options API

Introduction

While Vue does not recommend usage of the Options API, it is a valid way to build Vue 3 applications.

Vue Unhead provides opt-in functionality to the options API, allowing you to define the head of your page directly in the component options.

Setup

Import the options API mixin from the @unhead/vue package and add it to any Vue app entry files.

import { createHead, VueHeadMixin } from '@unhead/vue'
import { createApp } from 'vue'

const app = createApp()
const head = createHead()
app.mixin(VueHeadMixin)

If you're SSR make sure you update the client and server entry files.

Usage

Pass your head data to the head property in your component options.

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

Any data provided follows the same Vue Reactivity that useHead() provides.

You can alternative provide a plain object to the head property.

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

Unhead will automatically handle mixin merging for you.