Vue-meta: Cannot set property '$meta' of undefined

Question

After installing vue-meta, there is an error in my browser console.

Why is this error showing up? Is it from my code or a bug? I am using [email protected] and Vue 3.

main.js

createApp(App)
  .use(router)
  .use(VueMeta)
  .mount("#app");

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "./components/Header.vue";

export default {
  components: {
    "app-header": Header,
  },
};
</script>

Home.vue

export default {
  name: "Home",
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta",
        },
      ],
    };
  },
};

Answer 1

I think you should use the metaInfo property: Doc

export default {
  name: "Home",
  metaInfo() {
    return {
      title: "test meta data with vue",
      metaInfo: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta",
        },
      ],
    };
  },
};

Answer 2

Edit: Issue is being tracked here https://github.com/nuxt/vue-meta/issues/628

tldr

From your syntax, (i.e., createApp(App).use(router)... etc.) it looks like you are using Vue3. The vue-meta plugin was developed for Vue2 and will not work with Vue3 until the developers create a corresponding version.

Reason

In Vue3 the api has changed. The app object is passed into the install method of the plugin instead of the Vue constructor.

Vue 2 install def

install: (Vue, options) => {}

Vue 3 install def

install: (app, options) => { }

There is a version 3

Located here https://www.npmjs.com/package/vue-3-meta However - it seems the package is broken. It basically just installs vue-meta.