Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Use a Head Manager

Vue Tip: Use a Head Manager Image
Script

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
import { createApp } from 'vue' import { createHead } from '@unhead/vue' const app = createApp() const head = createHead() app.use(head) app.mount('#app')

Usage

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

Component.vue
<script setup lang=ts> import { useHead } from '@unhead/vue' useHead({ title: 'My Portfolio Website' }) </script>

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

Component.vue
<script lang="ts" setup> import { Head } from '@unhead/vue/components' </script> <template> <Head> <title>My Portfolio Website</title> <meta name="description" content="My Portfolio Website Description"> </Head> </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:

I will never share any of your personal data. You can unsubscribe at any time.

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.