NuxtLink with anchor-link (#id) does not work.

Environment

Nuxt CLI v3.0.0-rc.3 23:26:06 RootDir: C:\Users\sebas\JavascriptProjects\sebbejohansson-front 23:26:08 Nuxt project info: 23:26:08

---

• Operating System: Windows_NT
• Node Version: v17.8.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.10
• Builder: vite
• User Config: telemetry, ssr, target, generate, router, app, css, modules, storyblok, build, env
• Runtime Modules: -
• Build Modules: -

---

👉 Report an issue: https://github.com/nuxt/framework/issues/new 23:26:08

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

Reproduction

In the header of my portfolio page there are NuxtLinks that has this kind of link. Nuxt3 Branch: https://github.com/SebbeJohansson/sebbejohansson-front/tree/56adf54503aa0fbd1ea308e721184fb9ae3fc30a

Describe the bug

Linking to any anchor link with a # to go to a specific id in the DOM does not work. No scroll is triggered.

Additional context

Switching to a normal works. The same <NuxtLink> tags work in Nuxt2.

Logs

No response

[qin-guan]

This behavior is identical to vue-router, a link to an anchor does not scroll to the element by default (see https://router.vuejs.org/guide/advanced/scroll-behavior.html).

To customize this behavior, see https://v3.nuxtjs.org/guide/directory-structure/pages/#router-options.

In app/router.options.ts, this configuration works for me:

import type { RouterConfig } from '@nuxt/schema';

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig>{
  scrollBehavior(to, from, savedPosition) {
    return { el: to.hash };
  },
};

Demo: https://stackblitz.com/edit/github-rwcdcs?file=app/router.options.ts

[iBobik]

This issue is closed, so I created feature request: #8424 Let’s upvote it.