Vue Tip: Use a Head Manager
Michael Hoffmann
@mokkapps
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:
npm install @unhead/vue
Next, you need to register the Vue plugin:
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:
<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:
<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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :