"Wait for page transition" implementation (skipSettingLocaleOnNavigate) causes useSeoMeta on pages to not update properly on locale change

[vibonacci]

Environment

❯ npx nuxi info
Working directory: /home/projects/bobbiegoede-nuxt-i18n-starter-jbdvj2al                                                                                                                                                                                                  nuxi 13:22:21
Nuxt project info:                                                                                                                                                                                                                                                        nuxi 13:22:22

------------------------------
- Operating System: Linux
- Node Version:     v18.20.3
- Nuxt Version:     3.15.4
- CLI Version:      3.21.1
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, modules, i18n, app, compatibilityDate
- Runtime Modules:  @nuxtjs/[email protected]
- Build Modules:    -
------------------------------

Reproduction

Reproduction:

https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-jbdvj2al?file=pages%2Findex.vue

Describe the bug

After implementing the Wait for page transition using skipSettingLocaleOnNavigate feature from the docs, useSeoMeta values on pages are not updated properly.

If you use the Stackblitz reproduction in a separate tab, you will quickly notice the page title and description fields do not update correctly when switching locales, while the values in Vue template are translated properly as well as the URL prefix.

To see this, use 'Open Preview in new tab' feature of Stackblitz so you can view the <title> tag and inspect the meta description tag. Included a video that makes the issue quite clear.

02-02-2025.13_35_43.mp4

When I remove the Wait for page transition using skipSettingLocaleOnNavigate implementation, the updating the meta tags with useSeoMeta works as intended. Video below. <title>, <meta property="og:title">, <meta name="description">, <meta property="og:description" will have the values of the previous language.

02-02-2025.13_40_27.mp4

This is a bug right, or am I doing something wrong?

On a side note, is it possible to disable the page transitions completely only when locale switching? This is not what we want in the end, but might be useful temporarily.

[rubenkuipers]

I'm having a similar issue with nested components that are not getting their updated translations when I have set skipSettingLocaleOnNavigate to true.

In my scenario I'm using const { t } = useI18n() inside a nested component on the page. Hope this can be solved soon.