How to Set Page Titles in Vue · Nuxt SEO

[NuxtSEO](https://nuxtseo.com/ "Home")

- [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [Tools](https://nuxtseo.com/tools)
- [Pro](https://nuxtseo.com/pro)
- [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases)

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

Learn SEO

Master search optimization

Nuxt

 Vue

[SEO Checklist](https://nuxtseo.com/learn-seo/checklist) [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

[Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)

- [Titles](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)
- [Meta Description](https://nuxtseo.com/learn-seo/vue/mastering-meta/descriptions)
- [Social Sharing](https://nuxtseo.com/learn-seo/vue/mastering-meta/social-sharing)
- [Schema.org](https://nuxtseo.com/learn-seo/vue/mastering-meta/schema-org)
- [Migrating vue-meta](https://nuxtseo.com/learn-seo/vue/mastering-meta/migrating-vue-meta)
- [Rich Results](https://nuxtseo.com/learn-seo/vue/mastering-meta/rich-results)
- [Image Alt Text](https://nuxtseo.com/learn-seo/vue/mastering-meta/alt-text)

[ Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)

- [Robots.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/robots-txt)
- [Sitemaps](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/sitemaps)
- [Robot Meta Tag](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/meta-tags)
- [Canonical Link Tag](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/canonical-urls)
- [HTTP Redirects](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/redirects)
- [Duplicate Content](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/duplicate-content)
- [llms.txt](https://nuxtseo.com/learn-seo/vue/controlling-crawlers/llms-txt)

[ SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)

- [Prerendering](https://nuxtseo.com/learn-seo/vue/spa/prerendering)
- [Dynamic Rendering](https://nuxtseo.com/learn-seo/vue/spa/dynamic-rendering)
- [Hydration & SEO](https://nuxtseo.com/learn-seo/vue/spa/hydration)

[ Routes & Rendering](https://nuxtseo.com/learn-seo/vue/routes-and-rendering)

- [URL Structure](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/url-structure)
- [Pagination](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/pagination)
- [Trailing Slashes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/trailing-slashes)
- [Query Parameters](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/query-parameters)
- [Hreflang & i18n](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/i18n)
- [404 Pages](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/404-pages)
- [Dynamic Routes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/dynamic-routes)
- [Internal Linking](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/internal-linking)
- [Rendering Modes](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/rendering)
- [Programmatic SEO](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/programmatic-seo)
- [Security](https://nuxtseo.com/learn-seo/vue/routes-and-rendering/security)

[ SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)

- [Nuxt vs Quasar](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/nuxt-vs-quasar)
- [Custom Vite SSR](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vite-ssr)
- [VitePress SEO](https://nuxtseo.com/learn-seo/vue/ssr-frameworks/vitepress)

[ Launch & Listen](https://nuxtseo.com/learn-seo/vue/launch-and-listen)

- [Getting Indexed](https://nuxtseo.com/learn-seo/vue/launch-and-listen/going-live)
- [Google Search Console](https://nuxtseo.com/learn-seo/vue/launch-and-listen/search-console)
- [Core Web Vitals](https://nuxtseo.com/learn-seo/vue/launch-and-listen/core-web-vitals)
- [Indexing Issues](https://nuxtseo.com/learn-seo/vue/launch-and-listen/indexing-issues)
- [SEO Monitoring](https://nuxtseo.com/learn-seo/vue/launch-and-listen/seo-monitoring)
- [Site Migration](https://nuxtseo.com/learn-seo/vue/launch-and-listen/site-migration)
- [IndexNow](https://nuxtseo.com/learn-seo/vue/launch-and-listen/indexnow)
- [Debugging](https://nuxtseo.com/learn-seo/vue/launch-and-listen/debugging)
- [AI Search Optimization](https://nuxtseo.com/learn-seo/vue/launch-and-listen/ai-optimized-content)

1. [Learn SEO for Vue](https://nuxtseo.com/learn-seo)
2.
3. [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
4.
5. [Titles](https://nuxtseo.com/learn-seo/vue/mastering-meta/titles)

# How to Set Page Titles in Vue

Set dynamic page titles in Vue 3 with useHead. Learn title templates, reactive titles, and SSR patterns that Google indexes correctly.

[![Harlan Wilton](https://avatars.githubusercontent.com/u/5326365?v=4)Harlan Wilton](https://x.com/harlan-zw)8 mins read Published Oct 24, 2024 Updated Jan 29, 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 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 `<title>` 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.

```
<head>
  <title>Mastering Titles in Vue · Vue SEO</title>
</head>
```

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](#quick-reference)

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

// Basic title
useHead({ title: 'Home' })

// With template (adds site name)
useHead({
  title: 'Home',
  titleTemplate: '%s | MySite'
})
</script>
```

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

// Reactive title from data
const post = ref({ title: 'Loading...' })
useHead({
  title: () => post.value.title
})
</script>
```

```
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

// SEO-focused (includes og:title)
useSeoMeta({
  title: 'Home',
  ogTitle: 'Home | MySite'
})
</script>
```

## [Why Not `document.title`?](#why-not-documenttitle)

You might try setting titles directly:

```
// ❌ 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()`](#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:

input.vue

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home'
})
</script>
```

output.html

```
<head>
  <title>Home</title>
</head>
```

Works in any component. You can set other head tags in the same call:

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home',
  meta: [
    { name: 'description', content: 'Welcome to MyApp' }
  ]
})
</script>
```

### [Reactive Titles](#reactive-titles)

Unhead accepts refs, reactive objects, and computed values. Pass the reactive reference directly. don't destructure it with `.value`.

Bad

Good

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

const myTitle = ref('Home')

// Loses reactivity
useHead({
  title: myTitle.value
})
</script>
```

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

const myTitle = ref('Home')

// Stays reactive
useHead({
  title: myTitle
})
</script>
```

Computed getter syntax works for derived titles:

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

const post = ref({ title: 'Loading...' })

useHead({
  title: () => post.value.title // Updates when post changes
})
</script>
```

### [SSR and SEO](#ssr-and-seo)

Fetch data before render, not in `onMounted()`. Client-only fetches mean search engines see your loading state:

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { onMounted, ref } from 'vue'

const postTitle = ref('Loading...')
useHead({ title: postTitle })

// onMounted runs after SSR. Google sees "Loading..."
onMounted(() => {
  (async () => {
    postTitle.value = (await fetchPostData()).title
  })()
})
</script>
```

Use SSR-compatible data fetching (Vue's `onServerPrefetch()` or framework solutions like Nuxt's `useFetch()`).

## [Title Templates](#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:

```
<head>
  <title>Home | MySite</title>
</head>
```

Use `titleTemplate` with a [title template](https://unhead.unjs.io/usage/guides/title-template):

input.vue

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home',
  titleTemplate: '%s | MySite'
})
</script>
```

output.html

```
<head>
  <title>Home | MySite</title>
</head>
```

The `%s` token gets replaced with your page title (or empty string if none set).

### [Disabling the Template](#disabling-the-template)

Override the template for specific pages by passing `null`:

input.vue

```
<script lang="ts" setup>
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home',
  titleTemplate: null
})
</script>
```

output.html

```
<head>
  <title>Home</title>
</head>
```

## [Template Params](#template-params)

For dynamic site names or separators, use the [Template Params plugin](https://unhead.unjs.io/usage/guides/template-params):

```
import { TemplateParamsPlugin } from '@unhead/vue'

const head = injectHead()
head.use(TemplateParamsPlugin)
```

Then use custom params:

input.vue

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home',
  titleTemplate: '%s %separator %siteName',
  templateParams: {
    separator: '·',
    siteName: 'MySite'
  }
})
</script>
```

output.html

```
<head>
  <title>Home · MySite</title>
</head>
```

Common separators: `|` `-` `.` `•` `·`

Template params work in meta tags too:

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  templateParams: { siteName: 'MyApp' },
  title: 'Home',
  meta: [
    { name: 'description', content: 'Welcome to %siteName' },
    { property: 'og:title', content: 'Home | %siteName' }
  ]
})
</script>
```

## [Social Share Titles](#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:

![Nuxt X Share](https://nuxtseo.com/nuxt-x-share.png)_Nuxt X Share_

input.vue

```
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  title: 'Why you should eat more broccoli',
  titleTemplate: '%s | Health Tips',
  // og:title doesn't use titleTemplate. set it explicitly
  ogTitle: 'Health Tips: 10 reasons to eat more broccoli',
  // twitter:title only needed if different from og:title
  twitterTitle: 'Hey X! 10 reasons to eat more broccoli',
})
</script>
```

output.html

```
<head>
  <title>Why you should eat more broccoli | Health Tips</title>
  <meta property="og:title" content="Health Tips: 10 reasons to eat more broccoli" />
  <meta name="twitter:title" content="Hey X! 10 reasons to eat more broccoli" />
</head>
```

Twitter/X falls back to `og:title` if `twitter:title` isn't set.

## [Optimizing for AI Intent](#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](#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](#vue-router-integration)

Set titles from route meta for centralized title management:

```
// 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:

```
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:

```
<script setup lang="ts">
import { useHead } from '@unhead/vue'

// Fetched post data overrides route meta
const post = await fetchPost(route.params.slug)

useHead({
  title: post.title // "How to Build a Blog" instead of generic "Blog"
})
</script>
```

### [Navigation Guard Patterns](#navigation-guard-patterns)

Set a global title template in your guard:

```
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:

```
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

## [Related Resources](#related-resources)

[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)

---

[Mastering Meta Set up meta tags in Vue 3 with Unhead. Covers titles, descriptions, Open Graph, Twitter Cards, and Schema.org with SSR patterns.](https://nuxtseo.com/learn-seo/vue/mastering-meta) [Meta Description Meta descriptions get rewritten by Google 70% of the time anyway. Here's how to implement them properly in Vue using composables and let your content do the heavy lifting.](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)
- [Optimizing for AI Intent](#optimizing-for-ai-intent)
- [Title Length](#title-length)
- [Vue Router Integration](#vue-router-integration)
- [Related Resources](#related-resources)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

### [NuxtSEO](https://nuxtseo.com/ "Home")

- [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)
- [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp)

Modules

- [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)
- [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)
- [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)
- [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)
- [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)
- [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)
- [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)
- [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)
- [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

### [NuxtSEO Pro](https://nuxtseo.com/pro "Nuxt SEO Pro")

- [Getting Started](https://nuxtseo.com/pro)
- [Dashboard](https://nuxtseo.com/pro/dashboard)
- [Pro MCP](https://nuxtseo.com/pro/docs/getting-started/mcp-setup)

### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO")

Nuxt

- [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers)
- [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen)
- [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering)
- [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security)

Vue

- [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue)
- [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta)
- [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers)
- [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa)
- [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks)
- [SEO Checklist](https://nuxtseo.com/learn-seo/checklist)
- [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup)
- [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks)

### [Tools](https://nuxtseo.com/tools "SEO Tools")

- [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger)
- [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator)
- [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker)
- [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown)
- [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator)
- [Schema.org Validator](https://nuxtseo.com/tools/schema-validator)
- [Keyword Idea Generator](https://nuxtseo.com/tools/keyword-generator)
- [Keyword Research](https://nuxtseo.com/tools/keyword-research)
- [SERP Analyzer](https://nuxtseo.com/tools/serp-analyzer)
- [Domain Rankings](https://nuxtseo.com/tools/domain-rankings)

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)