Adding dynamic meta tags fetched from API to nuxtjs static site

Question

I have a static site with Nuxt and content coming in from Strapi. I want to dynamically set the meta tags that are fetched asynchronously.

My site has an index page which passes the fetched data to index-web or index-mobile through props.

let pageMeta: any
const apiBase: string = 'https://strapi.xyz.com'

export default Vue.extend({
  components: { Greeting, Showcase, Features, Footer },

  props: {
    data: Map,
    pageMeta,
  },

  data() {
    return {
      loading: true,
    }
  },

  metaInfo(): any {
    return {
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: pageMeta.description,
        },
        {
          hid: 'author',
          name: 'author',
          content: pageMeta.author,
        },
      ],
    }
  },
})

The prop being passed in a JSON parsed object.

Having done this, the generated site does not have the meta tags added in.

Answer 1

As mentioned, you need to access the property with .this.