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

It seems that Vue Meta has been upgraded to handle Vue.js 3 with a new npm package called vue-3-meta

Before Vue.js 3, it was easy to use vue-meta by adding it to the Vue instance:

import Vue from 'vue'
import VueMeta from 'vue-meta'
 
Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

However in Vue.js 3, there is no Vue instance; and instead you create the app by running createApp like such:

const app = createApp(App);
const router = createVueRouter();

app.use(router);
// need to make app use Vue-Meta here

I cannot find any documentation for vue-3-meta. import VueMeta from 'vue-meta' no longer works.

How do I import the vue-3-meta plugin properly and use it with app like in prior versions?

7 thoughts on “How to use Vue 3 Meta with Vue.js 3?”

  1. 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')
    
    Reply

Leave a Comment