asyncData called twice in developer mode with nuxt-i18n enabled

[rchl]

During development (nuxt dev), if using nuxt-i18n (more specifically vue-i18n) and navigating to a route in another locale, the asyncData of the page component is called twice.

(And also the route object within the asyncData is not set up correctly.)

Versions

• nuxt: v2.15.4

Reproduction

https://codesandbox.io/s/nuxtjs-bug-dev-vue-i18n-asyncdata-5fwl7

Steps to reproduce

1. Set up nuxt-i18n with two locales
2. Create a page component that defines an asyncData hook
3. Create nuxt-link that navigates to a route in another locale.
4. Click the link to navigate to a route in another locale

What is Expected?

• The asyncData is triggered once
• Checking the context.route.path from asyncData reports the new (target) route path.

What is actually happening?

• The asyncData is triggered twice
• Checking the context.route.path from asyncData reports a wrong (old) route both times.

Additional details

See also nuxt-modules/i18n#1160

Here is what is happening:

vue-i18n calls VueComponent.$forceUpdate() on locale change: https://github.com/kazupon/vue-i18n/blob/13f3e618d5a7c3c32fe99f156d1ee2b4e199a5a4/src/index.js#L250-L259

In dev mode, Nuxt implements/overrides $forceUpdate to trigger, amongst others, an asyncData call: https://github.com/nuxt/nuxt.js/blob/8e2cad5a8fd7c4fa731fea92d762b650ee5ce095/packages/vue-app/template/client.js#L740-L746

This is only a problem during development since it's related to "hot reload" which is not enabled otherwise.

That custom $forceUpdate function also does set the route on the context which doesn't seem right in this case as there is a pending transition to another route at that time already.

Maybe the $forceUpdate logic should be skipped entirely if there is a pending route transition? Can't say for sure as I don't know that code but that's the first thing that came to my mind.

[xfyre]

I've recently discovered this, too. This is indeed the case for development mode only. What's even more awkward - asyncData on the page is being called when navigating away from that page.

[sebbayer]

I have a single page app that loads all page contents in asyncData. My vue-i18n locale is updated inside asyncData of the page. That creates an endless http request loop in dev mode until the locale is finally set inside the watcher by $set(): locale changes -> patched $forceUpdate called -> asyncData called again -> locale changes ... and so on.

[stale]

Thanks for your contribution to Nuxt!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[rchl]

I believe this is now fixed. Probably by kazupon/vue-i18n#1278