Nuxt.js: import router from '~router' stopped working

[hackuun]

Hello. I had a fix for scrolling to top behavior when page transition, but with latest Nuxt releases it stoped working. It was a plugin:

import router from '~router'

router.afterEach((to, from) => {
  setTimeout(() => {
    if (document) document.body.scrollTop = 0
  }, 515)
})

But now this import router from '~router' gives me an error.

Any tips how to fix it? How to access router with latest API?

_{This question is available on Nuxt.js community (#c1489)}

[homerjam]

Can you try import router from '~/router'

[hackuun]

@homerjam nope

This dependency was not found:

* ~/router in ./plugins/scrolltotop.js

To install it, you can run: npm install --save ~/router

[christophwolff]

Try it like this: (actually code i use in an app. ;-) )

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    /*
      Scroll up Container. The router ScrollBehavoir wont work because we have an overflow: auto element where all the flex action happens.
     */
    setTimeout(() => {
      var elmnt = window.document.getElementsByClassName('content-container')[0]
      if (elmnt) elmnt.scrollTop = 0
    }, 500)
  })
}

[christophwolff]

Sorry there was an mistake. i corrected it!

[hackuun]

@christophwolff I need this as a plugin? Where should I put this?

[hackuun]

Not sure what this apply to content-container

[christophwolff]

sorry i thought a made it clear that this was my code... wait.

[hackuun]

I guess it's applied to wrapper in default.vue?

[christophwolff]

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    setTimeout(() => {
        if (document) document.body.scrollTop = 0
    }, 515)
  })
}

put it in a plugin. i.E. scrollUp.js
And then in your nuxt.config.js :

plugins: [
    '~/plugins/scrollUp.js',
  ],
...

[hackuun]

I tried it. Unfortunatly, it still jerking to top before page transition.

[christophwolff]

ahh okay. i thought your issue was the import of router. i think that is fixed isnt it?
Maybe it would be good to open a new issue then.

[hackuun]

What fixed? I don't see any fixes.
I still can't access router to change it behavior. Your code is not working.

[hackuun]

With code above now I have this error

ReferenceError: document is not defined
    at Timeout._onTimeout (server-bundle.js:3894:7)
    at ontimeout (timers.js:469:11)
    at tryOnTimeout (timers.js:304:5)
    at Timer.listOnTimeout (timers.js:264:5)
npm ERR! code ELIFECYCLE

[christophwolff]

try window.document.body.scrollTop = 0

[christophwolff]

Full code

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    setTimeout(() => {
      window.document.body.scrollTop = 0
    }, 515)
  })
}

[hackuun]

Still error.
If I add ssr: false then no error, but no desired effect.

[christophwolff]

ok i found it. you need to disable the default scroll behavoir in nuxt config

  router: {
    scrollBehavior: function (to, from, savedPosition) {
      if (savedPosition) return savedPosition
      return false
    }
  },

[hackuun]

@christophwolff now this is so cool, man, I don't know how to thank you! It is working!

[christophwolff]

You are welcome. :)

[hackuun]

For some weird reason this stopped working today!!!

I DIDN'T CHANGE ANY CODE.

Now when I navigate to other page it doesn't scroll to top at all. Scrollbar just sits on same position.
I am so tired of this.
Guys.
Fix SCROLL TO TOP!!!

[hackuun]

I noticed that in Firefox it's still working. It doesn't work in my Chromiujm.

[christophwolff]

If it is rendering realy long pages it does not work for me. Please close this issue. and open a new one. The title isnt in no way related to the issue. maybe someone else knows help.

[hackuun]

Why title is unrelated? I can't modify router setting. It's still related. It has nothing to do with long pages. It's still the same pages that was yesterday. Today it is not working.

[hackuun]

This is stopped working basically

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    setTimeout(() => {
      window.document.body.scrollTop = 0
    }, 300)
  })
}

Zero effect.

[christophwolff]

do you have a page transition animation?

[hackuun]

Of course I have

.page-enter-active,
.page-leave-active
  transition: opacity 300ms
  will-change: opacity

