Nuxt.js: Blinking page when using $route.fullPath

[ndan]

Version

v2.4.5

Reproduction link

https://codesandbox.io/s/rplo4837o

Steps to reproduce

1. Navigate between home and about page (https://codesandbox.io/s/rplo4837o)

What is expected ?

Nuxt should not display both pages at the same time

What is actually happening?

Nuxt displays both pages (for a few milliseconds) during navigation,

Additional comments?

There is no such issue on vanilla VueJS + vue-router.

Real world example: I have a page with images (position: absolute, z-index: 10). When I navigate to another page, these images displayed on top of the new page (for a few milliseconds). It looks ugly.

_{This bug report is available on Nuxt community (#c8878)}

[tmorehouse]

Looks like it might be trying to do a transition between pages, but is missing the transition CSS.

[ndan]

Ok, I was able to fix it by disabling CSS transition.

// nuxt.config.js
transition: {
  css: false
}

[ndan]

@manniL Why did you close this issue?

It's not obvious that this kind of bug is caused by css transition.
I would say transition.css should be set to false by default or the way it works should be changed.

[tmorehouse]

To me it sounds like @manniL might be missing the transition CSS styles needed for the page transition (to transition from one component to the other), so instead of fading (or whatever other transition name is defined in the config), it is showing both view components stacked as it tries to transition from one router view to another.

[manniL]

@ndan By default, page transitions are enabled (as stated in the docs). They work smoothly with "full-screen" pages.

You can either disable css transitions (or all of them) or change the mode to in-out:

export default {
  transition: {
    mode: "in-out"
  }
}

[ndan]

It's not been a problem since I found the solution. I'm just curious why this is not an issue for the framework.

They work smoothly with "full-screen" pages.

They don't if you have elements with position: absolute.
https://codesandbox.io/s/z6lyj633km
You can barely see it in this example, but it's noticeable for a real-world app.

Enabling CSS transition by default looks useless if not to provide default CSS for it.

ps. The problem is not easy to diagnose and fix, especially for people who new to Nuxt.js.

[manniL]

@ndan Interesting! But it "works" when not using key? 🤔

I see your point there, no doubts. Maybe it'd be worth to either add default page transition styles to all scaffolded projects or to disable stuff by default, yup.

[ndan]

But it "works" when not using key?

Correct. This is the fun part because it's hard to guess why.

[manniL]

@ndan Ah, got it. And why exactly do you use the key there?

[ndan]

Vue Router does not notice any change if the same component is being addressed.
It tells Vue if fullPath changes even if the component is the same you should render it from scratch.

See more https://youtu.be/7lpemgMhi0k?t=1057

[manniL]

@ndan Are you sure that this behavior isn't different when switching between Nuxt pages? 🤔 I haven't had a use case to play around with, so I can't tell 🙈

[tmorehouse]

Transitions (if enabled) usually are applied to the <nuxt-view> and <nuxt-child> components (which are updated on route changes)

[ndan]

Here is a super simple example of usage $route.fullPath
https://codesandbox.io/s/kx7pp4286v

Steps:

1. Click on "Click me to update".
2. Navigate among links.
3. Vue will create the component every time the query is changed.
4. Try to remove :key="$route.fullPath" from the layout and Vue won't call created() when the query is changed.

ps. I know it can be replaced by watchQuery and asyncData. I would recommend using watchQuery instead of $route.fullPath, but it just an example of how to reproduce the issue.

pps. Anyway, considering the fact it's a rare case and watchQuery can do the job, I would better keep it as is.

Thanks, guys for your help. I really like nuxt and I'm happy that the community is so vibrant.