Dynamic Meta tags in Vue (Open Graph)

Question

I have a Vue.js application where I want to use Open Graph Meta Tags to display some content (title, description, image) when a link is shared on social media (mainly facebook).

I use vue-meta to display the title where I use the title template, and that part works well (except one issue, that might be solved when this is solved).

metaInfo () {
return {
  titleTemplate: this.item.title + ' | %s',
  meta: [
    {property: 'og:title', content: ' | My Site'},
    {property: 'og:site_name', content: 'My Site'},
    // The list of types is available here: http://ogp.me/#types
    {property: 'og:type', content: 'website'},
    // Should the the same as your canonical link, see below.
    {property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
    {property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
    // Often the same as your meta description, but not always.
    {property: 'og:description', content: 'I have things here on my site.'}
  ]
}

},

The data I'm trying to display in the Open Graph tags, is retrieved from firebase and stores in a Object.

When I run a Open Graph test (or try sharing the link) it doesn't get any data.

I have a thought that it might have something todo with it being a SPA, but I'm not that into web developing yet; therefore my question.

Holloway

did you find the solution? I am facing this issue too! – Luxuriant

me too. pre render side not working too on dynamic urls – Sypher

@p01ymath Yes. I decided to use Firebase Functions to prerender the site and returning the data into a plain HTML file, so the Open Graph tags will get fetched by Facebook for example, before the actual vue site renders. Another option, is to use Nuxt which does all this for you – Holloway