\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```",[3019,3022,3025],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",4149,"nuxt","ui","closed","Modal Component @after:enter event","2025-05-23T10:39:54Z","https://github.com/nuxt/ui/issues/4149",0.73166955,{"description":3037,"labels":3038,"number":3045,"owner":3029,"repository":3029,"state":3031,"title":3046,"updated_at":3047,"url":3048,"score":3049},"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>",[3039,3042],{"name":3040,"color":3041},"question","cc317c",{"name":3043,"color":3044},"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":3051,"labels":3052,"number":3056,"owner":3029,"repository":3029,"state":3031,"title":3057,"updated_at":3058,"url":3059,"score":3060},"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>",[3053,3055],{"name":3020,"color":3054},"8DEF37",{"name":3043,"color":3044},1519,"Add support for layout transitions","2023-01-18T15:41:52Z","https://github.com/nuxt/nuxt/issues/1519",0.74068725,{"description":3062,"labels":3063,"number":3065,"owner":3029,"repository":3029,"state":3031,"title":3066,"updated_at":3067,"url":3068,"score":3069},"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>",[3064],{"name":3043,"color":3044},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":3071,"number":3074,"owner":3029,"repository":3029,"state":3031,"title":3075,"updated_at":3076,"url":3077,"score":3078},[3072,3073],{"name":3020,"color":3054},{"name":3043,"color":3044},6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.76074874,{"description":3080,"labels":3081,"number":3085,"owner":3029,"repository":3030,"state":3031,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### 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_",[3082,3083,3084],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3842,"Add ability to pass event emitters to overlays","2025-05-02T19:53:11Z","https://github.com/nuxt/ui/issues/3842",0.7608749,{"description":3091,"labels":3092,"number":1220,"owner":3029,"repository":3029,"state":3031,"title":3095,"updated_at":3096,"url":3097,"score":3098},"If you have multiple layouts for different routes, moving to a route with a different layout causes the route transition to stop working. \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/c86\">#c86\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3093,3094],{"name":3040,"color":3041},{"name":3043,"color":3044},"route transition stops working when switching layout","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/108",0.76409805,{"description":3100,"labels":3101,"number":3108,"owner":3029,"repository":3109,"state":3031,"title":3110,"updated_at":3111,"url":3112,"score":3113},"at the moment redeploys on cloud providers with `experimental.buildCache` result in font files not being included in published site\r\n\r\n",[3102,3105],{"name":3103,"color":3104},"bug","d73a4a",{"name":3106,"color":3107},"good first issue","7057ff",266,"fonts","support for nuxt `experimental.buildCache`","2024-09-23T14:18:03Z","https://github.com/nuxt/fonts/issues/266",0.7642626,{"description":3115,"labels":3116,"number":3118,"owner":3029,"repository":3029,"state":3031,"title":3119,"updated_at":3120,"url":3121,"score":3122},"Hi, \r\n\r\nI am trying to use transition effect along with custom layout. Looks like transition does not work if layout is not default. Reproducer: [link](https://glitch.com/edit/#!/nuxt-layout-transitions) \r\nIs this expected? If yes, how can I have transition on page that uses custom layout?\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/c1382\">#c1382\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3117],{"name":3043,"color":3044},1549,"Transition doesn't work if using layout other then default","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1549",0.7673513,{"description":3124,"labels":3125,"number":3132,"owner":3029,"repository":3029,"state":3031,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, vite\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-s3ebia?file=app.vue,components%2FFullscreenBackground.vue\r\n\r\n### Describe the bug\r\n\r\nI was making a background for a modal component when I noticed a strange behaviour with the `\u003CTransition />` component, specifically when the `appear` prop is set.\r\n\r\nIt seems that the click event listener on an element inside `\u003CTransition appear>` isn't being properly handled.\r\nSteps to reproduce:\r\n1. open the reproduction\r\n2. click on the semi-transparent fullscreen div\r\n3. *nothing happens* even though it should have set its visibility to `false`\r\n\r\n1. remove `appear` from the `\u003CTransition>` component in `FullscreenBackground.vue`\r\n2. repeat the same steps & now the click is properly handled\r\n\r\n### Additional context\r\n\r\nI've tried and I couldn't reproduce the same issue in Vue, so I assume it could be a bug in Nuxt.\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3126,3129],{"name":3127,"color":3128},"3.x","29bc7f",{"name":3130,"color":3131},"pending triage","E99695",24754,"`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.7689207,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZf0kCAPWy6C9uBWQnwo4QRSsDXYOZXB1XJTKS3rwSp0":-1},"/nuxt/ui/1304"]