fix(vue-app): use app.context.route for resolving components

[enwin]

I'll need your feedback on this fix since I'm calling the async component resolution used for the SSR. It might not be the best idea but it works so far 🤷

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Resolves: #9049
Update vue-app/template/index.js to call async component resolver on client side too.
Update vue-app/template/client.js to use app.context.route in the resolveComponents method to match the components based on the final route.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[enwin]

If someone could have a look at the tests suite?

On my side, most of the time I get a timeout from puppeteer on each e2e tests: TimeoutError: waiting for function failed: timeout 30000ms exceeded. I reran yarn && yarn build restarted multiple times but still cannot debug whats failing.

[pi0]

LGTM. Thanks!

[patrioticcow]

Hi.

Why was the if statement removed if (process.server && ssrContext && ssrContext.url) ?
It breaks component loading using the components:dirs hook and overriding the app.router by using app.router.push

I'm able to reproduce it https://codesandbox.io/s/small-browser-ek8m5 Try switching between nuxt 2.15.3 and 2.15.4 and ull see that with latest the page keeps refreshing.

@enwin ^

[enwin]

Hi @patrioticcow!

The if statement was moved further down so when createApp is called from the client side, the component resolution is made using the potential navigation guards that you can have added to your site using router.beforeEach. Without that, you could end up with the wrong page component being executed.

From what I'm seing from your code example, the issue resides in the fact that the component resolution is triggered using router.push and that in your code you override the push method so it can do a window.location.href instead. By doing that every time the page loads router.push is called creating a navigation to the same page again and again with window.location.href.

The best of both world would be for nuxt to use router.replace instead of router.push. It shouldn't have any incidence on the component resolution. I also noticed that it would avoid the creation of a new history entry in the browser. That alone should be a nice fix.

Will work on that ASAP 👍