I forked from #1939 reproduction link, updated nuxt and i18n, removed unnecessary parts and used the latest implementation of transitions and it seems to be solved.
I decided to keep it in the repro (so sorry this is not minimal), you can switch in the top nav between '/' (using useState from #1939) and '/fetch' with my workaround)
Describe the bug
When using transitions, locale change is delayed after the page fades out.
Without this, the content would change right away which defeats the purpose of the transition.
But, when loading the new page, locale is still set to the old locale and fetches content with the old locale... misère !
To sum up the steps involved :
user clicks on link to switch to a new page with another locale
navigation starts, page fades out, new page is being loaded, locale is still set to old locale
Hmm... we want the locale to change only after the new route has loaded but also we want the locale property to be updated before the new route starts loading... Those are conflicting expectations.
I'm not sure if there is a clean solution for that.
While writing a reproduction I tried adding a new variable immediateLocale (I'm sure there is a better name) that is being set on step 1 (i.e. before navigating to new page).
Fetching the content using this variable works as intended.
You will see in the repro link, in app.vue, I declared immediateLocale with useState, watched for locale changes, and set it right before nuxtlink navigation.
And then I use immediateLocale to fetch content in other pages.
We now have a workaround, but it would be nice if it could be implemented in the module and exposed like :
const { immediateLocale } = useI18n()
Environment
i18n v8
Reproduction
This is the reproduction with the fix/hack: https://stackblitz.com/edit/nuxt-starter-pekxmy
I forked from #1939 reproduction link, updated nuxt and i18n, removed unnecessary parts and used the latest implementation of transitions and it seems to be solved. I decided to keep it in the repro (so sorry this is not minimal), you can switch in the top nav between '/' (using useState from #1939) and '/fetch' with my workaround)
Describe the bug
When using transitions, locale change is delayed after the page fades out. Without this, the content would change right away which defeats the purpose of the transition. But, when loading the new page, locale is still set to the old locale and fetches content with the old locale... misère !
To sum up the steps involved :
from @rchl comment in 1255
While writing a reproduction I tried adding a new variable
immediateLocale
(I'm sure there is a better name) that is being set on step 1 (i.e. before navigating to new page). Fetching the content using this variable works as intended.You will see in the repro link, in
app.vue
, I declaredimmediateLocale
withuseState
, watched for locale changes, and set it right before nuxtlink navigation. And then I useimmediateLocale
to fetch content in other pages.We now have a workaround, but it would be nice if it could be implemented in the module and exposed like :
const { immediateLocale } = useI18n()
Additional context
No response
Logs
No response