fix(vue-app): prevent double layout execution (#5703)

[galvez]

In vue-app/client.js, we use showNextPage() to set layout, which is ran in an afterEach hook. As reported in #5703, this causes a double execution when switching layouts. Perhaps having this occur in afterEach is not fast enough -- switching to beforeResolve seems to solve it.

Update: using afterEach works, but the actual call must happen before nextTick.

[codecov-commenter]

Codecov Report

Merging #7442 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #7442   +/-   ##
=======================================
  Coverage   70.32%   70.32%           
=======================================
  Files          88       88           
  Lines        3704     3704           
  Branches     1010     1010           
=======================================
  Hits         2605     2605           
  Misses        892      892           
  Partials      207      207           

Flag	Coverage Δ
#unittests	70.32% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b45f284...c6edad6. Read the comment docs.

[galvez]

Also reported in #7441.

[pimlie]

Does this change influence page transitions? Did you check manually? Dont think we have proper tests to make sure they perform well visually?

But Im worried that this might be a breaking change (albeit it probably a low risk one). If a user already adds their own beforeResolve hook and cancels navigation (or redirects) within that, then the new/wrong layout will already be set.

[galvez]

I did test manually, seems ok.

Re: beforeResolve(), I had an idea to workaround this, will try it next.

[galvez]

@pimlie turns out we can use afterEach for this, we just can't await for nextTick.

[simplenotezy]

🎉🎉

[simplenotezy]

Great!! Good job.

@Atinux Can I pull this fix in through nuxt-edge or how can I get this fix in my application?

[pi0]

@simplenotezy nuxt-edge releases are nightly so you should be able to test if it is fixing issue in your application.

[simplenotezy]

I see, thanks @pi0

[simplenotezy]

I can confirm it's working on my end. Good job guys

[ademyalcin27]

Hi,
I was using Nuxt@2.9.2 and which is mounted triggered 2 times in mobile. after that I upgraded my nuxt version from 2.9.2 to 2.13.3 I still got same error, Also It's same layout calling 2 times in mounted, 'VirtualPageViewAll', and 'mobileDefault' calling in mounted

[hjujah]

For me its not page but all page components are mounting twice. Tried Nuxt 2.13 and 2.14 and edge (2.15) but having the same issue everywhere. Please is there any fix for this?

https://streamable.com/n5m3y6 ---> Check the fix on this screen recording, but it would be great if someone could explain this!? After removing that commented line the components are not mounting twice anymore 😅