DEV Community

Discussion on: Dynamic Open Graph Meta Tags with VueJS and Node

Collapse
 
js_bits_bill profile image
JS Bits Bill

Hey Angel. That definitely adds complexity and may not be ideal since you would need to make a server-side request to the API to get the metadata before serving the page, potentially leading to some performance issues. That said, I'm happy to take a look if you have a link to any working code to see what might be possible.

Collapse
 
abernados profile image
abernados • Edited

We're using vue-meta. I also tried following this (github.com/nuxt/vue-meta/tree/1.x#...) but still no luck.

Thread Thread
 
js_bits_bill profile image
JS Bits Bill

Hey @abernados , I was getting terminal errors trying to start the app but I believe the problem is your app is using the regular client-side Vue framework whereas the guide you referenced is for the Nuxt framework. Since Nuxt allows you to build server-rendered Vue apps, it will allow you to retrieve meta data from an API and serve the assembled HTML but would come at the cost of you needing to switch entirely to that framework.

Thread Thread
 
abernados profile image
abernados • Edited

Hi @js_bits_bill , since we're using regular client-side Vue framework, what do you suggest then? I can't switch the whole project into Nuxt so I'm looking for other solutions.

Thread Thread
 
js_bits_bill profile image
JS Bits Bill

Yes, your options are limited. You may need to solution for a semi-hardcoded solution like the approach in this article. In any case, you will need to handle the meta data server-side as Vuejs won't be able to intercept document requests to change meta tags.

Thread Thread
 
abernados profile image
abernados

Okay, thank you for replying.