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

Question

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?

Disassemble

Thank you @Eldar. But I still don't understand where metaManager is coming from in app.use(metaManager). Where is metaManager in App.vue? – Disassemble

For those coming here, I ended up not using vue-meta and used github.com/vueuse/head instead which works much better IMO. – Disassemble

Yeah, vueuse/head seems to be the proper successor. It is used in Nuxt 3. – Chiastolite

Answer 1

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 line
   
   await 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)

Quincyquindecagon

I have managed to understand this so far. My question is that do we now define meta information like in the version 2 (e.g meta : [ { }, { }, ], scripts: [ ] etc ) or is this done another way. – Br

@Nwaiwulsidore - The type MetaSource hasn't been written yet, but there's 1 quite extensive example in Github; see: App.ts, Child.ts – Quincyquindecagon

Thanks for the link. I was able gain some understanding from the github links. Another issue I want to understand is the behaviour between parent and child. In the older vue-meta, metadata from a child is merged with that of the parent except "vmid" is used. In this version, it seems that they are automatically overridden when you specify them in the child. Am I wrong? – Br

@Br - I believe you are correct but I'm only using v3 of vue-meta on a very simple project (so I can't confirm for certain). I haven't seen any ids in the examples; it looks like you just need to specify the same key. Seems v3 is smarter! – Quincyquindecagon

-. Thanks. It seems to be "smarter". I tried it out and it seems to work. "For now" – Br

How did you manage to figure all this out without any proper documentation? I cannot find this stuff documented anywhere! – Disassemble

@volumeone - Mostly from the vue-router example in the GitHub repo (make sure you're looking at the code in the "next" branch. A little from the README (again "next" branch) & from reading any issue that looked to be for Vue 3. I still struggle with computed meta + vue-class-component. – Quincyquindecagon

FYI - The "two title" issue has just been fixed in [email protected] :) – Quincyquindecagon

Hello there, thank you very much for this answer! Cheers ;) – Downer

Hi, anyone knows whether titleTemplate is supported? And if I want to access this context inside titleTemplate, is this possible? – Footlocker

Looks like titleTemplate isn't supported/working for now as far I see. – Knitter

is this still a working example? tried it with vue-meta@next and it didn't work – Melisamelisande

I haven't used vue-meta for some time. I've converted my answer to community wiki in case someone else wants to update it. – Quincyquindecagon

thanks for this helpful article. Good works. – Idou

Answer 2

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.js

Module 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://mcmap.net/q/505282/-vuejs-module-parse-failed-unexpected-token-lt

Skeens

I found a much better solution which was to drop vue-meta and use @vueuse/head github.com/vueuse/head – Disassemble

Answer 3

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

Tessellation