[composition api][typescript] `scrollToTop` per route not available
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 285
- Forks
- 33
- Avg merge
- 22h 38m
- Merged PRs (30d)
- 3
Description
Environment
- Operating System:
Linux - Node Version:
v18.7.0 - Nuxt Version:
2.16.0-27616340.013f051b - Package Manager:
npm@8.15.1 - Builder:
webpack - User Config:
build,buildModules,components,css,head,modules,plugins,srcDir,ssr,target,serverHandlers,devServerHandlers,bridge - Runtime Modules:
- - Build Modules:
(),@nuxtjs/router@1.7.0,@nuxtjs/stylelint-module@4.1.0,@nuxtjs/vuetify@1.12.3,@pinia/nuxt@0.3.1,@nuxt/bridge@3.0.0-27639120.e7a7f9b
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the scrollToTop and router scrollBehavior documentation linked in the issue, then inspect src/app/router.scrollBehavior.js and the reported Composition API usage. The change is complete when new routes scroll to the top while browser-history navigation restores the saved scroll position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100