How to use Vue 3 Meta with Vue.js 3?

Disclaimer: vue-meta v3 is still in alpha!

This was the minimal implementation I needed to get started:

1. Update vue-meta to v3 (in package.json)

   - "vue-meta": "^2.4.0",+ "vue-meta": "^3.0.0-alpha.7",

   ...or with yarn:

   yarn add vue-meta@alpha

2. Add metaManager to Vue app

   import { createMetaManager } from 'vue-meta'const app = createApp(App)  .use(router)  .use(store)  .use(createMetaManager()) // add this lineawait router.isReady()app.mount('#app')

3. Add <metainfo> to App.vue <template> (this is also where I set a "title template")

   <template>  <metainfo>    <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>  </metainfo>  <header />  <router-view />  <footer /></template>

4. Set default meta in App.vue <script>
   Vue 3 vanilla:

   import { useMeta } from 'vue-meta'export default {  setup () {    useMeta({      title: '',      htmlAttrs: { lang: 'en', amp: true }    })  }}

   or with vue-class-component:

   import { setup, Vue } from 'vue-class-component'import { useMeta } from 'vue-meta'export default class App extends Vue {  meta = setup(() => useMeta({    title: '',    htmlAttrs: { lang: 'en', amp: true }  })}

5. Override meta in each component
   Vue 3 vanilla:

   import { useMeta } from 'vue-meta'export default {  setup () {    useMeta({ title: 'Some Page' })  }}

   or with vue-class-component:

   import { computed } from '@vue/runtime-core'import { setup, Vue } from 'vue-class-component'import { useMeta } from 'vue-meta'export default class SomePage extends Vue {  meta = setup(() => useMeta(    computed(() => ({ title: this.something?.field ?? 'Default' })))  )}

See also:

• "Quick Usage" (vue-meta next branch)
• Vue Router Example (vue-meta next branch)

metaManager is a MetaManager instance created from createMetaManager() of vue-meta.

Based on the Vue 3 + Vue Router example for vue-meta, here's an example usage:

import { createApp } from 'vue'import { createMetaManager, defaultConfig, resolveOption, useMeta } from 'vue-meta'const decisionMaker5000000 = resolveOption((prevValue, context) => {  const { uid = 0 } = context.vm || {}  if (!prevValue || prevValue < uid) {    return uid  }})const metaManager = createMetaManager({  ...defaultConfig,  esi: {    group: true,    namespaced: true,    attributes: ['src', 'test', 'text']  }}, decisionMaker5000000)useMeta(  {    og: {      something: 'test'    }  },  metaManager)createApp(App).use(metaManager).mount('#app')

In addition to the previous answers, I also needed to add a transpileDependency in my vue.config.js, as I was using vue-cli:

module.exports = {  transpileDependencies: ['vue-meta']}

Else, I would get the error:

error  in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.jsModule parse failed: Unexpected token (8:7170)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Thanks to this thread for pointing me to this: https://stackoverflow.com/a/65844988/3433137