Setup

1. Install @unhead/vue dependency to your project:

yarn add @unhead/vue

2. Register the Vue plugin:

import { createApp } from 'vue'
import { createHead } from '@unhead/vue'
const app = createApp()
const head = createHead()
app.use(head)
app.mount('#app')

3. Done! Now you can use the useHead composable to manage your head.

<script setup lang=ts>
import { useHead } from '@unhead/vue'
useHead({
  title: 'My awesome site'
})
</script>

Optional: Auto-Imports

Unhead provides out-of-the-box configuration for unplugin-auto-import.

import { unheadVueComposablesImports } from '@unhead/vue'
export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        unheadVueComposablesImports,
      ],
    }),
  ]
})

Optional: Vue 3 Options API

The options API functionality is only provided out-of-the-box for Vue 2, if you'd like to use in Vue 3 you will need to install the mixin.

import { createApp } from 'vue'
import { VueHeadMixin, createHead } from '@unhead/vue'
const app = createApp()
const head = createHead()
app.mixin(VueHeadMixin)
// ...

This key can either be a function or a plain object or reactive data. See Reactivity for more details.

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

Next Steps

Your Vue app is now setup for head management, congrats! 🎉

Try next:

1. Optional: Setup SSR
2. Explore the Composables