in vue3 vue-meta showing name="meta" for each meta tags, so not able to add twitter card meta

Question

i am using vue-meta 2.4.0 my code as:

metaInfo() {
    return {
      htmlAttrs: { lang: 'en', amp: true },
      title: "page title",
      description : "Page description",
      meta: [
        //twitter card
        { vmid: 'twitter:title', name: 'twitter:title', content: 'twitter title'},
        { vmid: 'twitter:description', name: 'twitter:description', content: 'twitter description'},
        // google
        {vmid: 'og:title', property: "og:title",content: "og ttitle",},
        {vmid: "og:description", property: "og:description",content:"og description",},
      ]
    }
  }

output as :

as I have added name: 'twitter:title' still it is showing name="meta" also it is showing name="meta" for all meta tags.

Twitter required meat tasg as:

<meta name="twitter:title" content="twitter title">
<meta name='twitter:description' content='twitter description'>

Answer 1

In vue js 3 you should use the vue3-meta or alpha version. Then do the following

metaInfo() {
    return {
        htmlAttrs: { lang: 'en', amp: true },
        title: "page title",
        description : "Page description",
        twitter: {
            title: "twitter title",
            description: "twitter description",
            card: "twitter card",
            image: "twitter image",
        },
        og: {
            title : 'og title!',
            description : 'og description!',
            type : 'og type',
            url : 'og url',
            image : 'og image',
            site_name : 'og site name',
        }
    }
}

if you want to use meta name then change the config in main.js

import { createMetaManager, defaultConfig, plugin as metaPlugin } from 'vue-meta'
const metaManager = createMetaManager(false, {
    ...defaultConfig,
    meta: { tag: 'meta', nameless: true },
});

and in your component use the meta name below

metaInfo() {
    return {
        meta: [
            {'name' : 'author', 'content' : 'author'},
            { name: 'description', content: 'authors' },
        ]
    }
}