vue-meta refusing to render server-side on nuxt app

Question

I have {src: '~/plugins/vue-meta.js', ssr: true}, in nuxt.config.js

in index.vue:

  async asyncData({ params, store }) {
    await store.dispatch("articles/getArticle", params.slug);
    return {
      article: store.getters["articles/getArticle"]
    };
  },
  metaInfo() {
    return {
      title: this.article.title,
      meta: [
        {
          vmid: "description",
          hid: "description",
          name: "description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:title",
          hid: "og-title",
          vmid: "og-title",
          content: this.article.title
        },
        {
          property: "og:description",
          hid: "og-description",
          vmid: "og-description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:image",
          hid: "og-image",
          vmid: "og-image",
          content: this.article.small_image_url
        },
        {
          property: "og:type",
          hid: "og-type",
          vmid: "og-type",
          content: "article"
        },
        {
          property: "og:url",
          hid: "og-url",
          vmid: "og-url",
          content: location.origin
        },
        {
          name: "twitter:card",
          hid: "twitter-card",
          vmid: "twitter-card",
          content: this.article.meta_tag_content
        }
      ]
    };
  },

but none of this renders server-side - it only renders client-side, which means Facebook will not read the OG meta elements.

Is there something else that needs to be set for Nuxt to render this server-side?

The mode is set to "universal" in nuxt.config.js. It doesn't matter whether I use generate, run dev or run start, it's the same result in all of them.

Answer 1

Nuxt.js already includes vue-meta by default. However, you need to use head() instead of metaInfo().

From the vue-meta docs:

Note

Altough we talk about the metaInfo variable on this page, please note that the keyName is configurable and could be different in your case. E.g. Nuxt.js uses head as keyName

So replace metaInfo by head and remove the {src: '~/plugins/vue-meta.js', ssr: true} (as it is already included) then it should work (I tested this on a fresh project).