Using Vue? Check out the Vue integration.

Using Nuxt? Unhead is already built-in! Check out the Nuxt docs.

Setup

1. Install unhead dependency to your project:

yarn add unhead

2. Create a head instance somewhere in your apps entry.

import { createHead } from 'unhead'

// Create a global head instance
const head = createHead()

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

import { useHead } from 'unhead'

useHead({
  title: 'My awesome site'
})

Optional: Auto-Imports

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

import { unheadComposablesImports } from 'unhead'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        unheadComposablesImports[0],
      ],
    }),
  ]
})

Next Steps

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

Try next:

1. Optional: Setup SSR
2. Add some recipes