Installing Unhead with Vue

Introduction

Unhead is the official head management library for Vue. It provides a simple and intuitive API for managing the head of your application, including the title, meta tags, and other elements that are important for SEO and user experience.

Setup

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

yarn add @unhead/vue

npm install @unhead/vue

pnpm add @unhead/vue

If you're using Vue 2, you will need to install v1 of @unhead/vue instead.

yarn add @unhead/vue@^1

npm install @unhead/vue@^1

pnpm add @unhead/vue@^1

Demos

• StackBlitz - Vite - Vue SPA

2. Register the Vue plugin:

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

const app = createApp()

const head = createHead()
app.use(head)

app.mount('#app')

// You must use v1 of Unhead for Vue 2 support
import { createHead } from '@unhead/vue'
import { UnheadPlugin } from '@unhead/vue/vue2'
import Vue from 'vue'

const head = createHead()
Vue.use(UnheadPlugin)

::

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>

<script>
export default {
  head: {
    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 { createHead, VueHeadMixin } from '@unhead/vue'
import { createApp } from '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