Using nuxt-18n inside og-image component

[ptdev]

Hey there,

Apparently we cannot use nuxt-i18n's composables or utilities on the og-image component like useI18n() or $t()

This is supposedly due to nuxt-i18n not supporting server side components.

Demo/Repro: https://stackblitz.com/edit/nuxt-starter-hhx9yk?file=pages%2Findex.vue

I've posted this on your Discord and you've suggested that I open an issue to track this.

Thanks again, cheers 👍

[i7en0v91]

Hi @ptdev ,

I've managed to localize og images with nuxt-i18n, probably, not in the best & recommended way, but it works. E.g. you may take a look at this Demo project.

1. Capture request locale in middleware: https://github.com/i7en0v91/travel-agency-website/blob/ac1737203e4ac602dfa56b9ac4cbd573e45c2181/src/server/middleware/02-og-image-context.ts#L22
2. Obtain it in your og-image component : https://github.com/i7en0v91/travel-agency-website/blob/ac1737203e4ac602dfa56b9ac4cbd573e45c2181/src/components/og-image/og-booking-ticket.vue#L43

Example dynamic og-image's from mentioned Demo project:
http://localhost:3000/__og-image__/image/fr/booking/h6cddi7cai1082i37b3b8/og.png

http://localhost:3000/__og-image__/image/booking/h6cddi7cai1082i37b3b8/og.png

Please note it has some layout issues with the most recent version of nuxt-og-image at the moment, so if you are going to play with this demo, be sure to use exactly the same version of nuxt-og-image as in package.json

[ptdev]

Hey @i7en0v91

Thank you! That was an awesome helpful reply with all the links and demo! 👍

We had ended up just greatly reducing the og-image info with just the title and description as it was too cumbersome for now to pollute our script setup with a bunch of prop calculations/attributions just for those extra few translation strings.

But with these hints we'll probably review and re-do our images eventually to have the details we wanted initially.

Thanks again, cheers!

PS: to @harlan-zw: Leaving this issue open as I was suggested to open it by you (and it would be useful to somehow access whatever modules we have installed on our app inside the og-image component if at all possible), but feel free to close it at your leisure as this workaround does solve the core issue 👍 ❤️

[harlan-zw]

Hi @BobbieGoede, sorry for the ping.

If you have a spare moment I wanted to double-check that you don't have any obvious solutions for this that I'm missing.

For context the OG images are Nuxt Island (server) components.

[BobbieGoede]

Honestly I have no experience with Nuxt Island components yet 😅 We do support ways to detect language and load messages on the server side but I'm not sure where and what these component have access to.. (/cc @kazupon)

Using the provided reproduction I tried to see if there is a good workaround, passing the locale as a prop and manually setting the locale and loading the locale messages seems to work: https://stackblitz.com/edit/nuxt-starter-md9qxx?file=nuxt.config.ts,pages%2Ftest.vue,components%2FOgImage%2FTest.vue but that probably has its performance implications. I'll have to give it a closer look later (maybe today), let me know if there's some obvious quirks about Nuxt Islands I should know about (or resources I could check)!

[BobbieGoede]

The reason why the i18n module doesn't work as expected is because it relies on a few things to detect the correct language such as url prefix, headers and cookies. Since these are unset or not passed while the server component is being rendered the i18n module uses the default language, I wonder if there's any way for the i18n module to provide a solution for this out of the box 🤔