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

May 3, 2022

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: https://unhead.harlanzw.com/guide/guides/usehead

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'

createApp(App).use(router).mount('#app')

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

<script>
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 {
      description,
      title
    }
  }
}
</script>

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 {
      title,
      description
    }
  }
}

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