nuxt
[composition api][typescript] `scrollToTop` per route not available
Environment
- Operating System:
Linux - Node Version:
v18.7.0 - Nuxt Version:
2.16.0-27616340.013f051b - Package Manager:
[email protected] - Builder:
webpack - User Config:
build,buildModules,components,css,head,modules,plugins,srcDir,ssr,target,serverHandlers,devServerHandlers,bridge - Runtime Modules:
- - Build Modules:
(),@nuxtjs/[email protected],@nuxtjs/[email protected],@nuxtjs/[email protected],@pinia/[email protected],@nuxt/[email protected]
Reproduction
N/A
I just saw
https://nuxtjs.org/docs/components-glossary/scrolltotop/
but with the composition api it's impossible to use
<script>
export default {
scrollToTop: true
}
</script>
Nuxt default scroll behaviour doesn't work if I can't set this option in the composition api:
https://nuxtjs.org/docs/configuration-glossary/configuration-router/#scrollbehavior
Describe the bug
The scroll position is always the same. I want to scroll to top on new routes and if going back I want to restore my previous scroll position.
Additional context
I use this workaround for now:
#component back button
import { getCurrentInstance } from 'vue'
getCurrentInstance()?.proxy?.$router.go(-1)
#src/app/router.scrollBehavior.js
export default function (_, __, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
x: savedPosition?.x || 0,
y: savedPosition?.y || 0,
})
}, 0)
})
}
Logs
N/A
The best way is to use two <script> blocks for these kind of features based on component options in Nuxt 2.
In the specific child route I tried
<script lang="ts">
export default {
scrollToTop: true,
}
</script>
but it always pushes me to the top using the back button. If I remove it, it always uses the same scroll position.
So it doesn't work without the workaround.
In the specific child route I tried
<script lang="ts"> export default { scrollToTop: true, } </script>but it always pushes me to the top using the back button. If I remove it, it always uses the same scroll position.
So it doesn't work without the workaround.
Nuxt always scroll top when route is changed. You have any overflow: hidden, overflow-y: hidden or overflow-x: hidden css line for body/html? If is exist you should try to remove them.