.page-enter,
.page-leave-active
  opacity: 0

[christophwolff]

how long is it?

[hackuun]

It's unrelated. 300ms. I didn't change anything. Yesterday it was working. It's still working in FF (but not always)

[christophwolff]

so please, bare with me. iam asking questions here to find your issue. I dont know what happend since yesterday...

[christophwolff]

export default ({ app }) => {
app.router.afterEach((to, from) => {
setTimeout(() => {
window.document.body.scrollTop = 0
}, 315)
})
}
Try 315ms

[hackuun]

315 ms - no effect

[hackuun]

Looks like it's just returns savedPosition. This router interception is not working at all.

[christophwolff]

try to return only false in nuxt conf

router: {
scrollBehavior: function (to, from, savedPosition) {
return false
}
},

[homerjam]

The true fix for this is going to come from vue-router not from nuxt. I've submitted a PR which gets us some way to transition support from scrollBehavior - but AFAIK it will always be a workaround.

What @christophwolff is getting at is there could be a delay rendering the page which means the scrolling isn't occurring at the time you need.

@iamdubx it would help if you could post more code, error messages and ideally an isolated reproduction of the issue.

[hackuun]

scrolltotop.js plugin

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    setTimeout(() => {
      window.document.body.scrollTop = 0
    }, 300)
  })
}

nuxt.config.js

router: {
    scrollBehavior: function (to, from, savedPosition) {
      if (savedPosition) return savedPosition
      return false
    }
  },
  plugins: [
    { src: 'plugins/scrolltotop.js', ssr: false }
  ]

page transition styling

.page-enter-active,
.page-leave-active
  transition: opacity 300ms
  will-change: opacity

.page-enter,
.page-leave-active
  opacity: 0

This is all related code.

[hackuun]

@homerjam can you please give a link to that PR that I can know what is happening?

[christophwolff]

@homerjam its working fine for me. I think the issue is the savePosition. It will work even when i throttle my network without any animations.

@iamdubx try only to return a false in scrollBehavoir

[homerjam]

https://github.com/vuejs/vue-router/pull/1758

[hackuun]

@christophwolff hm... Now this is weird. No changes

scrollBehavior: function (to, from, savedPosition) {
      return false
    }

[christophwolff]

@iamdubx weird? what exactly?

[hackuun]

Why it still save position if I am not returning it value?

[hackuun]

@homerjam I see that PR is fresh. Finger crossed this will work. :smile:

[christophwolff]

For me its just working fine. With and wihtour animation. Page throttling and not. Even on chrome canary, safari and firefox. i have no clue

[hackuun]

Hm, let me try on fresh project. Thanks for info.

[christophwolff]

With page ransition

scroll.js

export default ({ app }) => {
  app.router.afterEach(function (to, from, next) {
    setTimeout(() =>{
      window.scrollTo(0, 0)
    },115)
  })
}

nuxt.conf.js (a little different)

  router: {
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) return savedPosition
      return false
    }
  }

_animation.scss

.page-enter-active, .page-leave-active {
  transition: opacity .1s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

[hackuun]

@christophwolff here you go. Clean project. Scroll to top doesn't work at all! Can you confirm it? http://special-ladybug.surge.sh/scroll

First scroll down the page then hit link.

[hackuun]

@christophwolff I tried window.scrollTo(0, 0) instead of window.document.body.scrollTop = 0 and it's magically begin to work again :smile:

I have no idea what is happening right now. Yesterday window.document.body.scrollTop = 0 was working. Today it's not but window.scrollTo(0, 0) is working.

I guess, thanks again @christophwolff

[christophwolff]

your website isnt working in chrome canary. I think it was with window.document.body.scrollTop = 0 right?

you are welcome.

[hackuun]

Closing this, but still hope this can be fixed in vue-router

[marchuksergii]

Hey! I`m also tired to find fix for this issue. Thanks for snippet above.

Instead of _scroll.js_, we can define in _nuxt.config.js_:
transition: { afterLeave () { window.scrollTo(0, 0) } }

[lock[bot]]

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.