nuxt / nuxt/bridge

[composition api][typescript] `scrollToTop` per route not available

Open
#457 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement workaround available
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.