Skip to content

Locale Changes If Navigation Is Aborted #3894

@loilo

Description

@loilo

Environment

From the StackBlitz reproduction:

╭── Nuxt project info ─────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                              │
│  Operating system      Linux 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)  │
│                        Chrome/143.0.0.0 Safari/537.36                                                        │
│  CPU                   Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz (8 cores)                                    │
│  Node.js version       v20.19.1                                                                              │
│  nuxt/cli version      3.31.1                                                                                │
│  Package manager       npm 10.8.2                                                                            │
│  Nuxt version          4.2.1                                                                                 │
│  Nitro version         2.12.9                                                                                │
│  Builder               vite 7.2.7                                                                            │
│  Config                compatibilityDate, devtools, i18n, modules                                            │
│  Modules               @nuxtjs/i18n 10.2.1                                                                   │
│                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

Reproduction

https://stackblitz.com/edit/repro-nuxt-i18n-aborted-navigation?file=app%2Fpages%2Findex.vue

Describe the bug

Nuxt i18n's default behavior of switching locales when navigating to a certain prefix unexpectedly also applies if said navigation has been aborted.

Additional context

Edit: I had to revert the fix below since the skipSettingLocaleOnNavigate flag had more side effects than I anticipated (e.g. no redirect to the correct locale when accessing the root of the app).

For my personal use case, I have for now fixed this behavior by setting the skipSettingLocaleOnNavigate flag and re-enable locale change manually. However, this is very likely not the expected behavior.

// Finalize pending locale changes after each navigation
const router = useRouter()
const i18n = useI18n()

router.afterEach(async (to, from, failure) => {
	if (failure) return
	await i18n.finalizePendingLocaleChange()
})

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions