Vue Tip: Use a Head Manager

Unhead is a framework-agnostic document head manager that you can use to manage page metadata like the title in your Vue application. It's used in the Nuxt core and is part of the UnJS ecosystem.

Installation

First, you need to install the @unhead/vue dependency to your project:

bash

npm install @unhead/vue

Next, you need to register the Vue plugin:

main.ts

1import { createApp } from 'vue'
2import { createHead } from '@unhead/vue'
3
4const app = createApp()
5
6const head = createHead()
7app.use(head)
8
9app.mount('#app')

Usage

Now, you can use the useHead composable in your components, for example, to set the page title:

Component.vue

1<script setup lang=ts>
2import { useHead } from '@unhead/vue'
3
4useHead({
5  title: 'My Portfolio Website'
6})
7</script>

Alternatively, you can use the <Head> component to set the page title:

Component.vue

1<script lang="ts" setup>
2import { Head } from '@unhead/vue/components'
3</script>
4
5<template>
6  <Head>
7    <title>My Portfolio Website</title>
8    <meta name="description" content="My Portfolio Website Description">
9  </Head>
10</template>

And that's it. You can find more information in the official documentation.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Automatically Import Components

Use the unplugin-vue-components tool to automatically import your Vue components.

Vue Tip: Composable to Define Keyboard Shortcuts

I show you a handy Vue composable that allows you to define keyboard shortcuts in your app.