CODEWITHSUNDEEP
nuxt.jsvue-meta
user3592246
user3592246

Reputation: 167

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

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.

Upvotes: 3

Views: 2022

Answers (1)

bennofs
bennofs

Reputation: 11963

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

Upvotes: 2

Related Questions