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

[MartinX3]

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

[danielroe]

The best way is to use two <script> blocks for these kind of features based on component options in Nuxt 2.

[MartinX3]

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.

[antlionguard]

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.

[MartinX3]

There is no overflow in my code.