title: How to do Open Graph Images in a Vue JS SPA?
body: <p>I'm trying to include an open graph image in my VueJS Single Page Application. </p>
  
  <p><a href="https://developers.facebook.com/tools/debug/" rel="noreferrer">https://developers.facebook.com/tools/debug/</a></p>
  
  <p>Yields me this link preview:</p>
  
  <p><a href="https://i.stack.imgur.com/x0Lby.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x0Lby.png" alt="Link preview on facebook open graph"></a></p>
  
  <p>I think I can just jam the open graph meta tags in the top of the page if I want all routes to return the same image, but I would like different pages to show different images.</p>
  
  <p>I've tried <a href="https://github.com/declandewet/vue-meta" rel="noreferrer">https://github.com/declandewet/vue-meta</a> and <a href="https://github.com/ktquez/vue-head" rel="noreferrer">https://github.com/ktquez/vue-head</a>, but those don't seem to help, presumably because they inject the meta tags via JS after the page has loaded.</p>
  
  <p>Is there any other way than prerendering with Nuxt or Vue SSR?</p>