\r\n \u003C/NuxtLayout>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { gsap } from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\r\n\r\nconst layoutFooterEl = ref(null);\r\n\r\nconst transition = {\r\n mode: 'out-in',\r\n css: false,\r\n onLeave: (el, done) => {\r\n console.log('leave');\r\n\r\n gsap.to([el, layoutFooterEl.value], {\r\n opacity: 0,\r\n ease: 'none',\r\n duration: 0.3,\r\n onComplete: () => {\r\n console.log('leave complete');\r\n done();\r\n },\r\n });\r\n },\r\n onAfterLeave: () => {\r\n console.log('after leave');\r\n },\r\n onBeforeEnter: (el) => {\r\n console.log('before enter');\r\n\r\n gsap.set([el, layoutFooterEl.value], { opacity: 0, lazy: false });\r\n },\r\n onEnter: (el, done) => {\r\n console.log('enter');\r\n gsap.set([el, layoutFooterEl.value], { opacity: 0 });\r\n viewport.onResize();\r\n ScrollTrigger.refresh();\r\n\r\n lenis.value.scrollTo(0, { immediate: true });\r\n\r\n gsap.to([el, layoutFooterEl.value], {\r\n lazy: false,\r\n opacity: 1,\r\n ease: 'none',\r\n duration: 0.7,\r\n onComplete: done,\r\n });\r\n },\r\n};\r\n\r\n\u003C/script>\r\n```\r\n\r\n### Describe the bug\r\n\r\nOn page transitions, the `onMounted()` hook is called before the page enter. Here is the lifecycle I have on the page transition:\r\n\r\n```\r\napp.vue:29 leave\r\npage-2.vue:51 mounted\r\napp.vue:34 leave complete\r\napp.vue:44 before enter\r\napp.vue:41 after leave\r\napp.vue:48 enter\r\n```\r\n\r\nUPDATE: Also, the `onUnmounted` hook is called before the page finished the transition\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2932,2935],{"name":2933,"color":2934},"3.x","29bc7f",{"name":2936,"color":2937},"pending triage","E99695",15793,"nuxt","closed","Page transitions bad lifecycle ?","2023-06-06T15:57:02Z","https://github.com/nuxt/nuxt/issues/15793",0.6126292,{"description":2946,"labels":2947,"number":2955,"owner":2939,"repository":2939,"state":2940,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.12.0\r\n- Nuxt Version: 3.6.0\r\n- Nitro Version: 2.5.1\r\n- Package Manager: npm@8.1.0\r\n- Builder: vite\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\n[StackBlitz Link](https://stackblitz.com/edit/github-3c35yj?file=pages%2Findex.vue)\r\nand\r\n[Github Link](https://github.com/Etidou/Nuxt-Transition.git)\r\n\r\n### Describe the bug\r\n\r\nHello, \r\n\r\nI got an error with the nuxt page transition and the javascript Hooks, I have the exact same code that in the doc here : https://nuxt.com/docs/getting-started/transitions#javascript-hooks\r\n\r\nI don't really know what I'm doing wrong, if anyone does I'd love to know.\r\n\r\nI've tried with console.log in every event and also without console.log but in neither case does it work.\r\n\r\nThe error seems to be related to Javascript Hooks because with :\r\n```\r\nexport default defineNuxtConfig({\r\n app: {\r\n pageTransition: { name: 'page', mode: 'out-in' }\r\n },\r\n})\r\n```\r\nit works perfectly but not with the javascript\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Unhandled error during execution of transition hook \r\n\r\nUncaught ReferenceError: oo_oo is not defined\r\n NuxtJS 50\r\n```\r\n",[2948,2951,2954],{"name":2949,"color":2950},"documentation","5319e7",{"name":2952,"color":2953},"good first issue","fbca04",{"name":2933,"color":2934},21727,"Javascript Hooks Page Transition on Nuxt 3 does not work","2023-06-24T16:32:39Z","https://github.com/nuxt/nuxt/issues/21727",0.61978704,{"description":2961,"labels":2962,"number":2965,"owner":2939,"repository":2939,"state":2940,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.10.0`\r\n- Builder: `vite`\r\n- User Config: `app`, `modules`, `css`, `colorMode`\r\n- Runtime Modules: `@nuxt/content@2.3.0`, `@nuxtjs/tailwindcss@6.2.0`, `@nuxtjs/color-mode@3.2.0`, `@morev/vue-transitions/nuxt@2.3.5`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n1. Implement some page transition\r\n2. Apply transition in `out-in` mode\r\n3. Run transition by changing page\r\n4. Change page another time until transition leave active stage is ended\r\n5. Page is broken\r\n\r\nRecreated on StackBlitz: https://stackblitz.com/edit/github-4ngexz?file=app.vue\n\n### Describe the bug\n\nContent of pages is completely disappeared. The only way to fix it is to refresh the page.\r\n\r\nAs I see, Nuxt is not able to create page content in transition enter active stage, because leave active stage was not completed correctly. \n\n### Additional context\n\nI was able to implement a workaround: block any links in `NuxtLink` components for the time transition is active.\n\n### Logs\n\n```shell\nYou can find similar logs in browser console (not in server console):\r\n\r\n\r\nUncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.\r\n at insert (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:7329:12)\r\n at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:5938:9)\r\n at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:5911:7)\r\n at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:5911:7)\r\n at activeBranch.transition.afterLeave (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:2326:15)\r\n at performRemove (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:6025:20)\r\n at el._leaveCb (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:2977:9)\r\n at finishLeave (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:7970:13)\r\n at resolve2 (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:8001:30)\r\n at whenTransitionEnds (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-QO6ZHO7P.js?v=e9f66680:8086:12)\r\n```\n```\n",[2963,2964],{"name":2933,"color":2934},{"name":2936,"color":2937},15588,"Fast page transition breaks pages content","2023-01-19T18:34:57Z","https://github.com/nuxt/nuxt/issues/15588",0.62558335,{"description":2971,"labels":2972,"number":2981,"owner":2939,"repository":2939,"state":2940,"title":2982,"updated_at":2983,"url":2984,"score":2985},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.7.1`\r\n- CLI Version: `3.8.3`\r\n- Nitro Version: `2.6.3`\r\n- Package Manager: `pnpm@8.7.5`\r\n- Builder: `-`\r\n- User Config: `extends`, `app`, `spaLoadingTemplate`, `runtimeConfig`, `modules`, `vueuse`, `i18n`, `ssr`, `vue`, `nitro`, `vite`, `build`, `typescript`, `devtools`\r\n- Runtime Modules: `@pinia/nuxt@0.4.11`, `@nuxtjs/i18n@8.0.0-beta.10`, `@vueuse/nuxt@10.4.1`, `@unocss/nuxt@0.55.7`, `@nuxtjs/fontaine@0.4.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nusing nuxt config\r\n```\r\napp: { pageTransition: { name: 'fade', mode: 'out-in' }, }\r\n```\n\n### Describe the bug\n\nWhen page transition is enabled on nuxt 3.7.1 it leaves the previous page and adds new page at the bottom and initial it renders two page top one is the actual page but buttom one stucks at loading \r\n\r\n[Here you can try the deployment with pageTransition](http://app-v2-bmih98l5k-hubble-excahnge.vercel.app)\r\n\r\n[Here you can try the deployment with pageTransition false](http://app-v2-a81c5iagp-hubble-excahnge.vercel.app)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2973,2974,2975,2978],{"name":2933,"color":2934},{"name":2936,"color":2937},{"name":2976,"color":2977},"needs reproduction","FBCA04",{"name":2979,"color":2980},"closed-by-bot","ededed",23141,"3.7.1 pageTransition breaks","2023-09-20T01:47:41Z","https://github.com/nuxt/nuxt/issues/23141",0.63991547,{"description":2987,"labels":2988,"number":2990,"owner":2939,"repository":2939,"state":2940,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v22.3.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: yarn@1.22.22\r\n- Builder: -\r\n- User Config: devtools, app, runtimeConfig, css, modules, eslint, i18n, primevue, image, nuxt-jsonld, mapbox, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.4.0, @nuxtjs/tailwindcss@6.12.1, @nuxtjs/i18n@8.3.3, @primevue/nuxt-module@4.0.3, @nuxt/image@1.7.0, @nuxtjs/strapi@1.12.0, nuxt-icons@3.2.1, @pinia/nuxt@0.5.2, nuxt-jsonld@2.0.8, nuxt-mapbox@1.6.0\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-csufwc?file=app.vue,pages%2Findex.vue,nuxt.config.ts\n\n### Describe the bug\n\nWhen nuxt-mapbox is not included within the modules in the nuxt.config.ts file, everything works normally, the onMounted hook is triggered every time I land on the page (or when a component is mounted). But, when I include it in the modules, the onMounted hook is only triggered the first time (it almost seems to be cached).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2989],{"name":2936,"color":2937},28364,"onMounted lifecycle Hook is broken by the library","2024-07-31T18:42:20Z","https://github.com/nuxt/nuxt/issues/28364",0.6466012,{"description":2996,"labels":2997,"number":2999,"owner":2939,"repository":2939,"state":2940,"title":3000,"updated_at":3001,"url":3002,"score":3003},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\r\n- Nuxt Version: `3.12.4`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `pnpm@9.4.0`\r\n- Builder: `-`\r\n- User Config: `app`, `devtools`, `css`, `components`, `modules`, `pinia`, `build`, `runtimeConfig`, `compatibilityDate`\r\n- Runtime Modules: `@pinia/nuxt@0.5.2`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-fjpcza?file=pages%2Fabout.vue,pages%2Findex.vue,layouts%2Fdefault.vue\n\n### Describe the bug\n\nWhen I use a javascript hook to trigger my transition page, before triggering the output transition, the page instantly scrolls upwards.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nNo logs\n```\n",[2998],{"name":2936,"color":2937},28418,"Page Transition with javascript hooks not working properly","2024-09-21T17:15:44Z","https://github.com/nuxt/nuxt/issues/28418",0.646962,{"labels":3005,"number":3015,"owner":2939,"repository":2939,"state":2940,"title":3016,"updated_at":3017,"url":3018,"score":3019},[3006,3007,3010,3013],{"name":2933,"color":2934},{"name":3008,"color":3009},"bug","d73a4a",{"name":3011,"color":3012},"upstream","E8A36D",{"name":3014,"color":2977},"🔨 p3-minor",14438,"Title breaking during page transitions","2023-01-19T17:49:38Z","https://github.com/nuxt/nuxt/issues/14438",0.6509744,{"description":3021,"labels":3022,"number":3027,"owner":2939,"repository":2939,"state":2940,"title":3028,"updated_at":3029,"url":3030,"score":3031},"### 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_",[3023,3024],{"name":2936,"color":2937},{"name":3025,"color":3026},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.6511744,{"description":3033,"labels":3034,"number":3037,"owner":2939,"repository":2939,"state":2940,"title":3038,"updated_at":3039,"url":3040,"score":3041},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-qjv6tr-vvemyr?file=app.vue\n\n### Describe the bug\n\nHi! 💚\r\nI'd tried to use page transition with a vue3 component library that has an anchor tag as a link but it seems not working.\r\nPage transition works only with NuxtLink, the anchor tag does not trigger page transition.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3035,3036],{"name":2933,"color":2934},{"name":2936,"color":2937},22112,"Page transition not working with anchor tag","2023-07-17T08:26:30Z","https://github.com/nuxt/nuxt/issues/22112",0.6544307,{"description":3043,"labels":3044,"number":3052,"owner":2939,"repository":3053,"state":2940,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: modules, devtools, supabase, runtimeConfig, security, css, uiPro, routeRules, future, compatibilityDate, nitro, content, eslint\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.3, @nuxt/content@3.6.0, @vueuse/nuxt@13.4.0, nuxt-og-image@5.1.7, @nuxtjs/supabase@1.5.2, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Steps to Reproduce:\n1. Load the StackBlitz demo: https://stackblitz.com/edit/nuxtui-carousel-fade-bug\n2. Click the tabs on the carousel - notice the smooth fade transitions ✅\n3. Navigate to \"Page 2\" using the button\n4. Try clicking tabs on either page - fade transitions no longer work ❌\n5. The carousel now uses slide animations instead of fade\n\n### Description\n\nI noticed that when using page transitions, the `fade` property of the `\u003CUCarousel>` component stops working after navigating between pages. The carousel reverts to slide animations instead of fade transitions. Removing the page transitions restores correct functionality.\n\nI looked into it with the help of Claude and found the bug was caused by VueUse's computedAsync failing during page transitions in Nuxt. I will open a PR to fix this issue!\n\n### Additional context\n\n## Expected Behavior:\nCarousel fade transitions should continue working after page navigation with transitions.\n\n## Actual Behavior:\nCarousel fade transitions stop working and revert to slide animations after navigating between pages that have `pageTransition` configured.\n\n## Workaround:\nRemoving `pageTransition` from `definePageMeta()` restores fade functionality even after navigation.\n\n\n### Logs\n\n```shell-script\n\n```",[3045,3046,3049],{"name":3008,"color":3009},{"name":3047,"color":3048},"v3","49DCB8",{"name":3050,"color":3051},"triage","ffffff",4379,"ui","UCarousel fade transitions break after page navigation with pageTransition","2025-06-30T12:55:09Z","https://github.com/nuxt/ui/issues/4379",0.6551167,["Reactive",3059],{},["Set"],["ShallowReactive",3062],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFo1FR7OKllFZu4wJgSeWopNeUb0iQo6k3gIvLIe20Rc":-1},"/nuxt/nuxt/26743"]