Configurable 'key' attribute/property for transitions

[silverbackdan]

The vue-router component can have a 'key' property which means it's easier to configure transitions between routes with slugs.

With this change in a layout template you can use

<nuxt :routerViewKey="routerViewKey" />

And the following for example

    computed: {
      routerViewKey () {
        if (this.$route.name === 'service') {
          return this.$route.name
        } else {
          return this.$route.fullPath
        }
      }
    }

This would implement the functionality that @myst729 mentioned here vuejs/vue-router#474 for vue-router - some routes can just switch, but some you may want to transition as though it's a complete new page to an end-user

This is a possible resolution to issue raised here #1021

[codecov-io]

Codecov Report

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

@@           Coverage Diff           @@
##              dev    #1022   +/-   ##
=======================================
  Coverage   98.95%   98.95%           
=======================================
  Files          12       12           
  Lines         670      670           
=======================================
  Hits          663      663           
  Misses          7        7

---

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 d3cacd0...825d0e4. Read the comment docs.

[pi0]

It is a useful enhancement. However, i can't remember but think there was an issue complaining this would result in extra renders because of a Vue problem :))

[silverbackdan]

Ah right, it'd be good to know if that is the case - is that just because of my simplistic implementation or does that happen even with the vue-renderer component? Only because from what I saw, adding a key attribute to their component was now the recommended way of doing this.

Please excuse my lack of knowledge, but is there a way I can check if there are extra renderers as a result? Perhaps in the vue developer tools or something?

[pi0]

@silverbackdan This PR just looks good for me. Just wanted to mention that. Maybe just as you stated in Issue this is new recommended way and without any problems.

[myst729]

@silverbackdan I believe you could find something useful in Chrome DevTools - Performance. It's a powerful tool but also very complicated. You could start with some tutorials, e.g. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

[atinux]

Thank you for the PR @silverbackdan, it's a good idea and it will fix #1021 indeed.

We will make some improvements to make sure no useless render are made.

[silverbackdan]

Thanks @atinux that'll be great. Is it safe to add the 'key' attribute to a with a nested page ? It seems to work well for me, but if there are useless renders would the solution you implement cover that as well? I'd assume so because this PR essentially adds the key to the nuxt-child tag in any case.

[atinux]

It seems that it's pretty rare that people does not want any transition on dynamic route, so I am wondering to add keyattribute by default to $route.path.

But indeed the problem may be for child-routes, I am going to do some tests about it.

[silverbackdan]

I'd quite like the idea of the full path implemented as the key by default, but I can't comment on what the general consensus would be :) I think it'd be nice for sure to be able to override the key though with a computed variable though should some people not want a transition between certain routes. I'll leave it in your much more capable hands though, thanks again!

[myst729]

I personally use a computed property. A typical use case is nested routes.

When parent route changes, it should have transition effect. But when child route changes, I only want the child route to have transition effect. In such case, I bind a computed property to parent route, which only reflects parent route changes.

[atinux]

I see, and it's pretty smart @myst729

The difficult part it to explain the users how to achieve this easily :)

[silverbackdan]

Actually, to be fair I've used a computed property. When I have a nested route, I just want the child to transition so I set a key on that, but in those circumstances the route changes but the entire page doesn't transition.

Perhaps there's a way to implement the key being the full route as the default value, but it can be specified in a property if a user wants.

To explain to other users perhaps saying something like:

The key property on a <nuxt-child /> determines whether a route change should transition or not. When the key property changes, a transition will occur. By default the key is set to the full path of the route, so whenever the route changes a full page transition will occur. However, you can always assign this to a computed property as applicable for your application. When implementing the <nuxt /> tag in a layout the property routerViewKey should be used instead. Eg. <nuxt :routerViewKey="routerViewKey" /> where routerViewKey could be your computed property:

computed: {
  routerViewKey () {
    if (this.$route.path.startsWith('/news')) {
      return 'news'
    }
    return this.$route.fullPath
  }
}

I may not have my terminology 100% correct there and I'm sure my wording can be improved, but I think it is possible to communicate. Also perhaps by adding a simple example (I found those very useful)

To get to grips with VueJS, NuxtJS working with an API and bringing it all together I'm making this site at the moment: https://github.com/silverbackis/StarterWebsite

The only reason I mention it is because the news has a nested route and child pages and it was necessary even for this project which I'm trying to design to be very simple but implement functionality that most websites would require (APIs, Forms with validation, News/Blog items, Admin etc.) So I do think it'd be a common requirement. On the child page though, I've had to create a computed property for the fullPath again, so having that as a default would be useful too.

[atinux]

Thank you @silverbackdan for your help on documentation, it's actually pretty good!

Great job on your starter website, looking forward to it :)

I created a computed property nuxtChildKey which is the default value now, it's equal to $route.fullPath.split('#')[0] to avoid updating the key on hash changes, see the computed property.

Also, this is how it looked before (even with a key property into the pages/users.vue parent div):

And now, without any configuration!

I have to thank you for this nice improvement @silverbackdan 👏

[silverbackdan]

Looks great, thanks @atinux - really great to have this implemented! I like the computed property too, a nice default and well thought out with the hash changes. It'll be interesting to see what others think of it and perhaps if the prop on the nuxt tag should be nuxtChildKey instead but I think this works well as is.

[atinux]

Yes I was thinking of it too I am going to rename it nuxtChildKey :)

[hackuun]

@atinux beautiful demo. Is it availiable as example? Where I can see source code?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.