---
title: "How to Set Page Titles in Vue"
description: "Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly."
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/titles"
last_updated: "2026-01-29"
---
- Use `useHead()` instead of `document.title` for SSR compatibility
- Add a title template to append your site name consistently
- Keep titles under 60 characters to avoid truncation
- Set `og:title` separately for social sharing
Page titles appear in browser tabs and as the clickable headline in search results. Google uses your `` tag [over 80% of the time](https://developers.google.com/search/docs/appearance/title-link) when generating title links. though [studies show](https://zyppy.com/seo/title-tags/google-title-rewrite-study/) it rewrites 61-76% of titles to some degree.
```html
<head>
<title>Mastering Titles in Vue · Vue SEO
```
Setting titles in Vue 3 requires a head manager like [Unhead](https://unhead.unjs.io/) since `document.title` won't work during server-side rendering.
## Quick Reference
```vue
```
```vue
```
```vue
```
## Why Not `document.title`?
You might try setting titles directly:
```ts
// ❌ Breaks SSR, may not be indexed
document.title = 'Home'
```
This fails during server-side rendering. the title won't exist in the initial HTML response. Search engines render JavaScript but [may not wait](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) for client-side updates.
Using `document.title` in a Vue SPA means search engines may index your pages with missing or incorrect titles. Always use a head manager like Unhead for SEO-critical metadata.
Use [Unhead](https://unhead.unjs.io/) instead. It handles both SSR and client-side updates. For Google's official guidance, see [Influencing your title links](https://developers.google.com/search/docs/appearance/title-link).
## Setting Titles with `useHead()`
The [`useHead()`](https://unhead.unjs.io/usage/composables/use-head) composable sets titles that work in SSR and client-side navigation:
```vue [input.vue]twoslash
```
```html [output.html]
Home
```
Works in any component. You can set other head tags in the same call:
```vue
```
### Reactive Titles
Unhead accepts refs, reactive objects, and computed values. Pass the reactive reference directly. don't destructure it with `.value`.
```vue [Bad]
```
```vue [Good]
```
Computed getter syntax works for derived titles:
```vue
```
### SSR and SEO
Fetch data before render, not in `onMounted()`. Client-only fetches mean search engines see your loading state:
```vue
```
Use SSR-compatible data fetching (Vue's `onServerPrefetch()` or framework solutions like Nuxt's `useFetch()`).
## Title Templates
Most sites append a site name to titles for brand recognition. [Google recommends](https://developers.google.com/search/docs/appearance/title-link#page-titles) adding your site name with a delimiter:
```html
Home | MySite
```
Use `titleTemplate` with a [title template](https://unhead.unjs.io/usage/guides/title-template):
```vue [input.vue]twoslash
```
```html [output.html]
Home | MySite
```
The `%s` token gets replaced with your page title (or empty string if none set).
### Disabling the Template
Override the template for specific pages by passing `null`:
```vue [input.vue]
```
```html [output.html]
Home
```
## Template Params
For dynamic site names or separators, use the [Template Params plugin](https://unhead.unjs.io/usage/guides/template-params):
```ts
import { TemplateParamsPlugin } from '@unhead/vue'
const head = injectHead()
head.use(TemplateParamsPlugin)
```
Then use custom params:
```vue [input.vue]twoslash
```
```html [output.html]
Home · MySite
```
Common separators: `|` `-` `.` `•` `·`
Template params work in meta tags too:
```vue
```
## Social Share Titles
Social platforms use `og:title` and `twitter:title` meta tags. Use [`useSeoMeta()`](https://unhead.unjs.io/usage/composables/use-seo-meta) to set these:
```vue [input.vue]
```
```html [output.html]
Why you should eat more broccoli | Health Tips
```
Twitter/X falls back to `og:title` if `twitter:title` isn't set.
## Optimizing for AI Intent
For 2026's AI-driven search (SGE), ambiguous titles perform poorly. AI models categorize pages based on **intent**.
- **Bad:** "Meta Tags" (Too vague)
- **Good:** "How to set Meta Tags in Vue 3" (Tutorial intent)
- **Good:** "Vue 3 Meta Tag API Reference" (Documentation intent)
Use your title to explicitly signal *what* the page offers (Guide, Tool, Comparison, Reference) to help AI route the right users to you.
## Title Length
Google displays roughly 50-60 characters before truncating. [Studies show](https://zyppy.com/title-tags/meta-title-tag-length/) titles between 51-60 characters have the lowest rewrite rates (39-42%).
Longer titles still get indexed. Google truncates the display. Front-load important keywords since users may only see the first 50 characters.
## Vue Router Integration
Set titles from route meta for centralized title management:
```ts
// router.ts
const routes = [
{ path: '/', component: Home, meta: { title: 'Home' } },
{ path: '/about', component: About, meta: { title: 'About Us' } },
{ path: '/blog/:slug', component: BlogPost, meta: { title: 'Blog' } }
]
```
Use a navigation guard to apply titles on route change:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
const title = to.meta.title as string
if (title) {
useHead({ title })
}
})
```
For dynamic routes, override in the component:
```vue
```
### Navigation Guard Patterns
Set a global title template in your guard:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
useHead({
title: to.meta.title as string || 'MySite',
titleTemplate: '%s | MySite'
})
})
```
Handle nested routes by walking matched routes:
```ts
import { useHead } from '@unhead/vue'
router.afterEach((to) => {
// Find deepest route with a title
const title = to.matched.toReversed()
.find(r => r.meta.title)
?.meta
.title as string
if (title)
useHead({ title })
})
```
Using Nuxt? Check out [Nuxt SEO](/docs/nuxt-seo/getting-started/introduction) which handles much of this automatically. [Learn more about Page Titles in Nuxt →](/learn-seo/nuxt/mastering-meta/titles)## Checklist
- Use `useHead()` or `useSeoMeta()` instead of `document.title`
- Set up a title template with your site name
- Keep titles under 60 characters
- Set `og:title` for social sharing
- Fetch data server-side for dynamic titles
- Test titles render correctly in SSR
## Related Resources