\n \u003C/template>\n \u003C/UDashboardNavbar>\n \u003C/template>\n \u003C/UDashboardPanel>\n \u003C/UDashboardGroup>\n \u003C/UApp>\n\u003C/template>\n```\n\nIt does not matter what mode I set, there is no smooth transition as shown with the previews on the docs.\nAside from my example, the dashboard-template demo should actually have that smooth \"slideover\" transition, right? I was testing it on multiple PCs/Browser, but it only seems to work on mobile.\n\nDoes someone know what I could be doing wrong, or is this actually only supposed to work for mobile? On the other hand, using a USlideOver directly works perfectly fine and the smooth transition shows properly.",[3220,3223],{"name":3221,"color":3222},"question","d876e3",{"name":3200,"color":3201},5208,"UDashboardSidebar: no \"smooth\" transition when using slideover mode on Desktop","2025-10-10T23:56:19Z","https://github.com/nuxt/ui/issues/5208",0.7707567,{"description":3230,"labels":3231,"number":3236,"owner":3184,"repository":3203,"state":3237,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Description\n\nDuring creation of a flow diagram using vue-flow inside a modal there's an issue with the edge/connectors not lining up correctly and this is due to the transition/animation and to resolve the issue I need to recalculate the flow chart node positions after the transition/animation has ended.\n\nI see there is a after:leave event but would be useful to have a 'after:enter' that fires off after the overlay/modal transitions/animations are finished.\n\nI've tried using @animationed and @transitionend (they don't fire) and also update:open but that fires before the transition is done.\n\n### Additional context\n\nAs a workaround for now I'm listening the the update:open event and then setting a timer to wait for a bit then updating the nodes, which isn't ideal but work. Also turning of transitions on the model works.\n\n```\n\u003Ctemplate>\n \u003CClientOnly>\n \u003CUModal @update:open=\"toggleModelState\">\n \u003CUTooltip text=\"Open Modal.\">\n \u003CUButton icon=\"i-tabler-route-square-2\" color=\"neutral\" variant=\"ghost\" class=\"float-right\" />\n \u003C/UTooltip>\n \u003Ctemplate #body>\n \u003Cdiv class=\"relative w-full h-[75vh]\">\n \u003CVueFlow v-if=\"isModalOpen\" :nodes=\"nodes\" :edges=\"edges\" :nodes-connectable=\"nodesConnectable\" @nodes-initialized=\"layoutGraph\" />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n \u003C/ClientOnly>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, } from 'vue';\nimport { useVueFlow, type Edge, type Node } from '@vue-flow/core'\n\nconst config = useRuntimeConfig();\n\n// Define the props with TypeScript\nconst { treeData } = defineProps\u003C{\n treeData: Array\u003CArray\u003Cnumber>>;\n prefix: string;\n}>();\n\nconst nodesConnectable = ref(false)\nconst isModalOpen = ref(false)\nconst hasParsedPaths = ref(false); // Flag to track if paths have been parsed\n\nconst nodes = ref\u003CNode[]>([]);\nconst edges = ref\u003CEdge[]>([]);\nconst { layout } = useLayout();\nconst { fitView, updateNodeInternals } = useVueFlow();\n\nfunction toggleModelState(event: boolean) {\n if (event === true) {\n // Workaround to fix issue with connectors/edges after transition has finisehd\n //\n setTimeout(() => {\n updateNodeInternals(); // re-calculate node positions\n }, 250);\n }\n isModalOpen.value = event;\n}\n\nasync function layoutGraph(): Promise\u003Cvoid> {\n nodes.value = layout(nodes.value, edges.value);\n await nextTick(() => {\n fitView();\n });\n}\n\u003C/script>\n\n```",[3232,3233,3235],{"name":3194,"color":3195},{"name":3234,"color":3201},"v3",{"name":3197,"color":3198},4149,"closed","Modal Component @after:enter event","2025-05-23T10:39:54Z","https://github.com/nuxt/ui/issues/4149",0.73166955,{"description":3243,"labels":3244,"number":3250,"owner":3184,"repository":3184,"state":3237,"title":3251,"updated_at":3252,"url":3253,"score":3254},"This might already exist and I'm not finding it in the API, or it might be a feature request, not sure. But I have a plan to create some really slick native-esque transitions if there is a way to hook into when a page transition has occurred within pages/layout.vue. Any clues? If not, I can futz around and create something but I want to make sure I'm not yak shaving before I get started. Thank you! You're the greatest ✨\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/c1735\">#c1735\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3245,3247],{"name":3221,"color":3246},"cc317c",{"name":3248,"color":3249},"2.x","d4c5f9",1944,"Hook for when a page transition is occuring, pages/layout.vue","2023-01-18T15:42:54Z","https://github.com/nuxt/nuxt/issues/1944",0.7358999,{"description":3256,"labels":3257,"number":3261,"owner":3184,"repository":3184,"state":3237,"title":3262,"updated_at":3263,"url":3264,"score":3265},"Currently it appears there is only support for page level transitions. There is a workaround suggested [here](https://github.com/nuxt/nuxt.js/issues/108) but as you can see this gives concurrent transitions (ie. `mode` is not respected so enter/leave transitions are triggered at the same time).\r\n\r\nI think [this suggestion](https://github.com/nuxt/nuxt.js/issues/1054#issuecomment-314109892) makes sense. Though it might be best to specify a global setting in `nuxt.config.js` and then allow this setting to be overridden somehow (ie. in the layout component).\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1352\">#c1352\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3258,3260],{"name":3194,"color":3259},"8DEF37",{"name":3248,"color":3249},1519,"Add support for layout transitions","2023-01-18T15:41:52Z","https://github.com/nuxt/nuxt/issues/1519",0.74068725,{"description":3267,"labels":3268,"number":3270,"owner":3184,"repository":3184,"state":3237,"title":3271,"updated_at":3272,"url":3273,"score":3274},"I am trying to trigger the leave transition right when the nuxt-link is clicked but the transition gets triggered only after the asyncData of the next route has finished. Is there anyway I can trigger the transitions before that ? \r\n\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/c1787\">#c1787\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3269],{"name":3248,"color":3249},2012,"Transitions aren't being triggered before asyncData of the next route is finished","2023-01-18T15:42:55Z","https://github.com/nuxt/nuxt/issues/2012",0.7535545,{"labels":3276,"number":3279,"owner":3184,"repository":3184,"state":3237,"title":3280,"updated_at":3281,"url":3282,"score":3283},[3277,3278],{"name":3194,"color":3259},{"name":3248,"color":3249},6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.76074874,{"description":3285,"labels":3286,"number":3290,"owner":3184,"repository":3203,"state":3237,"title":3291,"updated_at":3292,"url":3293,"score":3294},"### Description\n\nCurrently when creating an overlay programmatically with the `create` method on `useOverlay` there is no way to pass event emitters to the component.\n\n### Additional context\n\n_No response_",[3287,3288,3289],{"name":3194,"color":3195},{"name":3234,"color":3201},{"name":3197,"color":3198},3842,"Add ability to pass event emitters to overlays","2025-05-02T19:53:11Z","https://github.com/nuxt/ui/issues/3842",0.7608749,["Reactive",3296],{},["Set"],["ShallowReactive",3299],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZf0kCAPWy6C9uBWQnwo4QRSsDXYOZXB1XJTKS3rwSp0":-1},"/nuxt/ui/1304"]