Setup Vue

Install

yarn
yarn add @unhead/vue
npm
npm install @unhead/vue
pnpm
pnpm add @unhead/vue

Setup

1. Register the Vue plugin:

Vue 3

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

Vue 2

import Vue from 'vue'
import { createHead, Vue2ProvideUnheadPlugin } from "@unhead/vue"
const head = createHead()
Vue.use(Vue2ProvideUnheadPlugin, head)
Vue.use(head)
new Vue({
  el: '#app',
})

2. Use the composables

Use the composables anywhere in your application.

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

Next Steps

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

Try next:

  1. Optional: Setup SSR
  2. Optional: Setup Auto Imports
  3. Add some recipes
Edit this page on GitHub
Table of Contents