---
title: "How to Set Page Titles in Vue 3 · Nuxt SEO"
canonical_url: "https://nuxtseo.com/learn-seo/vue/mastering-meta/titles"
last_updated: "2026-07-16T12:00:00.000Z"
meta:
author: "Harlan Wilton"
description: "Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly."
"og:description": "Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly."
"og:title": "How to Set Page Titles in Vue 3 · Nuxt SEO"
---
Nuxt SEO on GitHub
# **How to Set Page Titles in Vue 3**
Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly.
[Harlan Wilton](https://x.com/harlan-zw)8 mins read Published **Oct 24, 2024** Updated **Jul 16, 2026**
**What you'll learn**
- Use `**useHead()**` instead of `**document.title**` for SSR compatibility
- Add a title template to append your site name consistently
- Keep titles under 60 characters: longer titles get truncated and are far more likely to be rewritten
- Set `**og:title**` separately for social sharing
Page titles appear in browser tabs and as the clickable headline in search results. Google keeps your `****` tag as-is [**~~around 87% of the time~~**](https://developers.google.com/search/blog/2021/09/more-info-about-titles). Third-party studies that count any modification, including truncation and casing changes, put the figure closer to [**~~76% of titles changed in some way~~**](https://searchengineland.com/google-changed-76-of-title-tags-in-q1-2025-heres-what-that-means-454847), so a well-formed title is your best shot at controlling what searchers see.
```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/docs/head/api/composables/use-head) composable sets titles that work in SSR and client-side navigation:
```vue
```
output.html
```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
```
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/docs/head/guides/core-concepts/titles):
```vue
```
output.html
```html
Home | MySite
```
The `**%s**` token gets replaced with your page title (or empty string if none set).
Override the template for specific pages by passing `**null**`:
input.vue
```vue
```
output.html
```html
Home
```
## Template Params
For dynamic site names or separators, register the [**~~Template Params plugin~~**](https://unhead.unjs.io/docs/head/guides/plugins/template-params) when creating your head instance:
```ts
import { createHead } from '@unhead/vue/client'
import { TemplateParamsPlugin } from '@unhead/vue/plugins'
const head = createHead({
plugins: [TemplateParamsPlugin()]
})
```
Then use custom params:
```vue
```
output.html
```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/docs/head/api/composables/use-seo-meta) to set these:
*Nuxt X Share*
input.vue
```vue
```
output.html
```html
Why you should eat more broccoli | Health Tips
```
Twitter/X falls back to `**og:title**` if `**twitter:title**` isn't set.
## Titles for AI Search
AI answer engines categorize pages by intent before deciding what to cite. A vague title like "Meta Tags" gives them nothing to work with; "How to Set Meta Tags in Vue 3" signals a tutorial, "Vue 3 Meta Tag API Reference" signals documentation. Say what the page is in the title.
## Title Length
Google truncates titles at roughly 600px of display width, which works out to 50-60 characters depending on the letters used. The cutoff is pixel-based, so two titles of identical length can truncate differently.
Length also affects rewrites. [**~~Zyppy's study of 80,000+ titles~~**](https://zyppy.com/seo/google-title-rewrite-study/) found the 51-60 character range had the lowest rewrite rates (39-42%), while titles over 70 characters were rewritten every time. A [**~~2025 follow-up study~~**](https://searchengineland.com/google-changed-76-of-title-tags-in-q1-2025-heres-what-that-means-454847) found titles Google left unchanged averaged 44 characters.
Longer titles still get indexed; Google only 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
```
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~~**](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) which handles much of this automatically. [**~~Learn more about Page Titles in Nuxt →~~**](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/titles)
## Checklist
**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
[**The 2026 SEO Checklist for Nuxt & Vue ** Pre-launch setup, post-launch verification, and ongoing monitoring. Interactive checklist with links to every guide.](https://nuxtseo.com/learn-seo/checklist) [Haven't launched yet? Start with the **Pre-Launch Warmup**](https://nuxtseo.com/learn-seo/pre-launch-warmup)
---
### **Related **
[**Meta Descriptions**](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)
[**Social Sharing Tags**](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)
[**SSR vs SPA Rendering**](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering)
### **Open Source **
[**unjs/unhead**** Public **](https://github.com/unjs/unhead)
[**Mastering Meta** Set titles, descriptions, Open Graph, and Schema.org in Vue 3 with @unhead/vue, since Vue needs manual setup Nuxt gives you for free.](https://nuxtseo.com/learn-seo/vue/mastering-meta) [**Meta Description** Google rewrites most meta descriptions anyway. Set yours with useHead or useSeoMeta in Vue 3, then put the real effort into content that earns the click.](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)
**On this page**
- [Quick Reference](#quick-reference)
- [Why Not document.title?](#why-not-documenttitle)
- [Setting Titles with useHead()](#setting-titles-with-usehead)
- [Title Templates](#title-templates)
- [Template Params](#template-params)
- [Social Share Titles](#social-share-titles)
- [Titles for AI Search](#titles-for-ai-search)
- [Title Length](#title-length)
- [Vue Router Integration](#vue-router-integration)
- [Checklist](#checklist)