#<NuxtLink> not scrolling to top (Except on Firefox)

3 messages · Page 1 of 1 (latest)

pliant cedar
#

In my Nuxt app, the page does not to the top on route changes after clicking a NuxtLink. However, this issue does not seem to occur on firefox.

#

My test setup is fairly simple:

pages/test.vue:

<template>
  <div>Test</div>
  <ul>
    <li v-for="i in 1000">
      <NuxtLink to="/test2">{{ i }} </NuxtLink>
    </li>
  </ul>
</template>

pages/test2.vue:

<template>
  <div>
    Test 2
    <ul>
      <li v-for="i in 1000">{{ i }}</li>
    </ul>
  </div>
</template>

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon',
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
  devtools: { enabled: true },
});

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --host",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxtjs/tailwindcss": "^6.9.4",
    "nuxt": "^3.8.2",
    "nuxt-icon": "^0.6.6",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
    "@pinia/nuxt": "^0.5.1",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.10",
    "pinia": "^2.1.7"
  }
}