Changing locale causes all components to be in Unmounted state

[martinszeltins]

Environment

------------------------------
- Operating System: Linux
- Node Version:     v20.11.0
- Nuxt Version:     3.11.2
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  npm@10.2.4
- Builder:          -
- User Config:      modules, i18n
- Runtime Modules:  @nuxtjs/i18n@8.3.1
- Build Modules:    -
------------------------------

Reproduction

https://stackblitz.com/github/martinszeltins/nuxt-i18n-unmounted

Describe the bug

When using setLocale() to change locale, it causes all of the components to be left in an Unmounted state.

Please see the reproduction. When you click the Change Locale button, which uses setLocale to change the locale, we see this output in console:

onMounted
onMounted
onUnmounted
onUnmounted

The last lifecycle hook that triggered was the onUnmounted hook. Now all components think that they are unmounted when actually they are not unmounted.

This causes all kinds of issues because usually in onUnmounted hook we perform cleanup, remove event listeners etc. and it causes the app to break.

Screenshot:

Additional context

No response

Logs

No response

[kazupon]

Thank you for your reporting!

unmount is called because nuxt-i18n registers the URLs for nuxt routing by locale. nuxt routing (vue-router) allows the Vue component lifecycle is invoked such as mount and umount So, this is the expected behaviour.

Thanks!

[martinszeltins]

I don't think this is the expected behavior because the end state of all components is unmounted which triggers all onUnmount hooks to run and all event listeners are removed. But actually the component is still mounted.

[BobbieGoede]

I have changed the logs in your reproduction to better illustrate what is happening:

[martinszeltins]

I have changed the logs in your reproduction to better illustrate what is happening

Oh, I see now. Each locale has its own instance. I also tested with lifecycle hooks and they do indeed seem to be working. Thank you for taking your time to look into this!