Back to Posts

How to add SEO Meta and Title Tags in Vue 3 via Teleport

11/22/2022: I would recommend the useHead composable instead of teleporting as done here for controlling SEO Meta. Its much more comprehensive and useful:

This is still useful if you want simple meta changes and/or want to learn more about teleport:⁠


⁠This week we'll go over how to use Teleport to add dynamic titles and meta tags to your Vue3 application.

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

  <teleport to="head">
    <title>{{ title }}</title>
    <meta property="og:description" :content="description">

import metaService from './services/meta'
import { computed } from '@vue/runtime-core'

export default {
  name: 'App',
  setup() {
    const title = computed(() => {
      return metaService.state.title

    const description = computed(() => {
      return metaService.state.description

    return {
import metaService from '../../services/meta'

export default {
  setup() {
    const title = 'Home'
    const description = 'This is a description of the homepage.'

    metaService.update('title', title)
    metaService.update('description', description)

    return {

A working example of this can be found on my Github here: vue3-teleport-head

© 2024