\n\n\u003Cimg width=\"428\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7f2bf278-8b13-4d8b-84ec-beb29d9036bb\" />\n\nI couldnt reproduce in a fresh project, but my project is pretty clean still with no customizations. Might have something to do with the css order?\n",[3051,3054],{"name":3052,"color":3053},"bug","d73a4a",{"name":3055,"color":3056},"v3","49DCB8",2926,"ui","v3: Icon size gets overwritten by icon's width/height","2024-12-29T11:55:14Z","https://github.com/nuxt/ui/issues/2926",0.7443912,{"description":3064,"labels":3065,"number":3070,"owner":3027,"repository":3027,"state":3043,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Describe the feature\n\nWhen navigating to hash links, its not unusual that you actually want to add an additional couple of pixels to the scroll Y position.\r\n\r\nIt would be great if this could be controlled via an option in the nuxt.config, similar to the \"scrollBehaviourType\".\r\n\r\nProposed solution:\r\nAdd new option called \"scrollY\" that will take a positive or negative number of pixels for where the anchor will be.\r\n\r\n```\r\nexport default defineNuxtConfig({\r\n router: {\r\n options: {\r\n scrollBehaviorType: 'smooth',\r\n scrollY: '50px'\r\n }\r\n }\r\n})\r\n\r\n```\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3066,3069],{"name":3067,"color":3068},"3.x","29bc7f",{"name":3024,"color":3025},24280,"Add an option to configure anchors Y position when scrolling to a hashLink","2023-11-16T17:39:25Z","https://github.com/nuxt/nuxt/issues/24280",0.74549365,{"description":3076,"labels":3077,"number":3082,"owner":3027,"repository":3027,"state":3043,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `nitro`, `modules`, `svgo`, `image`, `googleFonts`, `alias`, `app`, `typescript`, `devtools`, `devServer`\r\n- Runtime Modules: `@pinia/nuxt@0.5.1`, `@nuxt/content@2.12.0`, `@nuxtjs/tailwindcss@6.11.4`, `@nuxtjs/google-fonts@3.1.3`, `nuxt-svgo@4.0.0`, `@vueuse/nuxt@10.9.0`, `@nuxt/image@1.3.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-eedaaw\r\n\r\n### Describe the bug\r\n\r\nWhen transitioning between pages the scroll position is reset which is expected. However when passing the transition via the prop to \u003CNuxtPage> this reset takes places before the page is actually changed. Also the visibility 'glitches' in before changing the page.\r\n\r\nAlthough I am quite inexperienced I believe this could be related to https://github.com/nuxt/nuxt/issues/2593\r\n\r\nA workaround for me was to pass the transition in the nuxt config instead. To be able to use js hooks I declared them in the prop without specifying a transition name or type:\r\n```\r\n\u003CNuxtPage :transition=\"{onAfterEnter: () => {console.log('onAfterEnter')},}\"/>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3078,3079],{"name":3024,"color":3025},{"name":3080,"color":3081},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.7619268,{"description":3088,"labels":3089,"number":3091,"owner":3027,"repository":3027,"state":3043,"title":3092,"updated_at":3093,"url":3094,"score":3095},"my layout \r\ndefault.vue\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n topbar\r\n headbar\r\n channel-nav\r\n .container.nuxt-page-wrapper\r\n nuxt\r\n footbar\r\n\u003C/template>\r\n```\r\nand \r\n```\r\nlayout.styl\r\n.nuxt-page-wrapper\r\n min-height 100vh\r\n```\r\nI use scrollToTop in page it's not work\r\n```\r\nexport default {\r\n scrollToTop: true,\r\n mounted () {\r\n window.scrollTo(0, 0)\r\n }\r\n }\r\n\r\n```\r\nand my nuxt.config.js also not work\r\n```\r\nmodule.exports = {\r\n ...\r\n router: {\r\n scrollBehavior: function (to, from, savedPosition) {\r\n return false\r\n }\r\n },\r\n ...\r\n}\r\n```\r\nwhat's going on?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1134\">#c1134\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3090],{"name":3040,"color":3041},1286,"scrollToTop or saveBehavior not work when use 100vh height=100% in layout ","2023-01-18T15:41:01Z","https://github.com/nuxt/nuxt/issues/1286",0.7635077,{"labels":3097,"number":3103,"owner":3027,"repository":3027,"state":3043,"title":3104,"updated_at":3105,"url":3106,"score":3107},[3098,3101,3102],{"name":3099,"color":3100},"stale","ffffff",{"name":3024,"color":3025},{"name":3040,"color":3041},7812,"scrollBehavior didn't work as in example page","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7812",0.7641217,{"description":3109,"labels":3110,"number":3115,"owner":3027,"repository":3058,"state":3043,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Description\n\nI tried to set toast position like [https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3](https://github.com/nuxt/ui/blob/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb/docs/app/app.config.ts#L3).\nBut it didn't work\nHere's my code\n```ts\nexport default defineAppConfig({\n toaster: {\n position: \"top-center\" as const,\n expand: true,\n duration: 5000,\n },\n theme: {\n radius: 0.5,\n },\n ui: {\n colors: {\n primary: \"sky\",\n secondary: \"violet\",\n success: \"green\",\n info: \"blue\",\n warning: \"yellow\",\n error: \"red\",\n neutral: \"slate\",\n },\n },\n})\n```\nb.t.w. theme.radius also not working.",[3111,3114],{"name":3112,"color":3113},"question","d876e3",{"name":3055,"color":3056},4153,"About app.config.ts set toast position and duration","2025-05-15T08:40:30Z","https://github.com/nuxt/ui/issues/4153",0.76971734,{"description":3121,"labels":3122,"number":3124,"owner":3027,"repository":3027,"state":3043,"title":3125,"updated_at":3126,"url":3127,"score":3128},"Does anyone have an issue getting the scroll offset in Safari or iOS devices? \r\nThis works perfectly in Firefox:\r\n\r\n`this.scrollPosition = document.body.scrollTop`\r\n\r\nbut in Safari I'm always getting 0, no matter what. That happens only with Nuxt apps.\r\n\r\nThanks for your help!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2182\">#c2182\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3123],{"name":3040,"color":3041},2512,"document.body.scrollTop always returns 0 in Safari","2023-01-18T15:55:20Z","https://github.com/nuxt/nuxt/issues/2512",0.7698816,{"description":3130,"labels":3131,"number":3132,"owner":3027,"repository":3027,"state":3043,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.7`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `app`, `compatibilityDate`, `devtools`, `site`, `css`, `ssr`, `modules`, `ogImage`, `seoExperiments`, `linkChecker`, `fonts`, `image`, `vite`\n- Runtime Modules: `@nuxt/image@1.10.0`, `@nuxtjs/seo@3.0.3`, `@nuxt/fonts@0.11.2`, `lenis/nuxt@1.3.3`\n- Build Modules: `-`\n\n### Reproduction\n\nFollow the documentation to apply page transitions: https://nuxt.com/docs/getting-started/transitions\n\nAdd this to your nuxt.config.ts file:\n```\nexport default defineNuxtConfig({\n app: {\n pageTransition: { name: 'page', mode: 'out-in' }\n },\n})\n```\nAs well as this to your app.vue:\n```\n\u003Ctemplate>\n \u003CNuxtPage />\n\u003C/template>\n\n\u003Cstyle>\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n\u003C/style>\n```\n\nWhen you switch between pages and you have already scrolled a bit to the bottom you will see the jump between the pages.\n\nThanks to @awfulcode there is already a minimal reproduction for the issue: https://codesandbox.io/p/devbox/festive-cohen-jg4w3d\n\n\n### Describe the bug\n\nAs already mentioned by @awfulcode and others in the Issue https://github.com/nuxt/nuxt/issues/32053 there is a weird bug when using page transitions according to the documentation. There is a problem that the scroll to function is being executed before the page transition finished, results in a jiggy looking page transition since you see the scroll position applied before transition is completed.\n\nI'm currently using a workaround to get around this, but this is not perfect since there is a defined timeout. It would be better if this is properly aligned to the end of the page transition.\n\nI use a app/router.options.ts file to modify the basic scroll behaviour:\n```\nimport type { RouterConfig } from \"@nuxt/schema\";\n\nexport default \u003CRouterConfig>{\n scrollBehavior(to, from, savedPosition) {\n if(savedPosition)\n {\n if(to.path == from.path)\n return savedPosition\n else\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve(savedPosition)\n }, 450)\n })\n }\n else{\n if (to.hash && to.path == from.path) {\n return { el: to.hash }\n }\n else if(to.hash && to.path != from.path) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ el: to.hash })\n }, 450)\n })\n }\n else{\n if(to)\n {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ top:0, left:0 })\n }, 450)\n })\n }\n else\n {\n return { top: 0, left: 0 }\n }\n }\n }\n }\n};\n``` \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[],32193,"Scroll behaviour timing is not properly aligned to page transition duration","2025-06-10T17:17:30Z","https://github.com/nuxt/nuxt/issues/32193",0.77034384,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3w-1yRyl9tZUy8FgLqT70Cv03VeSDzgKjAi-0UXMie8":-1},"/nuxt/ui/2739"]