NuxtJs dynamic open graph tags are not working

Question

i am trying to set up a dynamic open graph meta tags using the following code

    async asyncData({ app, route }) {
        let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
        postDetails = postDetails.data.post;
        return { postDetails };
    },
    head() {
        return {
             meta: [
                { hid: 'title', name: "title", content: this.postDetails.title },
                { hid: "description", name: "description", content: this.postDetails.body },
                { hid: "twitter:image", name: "twitter:image", content: this.postDetails.image },
                { hid: "twitter:card", name: "twitter:card", content: "summary_large_image" },
                { hid: "og:image",name: "og:image", content: this.postDetails.image },
                { hid: "og:image:secure_url", name: "og:image:secure_url", content: this.postDetails.image },
                { hid: "og:title", name: "og:title", content: this.postDetails.title },
                { hid: "og:description", name: "og:description", content: this.postDetails.body },
                { hid: "description", name: "description", content: this.postDetails.body },
                { hid: "og:url", name: "og:url", content: window.location.href }
            ]
        };
    },

I have logged postDetails and the data is there in asyncData function. Now when i open the page and inspect the meta tags are perfectly changed, but when i open facebook and paste in it or press ctrl + u it only shows its default open graph tags. What am i doing wrong here? can someone please help?

Answer 1

Tried tons of things, unfortunately they didn't worked out. So i found a way to 'hack' meta tags by just injecting them into the app object, in asyncData. And now it works like a charm, i don't know what the issue was i even tried to manually install vue-meta.

async asyncData({ app, route }) {
        let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`);
        postDetails = postDetails.data.post;
        const mutation = app.head.meta.map(i => {
            if(i && i.hid){
                if(i.hid === 'title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body;
                }
                if(i.hid === 'twitter:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'twitter:card'){
                    i.content = 'summary_large_image'
                }
                if(i.hid === 'og:image'){
                    i.content = postDetails.image
                }
                if(i.hid === 'og:image:secure_url'){
                    i.content = postDetails.title;
                }
                if(i.hid === 'og:title'){
                    i.content = postDetails.title
                }
                if(i.hid === 'og:description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'description'){
                    i.content = postDetails.body
                }
                if(i.hid === 'og:url'){
                    i.content = route.fullPath
                }
            }
            return i;
        });
      app.head.meta = mutation;
      return { postDetails };
},