[{"data":1,"prerenderedAt":2658},["ShallowReactive",2],{"page-\u002Fvue\u002F16-teleport-and-suspense":3},{"id":4,"title":5,"body":6,"description":2651,"extension":2652,"meta":2653,"navigation":75,"path":2654,"seo":2655,"stem":2656,"__hash__":2657},"content\u002Fvue\u002F16-teleport-and-suspense.md","Vue 3 Engineering Reference — Teleport & Suspense",{"type":7,"value":8,"toc":2640},"minimark",[9,14,19,1679,1683,2024,2028,2129,2133,2251,2255,2266,2440,2636],[10,11,13],"h1",{"id":12},"_16-teleport-suspense","16 — Teleport & Suspense",[15,16,18],"h2",{"id":17},"teleport-render-outside-the-component-tree","Teleport — Render Outside the Component Tree",[20,21,24,490,495,624,628,877,881],"code-wrapper",{"filename":22,"language":23},"Modal.vue","vue",[25,26,30],"pre",{"className":27,"code":28,"language":23,"meta":29,"style":29},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst props = defineProps\u003C{\n  modelValue: boolean\n  teleportTo?: string  \u002F\u002F configurable target, defaults to body\n}>()\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst target = computed(() => props.teleportTo ?? 'body')\nconst isOpen = computed({\n  get: () => props.modelValue,\n  set: (v) => emit('update:modelValue', v),\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- ── Teleport: renders the content at the target element ── -->\n  \u003C!-- The component's logic stays in the parent, but the DOM is moved. -->\n  \u003C!-- Critical for: modals, tooltips, dropdowns, notifications. -->\n  \u003C!-- Avoids: z-index stacking context issues, parent overflow clipping. -->\n  \u003CTeleport :to=\"target\" :disabled=\"!isOpen\">\n    \u003C!-- ── disabled: when true, content renders in-place (not teleported) ── -->\n    \u003C!-- Useful for SSR (no document.body on server) or conditional teleporting -->\n    \u003Cdiv v-if=\"isOpen\" class=\"modal-overlay\" @click.self=\"isOpen = false\">\n      \u003Cdiv class=\"modal-content\">\n        \u003Cslot \u002F>\n        \u003Cbutton @click=\"isOpen = false\">Close\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n","",[31,32,33,53,70,77,96,109,125,131,136,158,163,194,209,223,250,256,266,271,281,287,293,299,305,350,356,362,397,414,429,451,461,471,481],"code",{"__ignoreMap":29},[34,35,38,42,46,50],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"ssxIu","\u003C",[34,43,45],{"class":44},"sk71V","script",[34,47,49],{"class":48},"sIsaT"," setup",[34,51,52],{"class":40},">\n",[34,54,56,60,63,66],{"class":36,"line":55},2,[34,57,59],{"class":58},"svdQ7","import",[34,61,62],{"class":40}," { ref, computed } ",[34,64,65],{"class":58},"from",[34,67,69],{"class":68},"sJ6F3"," 'vue'\n",[34,71,73],{"class":36,"line":72},3,[34,74,76],{"emptyLinePlaceholder":75},true,"\n",[34,78,80,83,87,90,93],{"class":36,"line":79},4,[34,81,82],{"class":58},"const",[34,84,86],{"class":85},"snvgF"," props",[34,88,89],{"class":58}," =",[34,91,92],{"class":48}," defineProps",[34,94,95],{"class":40},"\u003C{\n",[34,97,99,103,106],{"class":36,"line":98},5,[34,100,102],{"class":101},"sCrzJ","  modelValue",[34,104,105],{"class":58},":",[34,107,108],{"class":85}," boolean\n",[34,110,112,115,118,121],{"class":36,"line":111},6,[34,113,114],{"class":101},"  teleportTo",[34,116,117],{"class":58},"?:",[34,119,120],{"class":85}," string",[34,122,124],{"class":123},"sdCPZ","  \u002F\u002F configurable target, defaults to body\n",[34,126,128],{"class":36,"line":127},7,[34,129,130],{"class":40},"}>()\n",[34,132,134],{"class":36,"line":133},8,[34,135,76],{"emptyLinePlaceholder":75},[34,137,139,141,144,146,149,152,155],{"class":36,"line":138},9,[34,140,82],{"class":58},[34,142,143],{"class":85}," emit",[34,145,89],{"class":58},[34,147,148],{"class":48}," defineEmits",[34,150,151],{"class":40},"([",[34,153,154],{"class":68},"'update:modelValue'",[34,156,157],{"class":40},"])\n",[34,159,161],{"class":36,"line":160},10,[34,162,76],{"emptyLinePlaceholder":75},[34,164,166,168,171,173,176,179,182,185,188,191],{"class":36,"line":165},11,[34,167,82],{"class":58},[34,169,170],{"class":85}," target",[34,172,89],{"class":58},[34,174,175],{"class":48}," computed",[34,177,178],{"class":40},"(() ",[34,180,181],{"class":58},"=>",[34,183,184],{"class":40}," props.teleportTo ",[34,186,187],{"class":58},"??",[34,189,190],{"class":68}," 'body'",[34,192,193],{"class":40},")\n",[34,195,197,199,202,204,206],{"class":36,"line":196},12,[34,198,82],{"class":58},[34,200,201],{"class":85}," isOpen",[34,203,89],{"class":58},[34,205,175],{"class":48},[34,207,208],{"class":40},"({\n",[34,210,212,215,218,220],{"class":36,"line":211},13,[34,213,214],{"class":48},"  get",[34,216,217],{"class":40},": () ",[34,219,181],{"class":58},[34,221,222],{"class":40}," props.modelValue,\n",[34,224,226,229,232,235,238,240,242,245,247],{"class":36,"line":225},14,[34,227,228],{"class":48},"  set",[34,230,231],{"class":40},": (",[34,233,234],{"class":101},"v",[34,236,237],{"class":40},") ",[34,239,181],{"class":58},[34,241,143],{"class":48},[34,243,244],{"class":40},"(",[34,246,154],{"class":68},[34,248,249],{"class":40},", v),\n",[34,251,253],{"class":36,"line":252},15,[34,254,255],{"class":40},"})\n",[34,257,259,262,264],{"class":36,"line":258},16,[34,260,261],{"class":40},"\u003C\u002F",[34,263,45],{"class":44},[34,265,52],{"class":40},[34,267,269],{"class":36,"line":268},17,[34,270,76],{"emptyLinePlaceholder":75},[34,272,274,276,279],{"class":36,"line":273},18,[34,275,41],{"class":40},[34,277,278],{"class":44},"template",[34,280,52],{"class":40},[34,282,284],{"class":36,"line":283},19,[34,285,286],{"class":123},"  \u003C!-- ── Teleport: renders the content at the target element ── -->\n",[34,288,290],{"class":36,"line":289},20,[34,291,292],{"class":123},"  \u003C!-- The component's logic stays in the parent, but the DOM is moved. -->\n",[34,294,296],{"class":36,"line":295},21,[34,297,298],{"class":123},"  \u003C!-- Critical for: modals, tooltips, dropdowns, notifications. -->\n",[34,300,302],{"class":36,"line":301},22,[34,303,304],{"class":123},"  \u003C!-- Avoids: z-index stacking context issues, parent overflow clipping. -->\n",[34,306,308,311,314,317,320,323,326,329,331,333,336,338,340,343,346,348],{"class":36,"line":307},23,[34,309,310],{"class":40},"  \u003C",[34,312,313],{"class":44},"Teleport",[34,315,316],{"class":40}," :",[34,318,319],{"class":48},"to",[34,321,322],{"class":40},"=",[34,324,325],{"class":68},"\"",[34,327,328],{"class":40},"target",[34,330,325],{"class":68},[34,332,316],{"class":40},[34,334,335],{"class":48},"disabled",[34,337,322],{"class":40},[34,339,325],{"class":68},[34,341,342],{"class":58},"!",[34,344,345],{"class":40},"isOpen",[34,347,325],{"class":68},[34,349,52],{"class":40},[34,351,353],{"class":36,"line":352},24,[34,354,355],{"class":123},"    \u003C!-- ── disabled: when true, content renders in-place (not teleported) ── -->\n",[34,357,359],{"class":36,"line":358},25,[34,360,361],{"class":123},"    \u003C!-- Useful for SSR (no document.body on server) or conditional teleporting -->\n",[34,363,365,368,371,374,376,379,382,384,387,390,392,395],{"class":36,"line":364},26,[34,366,367],{"class":40},"    \u003C",[34,369,370],{"class":44},"div",[34,372,373],{"class":48}," v-if",[34,375,322],{"class":40},[34,377,378],{"class":68},"\"isOpen\"",[34,380,381],{"class":48}," class",[34,383,322],{"class":40},[34,385,386],{"class":68},"\"modal-overlay\"",[34,388,389],{"class":48}," @click.self",[34,391,322],{"class":40},[34,393,394],{"class":68},"\"isOpen = false\"",[34,396,52],{"class":40},[34,398,400,403,405,407,409,412],{"class":36,"line":399},27,[34,401,402],{"class":40},"      \u003C",[34,404,370],{"class":44},[34,406,381],{"class":48},[34,408,322],{"class":40},[34,410,411],{"class":68},"\"modal-content\"",[34,413,52],{"class":40},[34,415,417,420,423,427],{"class":36,"line":416},28,[34,418,419],{"class":40},"        \u003C",[34,421,422],{"class":44},"slot",[34,424,426],{"class":425},"sMKGj"," \u002F",[34,428,52],{"class":40},[34,430,432,434,437,440,442,444,447,449],{"class":36,"line":431},29,[34,433,419],{"class":40},[34,435,436],{"class":44},"button",[34,438,439],{"class":48}," @click",[34,441,322],{"class":40},[34,443,394],{"class":68},[34,445,446],{"class":40},">Close\u003C\u002F",[34,448,436],{"class":44},[34,450,52],{"class":40},[34,452,454,457,459],{"class":36,"line":453},30,[34,455,456],{"class":40},"      \u003C\u002F",[34,458,370],{"class":44},[34,460,52],{"class":40},[34,462,464,467,469],{"class":36,"line":463},31,[34,465,466],{"class":40},"    \u003C\u002F",[34,468,370],{"class":44},[34,470,52],{"class":40},[34,472,474,477,479],{"class":36,"line":473},32,[34,475,476],{"class":40},"  \u003C\u002F",[34,478,313],{"class":44},[34,480,52],{"class":40},[34,482,484,486,488],{"class":36,"line":483},33,[34,485,261],{"class":40},[34,487,278],{"class":44},[34,489,52],{"class":40},[491,492,494],"h3",{"id":493},"why-teleport-exists-stacking-context-problem","Why Teleport Exists — Stacking Context Problem",[20,496,499],{"filename":497,"language":498},"stacking-context.css","css",[25,500,503],{"className":501,"code":502,"language":498,"meta":29,"style":29},"language-css shiki shiki-themes github-light github-dark","\u002F* ── Without Teleport, a modal inside a parent with overflow:hidden ── *\u002F\n\u002F* or a transformed ancestor (creates stacking context) gets CLIPPED. *\u002F\n.parent-with-overflow {\n  overflow: hidden;  \u002F* clips any child that extends beyond bounds *\u002F\n  transform: translateZ(0);  \u002F* creates a new stacking context *\u002F\n}\n\n\u002F* .modal inside .parent-with-overflow:\n   - z-index: 9999 is ignored (stacking context limits it to parent's context)\n   - overflow: hidden clips the modal backdrop\n   - The modal appears cut off or behind other elements outside the parent *\u002F\n\n\u002F* With Teleport to=\"body\":\n   - Modal is a direct child of \u003Cbody>, no parent stacking context\n   - z-index works globally\n   - No overflow clipping\n   - The modal renders above everything, regardless of where the component\n     that opens it sits in the component tree. *\u002F\n",[31,504,505,510,515,523,540,561,566,570,575,580,585,590,594,599,604,609,614,619],{"__ignoreMap":29},[34,506,507],{"class":36,"line":37},[34,508,509],{"class":123},"\u002F* ── Without Teleport, a modal inside a parent with overflow:hidden ── *\u002F\n",[34,511,512],{"class":36,"line":55},[34,513,514],{"class":123},"\u002F* or a transformed ancestor (creates stacking context) gets CLIPPED. *\u002F\n",[34,516,517,520],{"class":36,"line":72},[34,518,519],{"class":48},".parent-with-overflow",[34,521,522],{"class":40}," {\n",[34,524,525,528,531,534,537],{"class":36,"line":79},[34,526,527],{"class":85},"  overflow",[34,529,530],{"class":40},": ",[34,532,533],{"class":85},"hidden",[34,535,536],{"class":40},";  ",[34,538,539],{"class":123},"\u002F* clips any child that extends beyond bounds *\u002F\n",[34,541,542,545,547,550,552,555,558],{"class":36,"line":98},[34,543,544],{"class":85},"  transform",[34,546,530],{"class":40},[34,548,549],{"class":85},"translateZ",[34,551,244],{"class":40},[34,553,554],{"class":85},"0",[34,556,557],{"class":40},");  ",[34,559,560],{"class":123},"\u002F* creates a new stacking context *\u002F\n",[34,562,563],{"class":36,"line":111},[34,564,565],{"class":40},"}\n",[34,567,568],{"class":36,"line":127},[34,569,76],{"emptyLinePlaceholder":75},[34,571,572],{"class":36,"line":133},[34,573,574],{"class":123},"\u002F* .modal inside .parent-with-overflow:\n",[34,576,577],{"class":36,"line":138},[34,578,579],{"class":123},"   - z-index: 9999 is ignored (stacking context limits it to parent's context)\n",[34,581,582],{"class":36,"line":160},[34,583,584],{"class":123},"   - overflow: hidden clips the modal backdrop\n",[34,586,587],{"class":36,"line":165},[34,588,589],{"class":123},"   - The modal appears cut off or behind other elements outside the parent *\u002F\n",[34,591,592],{"class":36,"line":196},[34,593,76],{"emptyLinePlaceholder":75},[34,595,596],{"class":36,"line":211},[34,597,598],{"class":123},"\u002F* With Teleport to=\"body\":\n",[34,600,601],{"class":36,"line":225},[34,602,603],{"class":123},"   - Modal is a direct child of \u003Cbody>, no parent stacking context\n",[34,605,606],{"class":36,"line":252},[34,607,608],{"class":123},"   - z-index works globally\n",[34,610,611],{"class":36,"line":258},[34,612,613],{"class":123},"   - No overflow clipping\n",[34,615,616],{"class":36,"line":268},[34,617,618],{"class":123},"   - The modal renders above everything, regardless of where the component\n",[34,620,621],{"class":36,"line":273},[34,622,623],{"class":123},"     that opens it sits in the component tree. *\u002F\n",[15,625,627],{"id":626},"teleport-with-multiple-targets-dynamic-target","Teleport with Multiple Targets — Dynamic Target",[20,629,631],{"filename":630,"language":23},"DropdownMenu.vue",[25,632,634],{"className":27,"code":633,"language":23,"meta":29,"style":29},"\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\n\u002F\u002F ── Dynamic target: teleport to a ref'd container ──\n\u002F\u002F Useful for: app-specific containers (sidebars, drawer areas).\nconst customContainer = ref\u003CHTMLElement | null>(null)\n\nonMounted(() => {\n  \u002F\u002F Find or create a container element to teleport into\n  customContainer.value = document.getElementById('dropdown-container')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTeleport :to=\"customContainer\" :disabled=\"!customContainer\">\n    \u003Cdiv class=\"dropdown-menu\">\n      \u003Cslot name=\"items\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\n  \u003C!-- ── Teleport to a CSS selector string ── -->\n  \u003C!-- \u003CTeleport to=\"#modal-portal\"> → finds element with id=\"modal-portal\" -->\n  \u003C!-- The target MUST exist in the DOM before the Teleport mounts -->\n\u003C\u002Ftemplate>\n",[31,635,636,646,657,661,666,671,702,706,717,722,742,746,754,758,766,801,816,834,842,850,854,859,864,869],{"__ignoreMap":29},[34,637,638,640,642,644],{"class":36,"line":37},[34,639,41],{"class":40},[34,641,45],{"class":44},[34,643,49],{"class":48},[34,645,52],{"class":40},[34,647,648,650,653,655],{"class":36,"line":55},[34,649,59],{"class":58},[34,651,652],{"class":40}," { ref, onMounted } ",[34,654,65],{"class":58},[34,656,69],{"class":68},[34,658,659],{"class":36,"line":72},[34,660,76],{"emptyLinePlaceholder":75},[34,662,663],{"class":36,"line":79},[34,664,665],{"class":123},"\u002F\u002F ── Dynamic target: teleport to a ref'd container ──\n",[34,667,668],{"class":36,"line":98},[34,669,670],{"class":123},"\u002F\u002F Useful for: app-specific containers (sidebars, drawer areas).\n",[34,672,673,675,678,680,683,685,688,691,694,697,700],{"class":36,"line":111},[34,674,82],{"class":58},[34,676,677],{"class":85}," customContainer",[34,679,89],{"class":58},[34,681,682],{"class":48}," ref",[34,684,41],{"class":40},[34,686,687],{"class":48},"HTMLElement",[34,689,690],{"class":58}," |",[34,692,693],{"class":85}," null",[34,695,696],{"class":40},">(",[34,698,699],{"class":85},"null",[34,701,193],{"class":40},[34,703,704],{"class":36,"line":127},[34,705,76],{"emptyLinePlaceholder":75},[34,707,708,711,713,715],{"class":36,"line":133},[34,709,710],{"class":48},"onMounted",[34,712,178],{"class":40},[34,714,181],{"class":58},[34,716,522],{"class":40},[34,718,719],{"class":36,"line":138},[34,720,721],{"class":123},"  \u002F\u002F Find or create a container element to teleport into\n",[34,723,724,727,729,732,735,737,740],{"class":36,"line":160},[34,725,726],{"class":40},"  customContainer.value ",[34,728,322],{"class":58},[34,730,731],{"class":40}," document.",[34,733,734],{"class":48},"getElementById",[34,736,244],{"class":40},[34,738,739],{"class":68},"'dropdown-container'",[34,741,193],{"class":40},[34,743,744],{"class":36,"line":165},[34,745,255],{"class":40},[34,747,748,750,752],{"class":36,"line":196},[34,749,261],{"class":40},[34,751,45],{"class":44},[34,753,52],{"class":40},[34,755,756],{"class":36,"line":211},[34,757,76],{"emptyLinePlaceholder":75},[34,759,760,762,764],{"class":36,"line":225},[34,761,41],{"class":40},[34,763,278],{"class":44},[34,765,52],{"class":40},[34,767,768,770,772,774,776,778,780,783,785,787,789,791,793,795,797,799],{"class":36,"line":252},[34,769,310],{"class":40},[34,771,313],{"class":44},[34,773,316],{"class":40},[34,775,319],{"class":48},[34,777,322],{"class":40},[34,779,325],{"class":68},[34,781,782],{"class":40},"customContainer",[34,784,325],{"class":68},[34,786,316],{"class":40},[34,788,335],{"class":48},[34,790,322],{"class":40},[34,792,325],{"class":68},[34,794,342],{"class":58},[34,796,782],{"class":40},[34,798,325],{"class":68},[34,800,52],{"class":40},[34,802,803,805,807,809,811,814],{"class":36,"line":258},[34,804,367],{"class":40},[34,806,370],{"class":44},[34,808,381],{"class":48},[34,810,322],{"class":40},[34,812,813],{"class":68},"\"dropdown-menu\"",[34,815,52],{"class":40},[34,817,818,820,822,825,827,830,832],{"class":36,"line":268},[34,819,402],{"class":40},[34,821,422],{"class":44},[34,823,824],{"class":48}," name",[34,826,322],{"class":40},[34,828,829],{"class":68},"\"items\"",[34,831,426],{"class":425},[34,833,52],{"class":40},[34,835,836,838,840],{"class":36,"line":273},[34,837,466],{"class":40},[34,839,370],{"class":44},[34,841,52],{"class":40},[34,843,844,846,848],{"class":36,"line":283},[34,845,476],{"class":40},[34,847,313],{"class":44},[34,849,52],{"class":40},[34,851,852],{"class":36,"line":289},[34,853,76],{"emptyLinePlaceholder":75},[34,855,856],{"class":36,"line":295},[34,857,858],{"class":123},"  \u003C!-- ── Teleport to a CSS selector string ── -->\n",[34,860,861],{"class":36,"line":301},[34,862,863],{"class":123},"  \u003C!-- \u003CTeleport to=\"#modal-portal\"> → finds element with id=\"modal-portal\" -->\n",[34,865,866],{"class":36,"line":307},[34,867,868],{"class":123},"  \u003C!-- The target MUST exist in the DOM before the Teleport mounts -->\n",[34,870,871,873,875],{"class":36,"line":352},[34,872,261],{"class":40},[34,874,278],{"class":44},[34,876,52],{"class":40},[15,878,880],{"id":879},"suspense-async-component-orchestration","Suspense — Async Component Orchestration",[20,882,884,1500],{"filename":883,"language":23},"SuspenseExample.vue",[25,885,887],{"className":27,"code":886,"language":23,"meta":29,"style":29},"\u003Cscript setup>\nimport { ref, onErrorCaptured, defineAsyncComponent } from 'vue'\n\n\u002F\u002F ── Suspense: declarative async component loading ──\n\u002F\u002F Parent shows #fallback slot while async children load.\n\u002F\u002F ALL async children must resolve before #default renders.\n\nconst AsyncUserProfile = defineAsyncComponent(() => import('.\u002FUserProfile.vue'))\nconst AsyncActivityFeed = defineAsyncComponent(() => import('.\u002FActivityFeed.vue'))\n\n\u002F\u002F ── State for error handling (Suspense doesn't handle errors) ──\nconst error = ref\u003CError | null>(null)\nconst retryKey = ref(0)  \u002F\u002F increment to force re-mount of async children\n\n\u002F\u002F ── onErrorCaptured: catches errors from async setup in children ──\n\u002F\u002F Must be in the PARENT of \u003CSuspense>, not inside \u003CSuspense> itself.\nonErrorCaptured((err, instance, info) => {\n  console.error(`Error in ${instance?.$options?.name} during ${info}:`, err)\n  error.value = err\n  return false  \u002F\u002F stop propagation — don't crash the app\n})\n\nfunction retry() {\n  error.value = null\n  retryKey.value++  \u002F\u002F key change forces component re-creation → re-runs async setup\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- ── Error state: shown when async child throws ── -->\n  \u003Cdiv v-if=\"error\" class=\"error-boundary\">\n    \u003Ch2>Something went wrong\u003C\u002Fh2>\n    \u003Cp>{{ error.message }}\u003C\u002Fp>\n    \u003Cbutton @click=\"retry\">Retry\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\n  \u003C!-- ── Suspense boundary: shows fallback until ALL children resolve ── -->\n  \u003CSuspense v-else>\n    \u003Ctemplate #default>\n      \u003C!-- key forces re-mount on retry -->\n      \u003Cdiv :key=\"retryKey\">\n        \u003CAsyncUserProfile \u002F>\n        \u003CAsyncActivityFeed \u002F>\n        \u003C!-- Both must resolve before this slot renders -->\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #fallback>\n      \u003Cdiv class=\"loading-skeleton\">\n        \u003Cdiv class=\"skeleton-line\" \u002F>\n        \u003Cdiv class=\"skeleton-line\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FSuspense>\n\u003C\u002Ftemplate>\n",[31,888,889,899,910,914,919,924,929,933,960,984,988,993,1019,1040,1044,1049,1054,1082,1119,1129,1140,1144,1148,1159,1168,1179,1183,1191,1195,1203,1208,1230,1243,1257,1278,1287,1292,1298,1311,1326,1332,1349,1360,1370,1376,1385,1394,1399,1413,1429,1447,1464,1473,1482,1491],{"__ignoreMap":29},[34,890,891,893,895,897],{"class":36,"line":37},[34,892,41],{"class":40},[34,894,45],{"class":44},[34,896,49],{"class":48},[34,898,52],{"class":40},[34,900,901,903,906,908],{"class":36,"line":55},[34,902,59],{"class":58},[34,904,905],{"class":40}," { ref, onErrorCaptured, defineAsyncComponent } ",[34,907,65],{"class":58},[34,909,69],{"class":68},[34,911,912],{"class":36,"line":72},[34,913,76],{"emptyLinePlaceholder":75},[34,915,916],{"class":36,"line":79},[34,917,918],{"class":123},"\u002F\u002F ── Suspense: declarative async component loading ──\n",[34,920,921],{"class":36,"line":98},[34,922,923],{"class":123},"\u002F\u002F Parent shows #fallback slot while async children load.\n",[34,925,926],{"class":36,"line":111},[34,927,928],{"class":123},"\u002F\u002F ALL async children must resolve before #default renders.\n",[34,930,931],{"class":36,"line":127},[34,932,76],{"emptyLinePlaceholder":75},[34,934,935,937,940,942,945,947,949,952,954,957],{"class":36,"line":133},[34,936,82],{"class":58},[34,938,939],{"class":85}," AsyncUserProfile",[34,941,89],{"class":58},[34,943,944],{"class":48}," defineAsyncComponent",[34,946,178],{"class":40},[34,948,181],{"class":58},[34,950,951],{"class":58}," import",[34,953,244],{"class":40},[34,955,956],{"class":68},"'.\u002FUserProfile.vue'",[34,958,959],{"class":40},"))\n",[34,961,962,964,967,969,971,973,975,977,979,982],{"class":36,"line":138},[34,963,82],{"class":58},[34,965,966],{"class":85}," AsyncActivityFeed",[34,968,89],{"class":58},[34,970,944],{"class":48},[34,972,178],{"class":40},[34,974,181],{"class":58},[34,976,951],{"class":58},[34,978,244],{"class":40},[34,980,981],{"class":68},"'.\u002FActivityFeed.vue'",[34,983,959],{"class":40},[34,985,986],{"class":36,"line":160},[34,987,76],{"emptyLinePlaceholder":75},[34,989,990],{"class":36,"line":165},[34,991,992],{"class":123},"\u002F\u002F ── State for error handling (Suspense doesn't handle errors) ──\n",[34,994,995,997,1000,1002,1004,1006,1009,1011,1013,1015,1017],{"class":36,"line":196},[34,996,82],{"class":58},[34,998,999],{"class":85}," error",[34,1001,89],{"class":58},[34,1003,682],{"class":48},[34,1005,41],{"class":40},[34,1007,1008],{"class":48},"Error",[34,1010,690],{"class":58},[34,1012,693],{"class":85},[34,1014,696],{"class":40},[34,1016,699],{"class":85},[34,1018,193],{"class":40},[34,1020,1021,1023,1026,1028,1030,1032,1034,1037],{"class":36,"line":211},[34,1022,82],{"class":58},[34,1024,1025],{"class":85}," retryKey",[34,1027,89],{"class":58},[34,1029,682],{"class":48},[34,1031,244],{"class":40},[34,1033,554],{"class":85},[34,1035,1036],{"class":40},")  ",[34,1038,1039],{"class":123},"\u002F\u002F increment to force re-mount of async children\n",[34,1041,1042],{"class":36,"line":225},[34,1043,76],{"emptyLinePlaceholder":75},[34,1045,1046],{"class":36,"line":252},[34,1047,1048],{"class":123},"\u002F\u002F ── onErrorCaptured: catches errors from async setup in children ──\n",[34,1050,1051],{"class":36,"line":258},[34,1052,1053],{"class":123},"\u002F\u002F Must be in the PARENT of \u003CSuspense>, not inside \u003CSuspense> itself.\n",[34,1055,1056,1059,1062,1065,1068,1071,1073,1076,1078,1080],{"class":36,"line":268},[34,1057,1058],{"class":48},"onErrorCaptured",[34,1060,1061],{"class":40},"((",[34,1063,1064],{"class":101},"err",[34,1066,1067],{"class":40},", ",[34,1069,1070],{"class":101},"instance",[34,1072,1067],{"class":40},[34,1074,1075],{"class":101},"info",[34,1077,237],{"class":40},[34,1079,181],{"class":58},[34,1081,522],{"class":40},[34,1083,1084,1087,1090,1092,1095,1097,1100,1103,1105,1108,1111,1113,1116],{"class":36,"line":273},[34,1085,1086],{"class":40},"  console.",[34,1088,1089],{"class":48},"error",[34,1091,244],{"class":40},[34,1093,1094],{"class":68},"`Error in ${",[34,1096,1070],{"class":40},[34,1098,1099],{"class":68},"?.",[34,1101,1102],{"class":40},"$options",[34,1104,1099],{"class":68},[34,1106,1107],{"class":40},"name",[34,1109,1110],{"class":68},"} during ${",[34,1112,1075],{"class":40},[34,1114,1115],{"class":68},"}:`",[34,1117,1118],{"class":40},", err)\n",[34,1120,1121,1124,1126],{"class":36,"line":283},[34,1122,1123],{"class":40},"  error.value ",[34,1125,322],{"class":58},[34,1127,1128],{"class":40}," err\n",[34,1130,1131,1134,1137],{"class":36,"line":289},[34,1132,1133],{"class":58},"  return",[34,1135,1136],{"class":85}," false",[34,1138,1139],{"class":123},"  \u002F\u002F stop propagation — don't crash the app\n",[34,1141,1142],{"class":36,"line":295},[34,1143,255],{"class":40},[34,1145,1146],{"class":36,"line":301},[34,1147,76],{"emptyLinePlaceholder":75},[34,1149,1150,1153,1156],{"class":36,"line":307},[34,1151,1152],{"class":58},"function",[34,1154,1155],{"class":48}," retry",[34,1157,1158],{"class":40},"() {\n",[34,1160,1161,1163,1165],{"class":36,"line":352},[34,1162,1123],{"class":40},[34,1164,322],{"class":58},[34,1166,1167],{"class":85}," null\n",[34,1169,1170,1173,1176],{"class":36,"line":358},[34,1171,1172],{"class":40},"  retryKey.value",[34,1174,1175],{"class":58},"++",[34,1177,1178],{"class":123},"  \u002F\u002F key change forces component re-creation → re-runs async setup\n",[34,1180,1181],{"class":36,"line":364},[34,1182,565],{"class":40},[34,1184,1185,1187,1189],{"class":36,"line":399},[34,1186,261],{"class":40},[34,1188,45],{"class":44},[34,1190,52],{"class":40},[34,1192,1193],{"class":36,"line":416},[34,1194,76],{"emptyLinePlaceholder":75},[34,1196,1197,1199,1201],{"class":36,"line":431},[34,1198,41],{"class":40},[34,1200,278],{"class":44},[34,1202,52],{"class":40},[34,1204,1205],{"class":36,"line":453},[34,1206,1207],{"class":123},"  \u003C!-- ── Error state: shown when async child throws ── -->\n",[34,1209,1210,1212,1214,1216,1218,1221,1223,1225,1228],{"class":36,"line":463},[34,1211,310],{"class":40},[34,1213,370],{"class":44},[34,1215,373],{"class":48},[34,1217,322],{"class":40},[34,1219,1220],{"class":68},"\"error\"",[34,1222,381],{"class":48},[34,1224,322],{"class":40},[34,1226,1227],{"class":68},"\"error-boundary\"",[34,1229,52],{"class":40},[34,1231,1232,1234,1236,1239,1241],{"class":36,"line":473},[34,1233,367],{"class":40},[34,1235,15],{"class":44},[34,1237,1238],{"class":40},">Something went wrong\u003C\u002F",[34,1240,15],{"class":44},[34,1242,52],{"class":40},[34,1244,1245,1247,1250,1253,1255],{"class":36,"line":483},[34,1246,367],{"class":40},[34,1248,1249],{"class":44},"p",[34,1251,1252],{"class":40},">{{ error.message }}\u003C\u002F",[34,1254,1249],{"class":44},[34,1256,52],{"class":40},[34,1258,1260,1262,1264,1266,1268,1271,1274,1276],{"class":36,"line":1259},34,[34,1261,367],{"class":40},[34,1263,436],{"class":44},[34,1265,439],{"class":48},[34,1267,322],{"class":40},[34,1269,1270],{"class":68},"\"retry\"",[34,1272,1273],{"class":40},">Retry\u003C\u002F",[34,1275,436],{"class":44},[34,1277,52],{"class":40},[34,1279,1281,1283,1285],{"class":36,"line":1280},35,[34,1282,476],{"class":40},[34,1284,370],{"class":44},[34,1286,52],{"class":40},[34,1288,1290],{"class":36,"line":1289},36,[34,1291,76],{"emptyLinePlaceholder":75},[34,1293,1295],{"class":36,"line":1294},37,[34,1296,1297],{"class":123},"  \u003C!-- ── Suspense boundary: shows fallback until ALL children resolve ── -->\n",[34,1299,1301,1303,1306,1309],{"class":36,"line":1300},38,[34,1302,310],{"class":40},[34,1304,1305],{"class":44},"Suspense",[34,1307,1308],{"class":58}," v-else",[34,1310,52],{"class":40},[34,1312,1314,1316,1318,1321,1324],{"class":36,"line":1313},39,[34,1315,367],{"class":40},[34,1317,278],{"class":44},[34,1319,1320],{"class":40}," #",[34,1322,1323],{"class":48},"default",[34,1325,52],{"class":40},[34,1327,1329],{"class":36,"line":1328},40,[34,1330,1331],{"class":123},"      \u003C!-- key forces re-mount on retry -->\n",[34,1333,1335,1337,1339,1342,1344,1347],{"class":36,"line":1334},41,[34,1336,402],{"class":40},[34,1338,370],{"class":44},[34,1340,1341],{"class":48}," :key",[34,1343,322],{"class":40},[34,1345,1346],{"class":68},"\"retryKey\"",[34,1348,52],{"class":40},[34,1350,1352,1354,1357],{"class":36,"line":1351},42,[34,1353,419],{"class":40},[34,1355,1356],{"class":44},"AsyncUserProfile",[34,1358,1359],{"class":40}," \u002F>\n",[34,1361,1363,1365,1368],{"class":36,"line":1362},43,[34,1364,419],{"class":40},[34,1366,1367],{"class":44},"AsyncActivityFeed",[34,1369,1359],{"class":40},[34,1371,1373],{"class":36,"line":1372},44,[34,1374,1375],{"class":123},"        \u003C!-- Both must resolve before this slot renders -->\n",[34,1377,1379,1381,1383],{"class":36,"line":1378},45,[34,1380,456],{"class":40},[34,1382,370],{"class":44},[34,1384,52],{"class":40},[34,1386,1388,1390,1392],{"class":36,"line":1387},46,[34,1389,466],{"class":40},[34,1391,278],{"class":44},[34,1393,52],{"class":40},[34,1395,1397],{"class":36,"line":1396},47,[34,1398,76],{"emptyLinePlaceholder":75},[34,1400,1402,1404,1406,1408,1411],{"class":36,"line":1401},48,[34,1403,367],{"class":40},[34,1405,278],{"class":44},[34,1407,1320],{"class":40},[34,1409,1410],{"class":48},"fallback",[34,1412,52],{"class":40},[34,1414,1416,1418,1420,1422,1424,1427],{"class":36,"line":1415},49,[34,1417,402],{"class":40},[34,1419,370],{"class":44},[34,1421,381],{"class":48},[34,1423,322],{"class":40},[34,1425,1426],{"class":68},"\"loading-skeleton\"",[34,1428,52],{"class":40},[34,1430,1432,1434,1436,1438,1440,1443,1445],{"class":36,"line":1431},50,[34,1433,419],{"class":40},[34,1435,370],{"class":44},[34,1437,381],{"class":48},[34,1439,322],{"class":40},[34,1441,1442],{"class":68},"\"skeleton-line\"",[34,1444,426],{"class":425},[34,1446,52],{"class":40},[34,1448,1450,1452,1454,1456,1458,1460,1462],{"class":36,"line":1449},51,[34,1451,419],{"class":40},[34,1453,370],{"class":44},[34,1455,381],{"class":48},[34,1457,322],{"class":40},[34,1459,1442],{"class":68},[34,1461,426],{"class":425},[34,1463,52],{"class":40},[34,1465,1467,1469,1471],{"class":36,"line":1466},52,[34,1468,456],{"class":40},[34,1470,370],{"class":44},[34,1472,52],{"class":40},[34,1474,1476,1478,1480],{"class":36,"line":1475},53,[34,1477,466],{"class":40},[34,1479,278],{"class":44},[34,1481,52],{"class":40},[34,1483,1485,1487,1489],{"class":36,"line":1484},54,[34,1486,476],{"class":40},[34,1488,1305],{"class":44},[34,1490,52],{"class":40},[34,1492,1494,1496,1498],{"class":36,"line":1493},55,[34,1495,261],{"class":40},[34,1497,278],{"class":44},[34,1499,52],{"class":40},[20,1501,1503],{"filename":1502,"language":23},"UserProfileChild.vue",[25,1504,1506],{"className":27,"code":1505,"language":23,"meta":29,"style":29},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst user = ref(null)\n\n\u002F\u002F ── Top-level await: makes this an async component ──\n\u002F\u002F Suspense pauses rendering until this resolves.\n\u002F\u002F If it throws, onErrorCaptured in the parent catches it.\nconst res = await fetch('\u002Fapi\u002Fuser\u002Fprofile')\nuser.value = await res.json()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch2>{{ user.name }}\u003C\u002Fh2>\n    \u003Cp>{{ user.email }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[31,1507,1508,1518,1529,1533,1550,1554,1559,1564,1569,1591,1609,1617,1621,1629,1637,1650,1663,1671],{"__ignoreMap":29},[34,1509,1510,1512,1514,1516],{"class":36,"line":37},[34,1511,41],{"class":40},[34,1513,45],{"class":44},[34,1515,49],{"class":48},[34,1517,52],{"class":40},[34,1519,1520,1522,1525,1527],{"class":36,"line":55},[34,1521,59],{"class":58},[34,1523,1524],{"class":40}," { ref } ",[34,1526,65],{"class":58},[34,1528,69],{"class":68},[34,1530,1531],{"class":36,"line":72},[34,1532,76],{"emptyLinePlaceholder":75},[34,1534,1535,1537,1540,1542,1544,1546,1548],{"class":36,"line":79},[34,1536,82],{"class":58},[34,1538,1539],{"class":85}," user",[34,1541,89],{"class":58},[34,1543,682],{"class":48},[34,1545,244],{"class":40},[34,1547,699],{"class":85},[34,1549,193],{"class":40},[34,1551,1552],{"class":36,"line":98},[34,1553,76],{"emptyLinePlaceholder":75},[34,1555,1556],{"class":36,"line":111},[34,1557,1558],{"class":123},"\u002F\u002F ── Top-level await: makes this an async component ──\n",[34,1560,1561],{"class":36,"line":127},[34,1562,1563],{"class":123},"\u002F\u002F Suspense pauses rendering until this resolves.\n",[34,1565,1566],{"class":36,"line":133},[34,1567,1568],{"class":123},"\u002F\u002F If it throws, onErrorCaptured in the parent catches it.\n",[34,1570,1571,1573,1576,1578,1581,1584,1586,1589],{"class":36,"line":138},[34,1572,82],{"class":58},[34,1574,1575],{"class":85}," res",[34,1577,89],{"class":58},[34,1579,1580],{"class":58}," await",[34,1582,1583],{"class":48}," fetch",[34,1585,244],{"class":40},[34,1587,1588],{"class":68},"'\u002Fapi\u002Fuser\u002Fprofile'",[34,1590,193],{"class":40},[34,1592,1593,1596,1598,1600,1603,1606],{"class":36,"line":160},[34,1594,1595],{"class":40},"user.value ",[34,1597,322],{"class":58},[34,1599,1580],{"class":58},[34,1601,1602],{"class":40}," res.",[34,1604,1605],{"class":48},"json",[34,1607,1608],{"class":40},"()\n",[34,1610,1611,1613,1615],{"class":36,"line":165},[34,1612,261],{"class":40},[34,1614,45],{"class":44},[34,1616,52],{"class":40},[34,1618,1619],{"class":36,"line":196},[34,1620,76],{"emptyLinePlaceholder":75},[34,1622,1623,1625,1627],{"class":36,"line":211},[34,1624,41],{"class":40},[34,1626,278],{"class":44},[34,1628,52],{"class":40},[34,1630,1631,1633,1635],{"class":36,"line":225},[34,1632,310],{"class":40},[34,1634,370],{"class":44},[34,1636,52],{"class":40},[34,1638,1639,1641,1643,1646,1648],{"class":36,"line":252},[34,1640,367],{"class":40},[34,1642,15],{"class":44},[34,1644,1645],{"class":40},">{{ user.name }}\u003C\u002F",[34,1647,15],{"class":44},[34,1649,52],{"class":40},[34,1651,1652,1654,1656,1659,1661],{"class":36,"line":258},[34,1653,367],{"class":40},[34,1655,1249],{"class":44},[34,1657,1658],{"class":40},">{{ user.email }}\u003C\u002F",[34,1660,1249],{"class":44},[34,1662,52],{"class":40},[34,1664,1665,1667,1669],{"class":36,"line":268},[34,1666,476],{"class":40},[34,1668,370],{"class":44},[34,1670,52],{"class":40},[34,1672,1673,1675,1677],{"class":36,"line":273},[34,1674,261],{"class":40},[34,1676,278],{"class":44},[34,1678,52],{"class":40},[15,1680,1682],{"id":1681},"nested-suspense-independent-loading-boundaries","Nested Suspense — Independent Loading Boundaries",[20,1684,1686],{"filename":1685,"language":23},"NestedSuspense.vue",[25,1687,1689],{"className":27,"code":1688,"language":23,"meta":29,"style":29},"\u003Ctemplate>\n  \u003C!-- ── Outer Suspense: waits for page shell ── -->\n  \u003CSuspense>\n    \u003Ctemplate #default>\n      \u003CHeader \u002F>\n      \u003Cmain>\n        \u003C!-- ── Inner Suspense: independently loads sidebar ── -->\n        \u003C!-- If sidebar is slow, the main content still shows -->\n        \u003CSuspense>\n          \u003Ctemplate #default>\n            \u003CSidebar \u002F>\n          \u003C\u002Ftemplate>\n          \u003Ctemplate #fallback>\n            \u003Cdiv class=\"sidebar-skeleton\">Loading sidebar…\u003C\u002Fdiv>\n          \u003C\u002Ftemplate>\n        \u003C\u002FSuspense>\n\n        \u003C!-- ── Inner Suspense: independently loads content ── -->\n        \u003CSuspense>\n          \u003Ctemplate #default>\n            \u003CContent \u002F>\n          \u003C\u002Ftemplate>\n          \u003Ctemplate #fallback>\n            \u003Cdiv class=\"content-skeleton\">Loading content…\u003C\u002Fdiv>\n          \u003C\u002Ftemplate>\n        \u003C\u002FSuspense>\n      \u003C\u002Fmain>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #fallback>\n      \u003CFullPageLoading \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FSuspense>\n\u003C\u002Ftemplate>\n\n\u003C!-- ── Why nested Suspense matters: ────────────────────\n     Without nested boundaries, if ANY async child is slow, ALL children\n     wait (outer fallback shows for everything). Nested boundaries allow\n     independent loading — fast parts render while slow parts show fallback. -->\n",[31,1690,1691,1699,1704,1712,1724,1733,1742,1747,1752,1760,1773,1783,1792,1804,1824,1832,1841,1845,1850,1858,1870,1879,1887,1899,1919,1927,1935,1943,1951,1955,1967,1976,1984,1992,2000,2004,2009,2014,2019],{"__ignoreMap":29},[34,1692,1693,1695,1697],{"class":36,"line":37},[34,1694,41],{"class":40},[34,1696,278],{"class":44},[34,1698,52],{"class":40},[34,1700,1701],{"class":36,"line":55},[34,1702,1703],{"class":123},"  \u003C!-- ── Outer Suspense: waits for page shell ── -->\n",[34,1705,1706,1708,1710],{"class":36,"line":72},[34,1707,310],{"class":40},[34,1709,1305],{"class":44},[34,1711,52],{"class":40},[34,1713,1714,1716,1718,1720,1722],{"class":36,"line":79},[34,1715,367],{"class":40},[34,1717,278],{"class":44},[34,1719,1320],{"class":40},[34,1721,1323],{"class":48},[34,1723,52],{"class":40},[34,1725,1726,1728,1731],{"class":36,"line":98},[34,1727,402],{"class":40},[34,1729,1730],{"class":44},"Header",[34,1732,1359],{"class":40},[34,1734,1735,1737,1740],{"class":36,"line":111},[34,1736,402],{"class":40},[34,1738,1739],{"class":44},"main",[34,1741,52],{"class":40},[34,1743,1744],{"class":36,"line":127},[34,1745,1746],{"class":123},"        \u003C!-- ── Inner Suspense: independently loads sidebar ── -->\n",[34,1748,1749],{"class":36,"line":133},[34,1750,1751],{"class":123},"        \u003C!-- If sidebar is slow, the main content still shows -->\n",[34,1753,1754,1756,1758],{"class":36,"line":138},[34,1755,419],{"class":40},[34,1757,1305],{"class":44},[34,1759,52],{"class":40},[34,1761,1762,1765,1767,1769,1771],{"class":36,"line":160},[34,1763,1764],{"class":40},"          \u003C",[34,1766,278],{"class":44},[34,1768,1320],{"class":40},[34,1770,1323],{"class":48},[34,1772,52],{"class":40},[34,1774,1775,1778,1781],{"class":36,"line":165},[34,1776,1777],{"class":40},"            \u003C",[34,1779,1780],{"class":44},"Sidebar",[34,1782,1359],{"class":40},[34,1784,1785,1788,1790],{"class":36,"line":196},[34,1786,1787],{"class":40},"          \u003C\u002F",[34,1789,278],{"class":44},[34,1791,52],{"class":40},[34,1793,1794,1796,1798,1800,1802],{"class":36,"line":211},[34,1795,1764],{"class":40},[34,1797,278],{"class":44},[34,1799,1320],{"class":40},[34,1801,1410],{"class":48},[34,1803,52],{"class":40},[34,1805,1806,1808,1810,1812,1814,1817,1820,1822],{"class":36,"line":225},[34,1807,1777],{"class":40},[34,1809,370],{"class":44},[34,1811,381],{"class":48},[34,1813,322],{"class":40},[34,1815,1816],{"class":68},"\"sidebar-skeleton\"",[34,1818,1819],{"class":40},">Loading sidebar…\u003C\u002F",[34,1821,370],{"class":44},[34,1823,52],{"class":40},[34,1825,1826,1828,1830],{"class":36,"line":252},[34,1827,1787],{"class":40},[34,1829,278],{"class":44},[34,1831,52],{"class":40},[34,1833,1834,1837,1839],{"class":36,"line":258},[34,1835,1836],{"class":40},"        \u003C\u002F",[34,1838,1305],{"class":44},[34,1840,52],{"class":40},[34,1842,1843],{"class":36,"line":268},[34,1844,76],{"emptyLinePlaceholder":75},[34,1846,1847],{"class":36,"line":273},[34,1848,1849],{"class":123},"        \u003C!-- ── Inner Suspense: independently loads content ── -->\n",[34,1851,1852,1854,1856],{"class":36,"line":283},[34,1853,419],{"class":40},[34,1855,1305],{"class":44},[34,1857,52],{"class":40},[34,1859,1860,1862,1864,1866,1868],{"class":36,"line":289},[34,1861,1764],{"class":40},[34,1863,278],{"class":44},[34,1865,1320],{"class":40},[34,1867,1323],{"class":48},[34,1869,52],{"class":40},[34,1871,1872,1874,1877],{"class":36,"line":295},[34,1873,1777],{"class":40},[34,1875,1876],{"class":44},"Content",[34,1878,1359],{"class":40},[34,1880,1881,1883,1885],{"class":36,"line":301},[34,1882,1787],{"class":40},[34,1884,278],{"class":44},[34,1886,52],{"class":40},[34,1888,1889,1891,1893,1895,1897],{"class":36,"line":307},[34,1890,1764],{"class":40},[34,1892,278],{"class":44},[34,1894,1320],{"class":40},[34,1896,1410],{"class":48},[34,1898,52],{"class":40},[34,1900,1901,1903,1905,1907,1909,1912,1915,1917],{"class":36,"line":352},[34,1902,1777],{"class":40},[34,1904,370],{"class":44},[34,1906,381],{"class":48},[34,1908,322],{"class":40},[34,1910,1911],{"class":68},"\"content-skeleton\"",[34,1913,1914],{"class":40},">Loading content…\u003C\u002F",[34,1916,370],{"class":44},[34,1918,52],{"class":40},[34,1920,1921,1923,1925],{"class":36,"line":358},[34,1922,1787],{"class":40},[34,1924,278],{"class":44},[34,1926,52],{"class":40},[34,1928,1929,1931,1933],{"class":36,"line":364},[34,1930,1836],{"class":40},[34,1932,1305],{"class":44},[34,1934,52],{"class":40},[34,1936,1937,1939,1941],{"class":36,"line":399},[34,1938,456],{"class":40},[34,1940,1739],{"class":44},[34,1942,52],{"class":40},[34,1944,1945,1947,1949],{"class":36,"line":416},[34,1946,466],{"class":40},[34,1948,278],{"class":44},[34,1950,52],{"class":40},[34,1952,1953],{"class":36,"line":431},[34,1954,76],{"emptyLinePlaceholder":75},[34,1956,1957,1959,1961,1963,1965],{"class":36,"line":453},[34,1958,367],{"class":40},[34,1960,278],{"class":44},[34,1962,1320],{"class":40},[34,1964,1410],{"class":48},[34,1966,52],{"class":40},[34,1968,1969,1971,1974],{"class":36,"line":463},[34,1970,402],{"class":40},[34,1972,1973],{"class":44},"FullPageLoading",[34,1975,1359],{"class":40},[34,1977,1978,1980,1982],{"class":36,"line":473},[34,1979,466],{"class":40},[34,1981,278],{"class":44},[34,1983,52],{"class":40},[34,1985,1986,1988,1990],{"class":36,"line":483},[34,1987,476],{"class":40},[34,1989,1305],{"class":44},[34,1991,52],{"class":40},[34,1993,1994,1996,1998],{"class":36,"line":1259},[34,1995,261],{"class":40},[34,1997,278],{"class":44},[34,1999,52],{"class":40},[34,2001,2002],{"class":36,"line":1280},[34,2003,76],{"emptyLinePlaceholder":75},[34,2005,2006],{"class":36,"line":1289},[34,2007,2008],{"class":123},"\u003C!-- ── Why nested Suspense matters: ────────────────────\n",[34,2010,2011],{"class":36,"line":1294},[34,2012,2013],{"class":123},"     Without nested boundaries, if ANY async child is slow, ALL children\n",[34,2015,2016],{"class":36,"line":1300},[34,2017,2018],{"class":123},"     wait (outer fallback shows for everything). Nested boundaries allow\n",[34,2020,2021],{"class":36,"line":1313},[34,2022,2023],{"class":123},"     independent loading — fast parts render while slow parts show fallback. -->\n",[15,2025,2027],{"id":2026},"tips-tricks","💡 Tips & Tricks",[20,2029,2032],{"filename":2030,"language":2031},"tips.ts","typescript",[25,2033,2036],{"className":2034,"code":2035,"language":2031,"meta":29,"style":29},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F ── 1. Teleport target must exist before Teleport mounts ──\n\u002F\u002F Use onMounted to verify, or create the target element dynamically.\n\u002F\u002F For SSR: use :disabled=\"isServer\" to render in-place on server.\n\n\u002F\u002F ── 2. Suspense + async setup + watch: register watchers BEFORE await ──\n\u002F\u002F Watchers created after top-level await won't fire during the initial load.\n\u002F\u002F Place all watch\u002FwatchEffect calls before the first await.\n\n\u002F\u002F ── 3. Teleport preserves reactivity ──\n\u002F\u002F The teleported content still belongs to the component that created it.\n\u002F\u002F Props, state, provide\u002Finject all work as if the DOM was in the component tree.\n\n\u002F\u002F ── 4. Multiple Teleports to the same target append in order ──\n\u002F\u002F \u003CTeleport to=\"#portal\">A\u003C\u002FTeleport>\n\u002F\u002F \u003CTeleport to=\"#portal\">B\u003C\u002FTeleport> → #portal contains A then B.\n\n\u002F\u002F ── 5. Suspense suspensible: false shows loadingComponent instead of fallback ──\n\u002F\u002F defineAsyncComponent({ suspensible: false, loadingComponent: Spinner })\n\u002F\u002F → component shows Spinner (not Suspense fallback) while loading.\n",[31,2037,2038,2043,2048,2053,2057,2062,2067,2072,2076,2081,2086,2091,2095,2100,2105,2110,2114,2119,2124],{"__ignoreMap":29},[34,2039,2040],{"class":36,"line":37},[34,2041,2042],{"class":123},"\u002F\u002F ── 1. Teleport target must exist before Teleport mounts ──\n",[34,2044,2045],{"class":36,"line":55},[34,2046,2047],{"class":123},"\u002F\u002F Use onMounted to verify, or create the target element dynamically.\n",[34,2049,2050],{"class":36,"line":72},[34,2051,2052],{"class":123},"\u002F\u002F For SSR: use :disabled=\"isServer\" to render in-place on server.\n",[34,2054,2055],{"class":36,"line":79},[34,2056,76],{"emptyLinePlaceholder":75},[34,2058,2059],{"class":36,"line":98},[34,2060,2061],{"class":123},"\u002F\u002F ── 2. Suspense + async setup + watch: register watchers BEFORE await ──\n",[34,2063,2064],{"class":36,"line":111},[34,2065,2066],{"class":123},"\u002F\u002F Watchers created after top-level await won't fire during the initial load.\n",[34,2068,2069],{"class":36,"line":127},[34,2070,2071],{"class":123},"\u002F\u002F Place all watch\u002FwatchEffect calls before the first await.\n",[34,2073,2074],{"class":36,"line":133},[34,2075,76],{"emptyLinePlaceholder":75},[34,2077,2078],{"class":36,"line":138},[34,2079,2080],{"class":123},"\u002F\u002F ── 3. Teleport preserves reactivity ──\n",[34,2082,2083],{"class":36,"line":160},[34,2084,2085],{"class":123},"\u002F\u002F The teleported content still belongs to the component that created it.\n",[34,2087,2088],{"class":36,"line":165},[34,2089,2090],{"class":123},"\u002F\u002F Props, state, provide\u002Finject all work as if the DOM was in the component tree.\n",[34,2092,2093],{"class":36,"line":196},[34,2094,76],{"emptyLinePlaceholder":75},[34,2096,2097],{"class":36,"line":211},[34,2098,2099],{"class":123},"\u002F\u002F ── 4. Multiple Teleports to the same target append in order ──\n",[34,2101,2102],{"class":36,"line":225},[34,2103,2104],{"class":123},"\u002F\u002F \u003CTeleport to=\"#portal\">A\u003C\u002FTeleport>\n",[34,2106,2107],{"class":36,"line":252},[34,2108,2109],{"class":123},"\u002F\u002F \u003CTeleport to=\"#portal\">B\u003C\u002FTeleport> → #portal contains A then B.\n",[34,2111,2112],{"class":36,"line":258},[34,2113,76],{"emptyLinePlaceholder":75},[34,2115,2116],{"class":36,"line":268},[34,2117,2118],{"class":123},"\u002F\u002F ── 5. Suspense suspensible: false shows loadingComponent instead of fallback ──\n",[34,2120,2121],{"class":36,"line":273},[34,2122,2123],{"class":123},"\u002F\u002F defineAsyncComponent({ suspensible: false, loadingComponent: Spinner })\n",[34,2125,2126],{"class":36,"line":283},[34,2127,2128],{"class":123},"\u002F\u002F → component shows Spinner (not Suspense fallback) while loading.\n",[15,2130,2132],{"id":2131},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[20,2134,2136],{"filename":2135,"language":2031},"edge-cases.ts",[25,2137,2139],{"className":2034,"code":2138,"language":2031,"meta":29,"style":29},"\u002F\u002F ── 1. Teleport target must exist in DOM before Teleport renders ──\n\u002F\u002F If target is dynamically created, ensure it's available in onMounted.\n\u002F\u002F Otherwise: \"Failed to locate target\" warning, content renders in-place.\n\n\u002F\u002F ── 2. SSR: Teleport to=\"body\" fails on server (no document) ──\n\u002F\u002F Use :disabled=\"typeof document === 'undefined'\" to render in-place on server.\n\u002F\u002F Or: create a \u003Cdiv id=\"portal\"> in your root HTML and teleport to that.\n\n\u002F\u002F ── 3. Suspense doesn't retry automatically on error ──\n\u002F\u002F After an error, the fallback slot stays. Must re-mount (change :key) to retry.\n\u002F\u002F onErrorCaptured + a retry button that increments a key is the standard pattern.\n\n\u002F\u002F ── 4. Async setup + lifecycle hooks: hooks after await may not fire ──\n\u002F\u002F onMounted registered AFTER the top-level await may not fire if the component\n\u002F\u002F is unmounted while still awaiting. Register all hooks before await.\n\n\u002F\u002F ── 5. Teleport content is NOT a child of the target in Vue's component tree ──\n\u002F\u002F The DOM is moved, but the component tree (provide\u002Finject, parent\u002Fchild)\n\u002F\u002F is preserved. inject() works as if the content was in its original position.\n\n\u002F\u002F ── 6. Suspense fallback shows for the ENTIRE boundary ──\n\u002F\u002F If you have 3 async children and 1 is slow, all 3 wait.\n\u002F\u002F Split into separate Suspense boundaries for independent loading.\n",[31,2140,2141,2146,2151,2156,2160,2165,2170,2175,2179,2184,2189,2194,2198,2203,2208,2213,2217,2222,2227,2232,2236,2241,2246],{"__ignoreMap":29},[34,2142,2143],{"class":36,"line":37},[34,2144,2145],{"class":123},"\u002F\u002F ── 1. Teleport target must exist in DOM before Teleport renders ──\n",[34,2147,2148],{"class":36,"line":55},[34,2149,2150],{"class":123},"\u002F\u002F If target is dynamically created, ensure it's available in onMounted.\n",[34,2152,2153],{"class":36,"line":72},[34,2154,2155],{"class":123},"\u002F\u002F Otherwise: \"Failed to locate target\" warning, content renders in-place.\n",[34,2157,2158],{"class":36,"line":79},[34,2159,76],{"emptyLinePlaceholder":75},[34,2161,2162],{"class":36,"line":98},[34,2163,2164],{"class":123},"\u002F\u002F ── 2. SSR: Teleport to=\"body\" fails on server (no document) ──\n",[34,2166,2167],{"class":36,"line":111},[34,2168,2169],{"class":123},"\u002F\u002F Use :disabled=\"typeof document === 'undefined'\" to render in-place on server.\n",[34,2171,2172],{"class":36,"line":127},[34,2173,2174],{"class":123},"\u002F\u002F Or: create a \u003Cdiv id=\"portal\"> in your root HTML and teleport to that.\n",[34,2176,2177],{"class":36,"line":133},[34,2178,76],{"emptyLinePlaceholder":75},[34,2180,2181],{"class":36,"line":138},[34,2182,2183],{"class":123},"\u002F\u002F ── 3. Suspense doesn't retry automatically on error ──\n",[34,2185,2186],{"class":36,"line":160},[34,2187,2188],{"class":123},"\u002F\u002F After an error, the fallback slot stays. Must re-mount (change :key) to retry.\n",[34,2190,2191],{"class":36,"line":165},[34,2192,2193],{"class":123},"\u002F\u002F onErrorCaptured + a retry button that increments a key is the standard pattern.\n",[34,2195,2196],{"class":36,"line":196},[34,2197,76],{"emptyLinePlaceholder":75},[34,2199,2200],{"class":36,"line":211},[34,2201,2202],{"class":123},"\u002F\u002F ── 4. Async setup + lifecycle hooks: hooks after await may not fire ──\n",[34,2204,2205],{"class":36,"line":225},[34,2206,2207],{"class":123},"\u002F\u002F onMounted registered AFTER the top-level await may not fire if the component\n",[34,2209,2210],{"class":36,"line":252},[34,2211,2212],{"class":123},"\u002F\u002F is unmounted while still awaiting. Register all hooks before await.\n",[34,2214,2215],{"class":36,"line":258},[34,2216,76],{"emptyLinePlaceholder":75},[34,2218,2219],{"class":36,"line":268},[34,2220,2221],{"class":123},"\u002F\u002F ── 5. Teleport content is NOT a child of the target in Vue's component tree ──\n",[34,2223,2224],{"class":36,"line":273},[34,2225,2226],{"class":123},"\u002F\u002F The DOM is moved, but the component tree (provide\u002Finject, parent\u002Fchild)\n",[34,2228,2229],{"class":36,"line":283},[34,2230,2231],{"class":123},"\u002F\u002F is preserved. inject() works as if the content was in its original position.\n",[34,2233,2234],{"class":36,"line":289},[34,2235,76],{"emptyLinePlaceholder":75},[34,2237,2238],{"class":36,"line":295},[34,2239,2240],{"class":123},"\u002F\u002F ── 6. Suspense fallback shows for the ENTIRE boundary ──\n",[34,2242,2243],{"class":36,"line":301},[34,2244,2245],{"class":123},"\u002F\u002F If you have 3 async children and 1 is slow, all 3 wait.\n",[34,2247,2248],{"class":36,"line":307},[34,2249,2250],{"class":123},"\u002F\u002F Split into separate Suspense boundaries for independent loading.\n",[15,2252,2254],{"id":2253},"spot-the-bug","🧠 Spot the Bug",[1249,2256,2257,2258,2261,2262,2265],{},"A modal rendered inside a parent with ",[31,2259,2260],{},"overflow: hidden"," and ",[31,2263,2264],{},"transform"," is clipped and has broken z-index.",[20,2267,2269],{"filename":2268,"language":23},"ModalBug.vue",[25,2270,2272],{"className":27,"code":2271,"language":23,"meta":29,"style":29},"\u003Cscript setup>\nconst isOpen = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Parent has overflow: hidden + transform (creates stacking context) -->\n  \u003Cdiv class=\"dashboard\" style=\"overflow: hidden; transform: translateZ(0);\">\n    \u003Cbutton @click=\"isOpen = true\">Open Modal\u003C\u002Fbutton>\n\n    \u003C!-- ❌ Modal rendered inside .dashboard — clipped by overflow, z-index limited -->\n    \u003Cdiv v-if=\"isOpen\" class=\"modal\" style=\"z-index: 9999;\">\n      \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[31,2273,2274,2284,2301,2309,2313,2321,2326,2349,2369,2373,2378,2406,2416,2424,2432],{"__ignoreMap":29},[34,2275,2276,2278,2280,2282],{"class":36,"line":37},[34,2277,41],{"class":40},[34,2279,45],{"class":44},[34,2281,49],{"class":48},[34,2283,52],{"class":40},[34,2285,2286,2288,2290,2292,2294,2296,2299],{"class":36,"line":55},[34,2287,82],{"class":58},[34,2289,201],{"class":85},[34,2291,89],{"class":58},[34,2293,682],{"class":48},[34,2295,244],{"class":40},[34,2297,2298],{"class":85},"false",[34,2300,193],{"class":40},[34,2302,2303,2305,2307],{"class":36,"line":72},[34,2304,261],{"class":40},[34,2306,45],{"class":44},[34,2308,52],{"class":40},[34,2310,2311],{"class":36,"line":79},[34,2312,76],{"emptyLinePlaceholder":75},[34,2314,2315,2317,2319],{"class":36,"line":98},[34,2316,41],{"class":40},[34,2318,278],{"class":44},[34,2320,52],{"class":40},[34,2322,2323],{"class":36,"line":111},[34,2324,2325],{"class":123},"  \u003C!-- Parent has overflow: hidden + transform (creates stacking context) -->\n",[34,2327,2328,2330,2332,2334,2336,2339,2342,2344,2347],{"class":36,"line":127},[34,2329,310],{"class":40},[34,2331,370],{"class":44},[34,2333,381],{"class":48},[34,2335,322],{"class":40},[34,2337,2338],{"class":68},"\"dashboard\"",[34,2340,2341],{"class":48}," style",[34,2343,322],{"class":40},[34,2345,2346],{"class":68},"\"overflow: hidden; transform: translateZ(0);\"",[34,2348,52],{"class":40},[34,2350,2351,2353,2355,2357,2359,2362,2365,2367],{"class":36,"line":133},[34,2352,367],{"class":40},[34,2354,436],{"class":44},[34,2356,439],{"class":48},[34,2358,322],{"class":40},[34,2360,2361],{"class":68},"\"isOpen = true\"",[34,2363,2364],{"class":40},">Open Modal\u003C\u002F",[34,2366,436],{"class":44},[34,2368,52],{"class":40},[34,2370,2371],{"class":36,"line":138},[34,2372,76],{"emptyLinePlaceholder":75},[34,2374,2375],{"class":36,"line":160},[34,2376,2377],{"class":123},"    \u003C!-- ❌ Modal rendered inside .dashboard — clipped by overflow, z-index limited -->\n",[34,2379,2380,2382,2384,2386,2388,2390,2392,2394,2397,2399,2401,2404],{"class":36,"line":165},[34,2381,367],{"class":40},[34,2383,370],{"class":44},[34,2385,373],{"class":48},[34,2387,322],{"class":40},[34,2389,378],{"class":68},[34,2391,381],{"class":48},[34,2393,322],{"class":40},[34,2395,2396],{"class":68},"\"modal\"",[34,2398,2341],{"class":48},[34,2400,322],{"class":40},[34,2402,2403],{"class":68},"\"z-index: 9999;\"",[34,2405,52],{"class":40},[34,2407,2408,2410,2412,2414],{"class":36,"line":196},[34,2409,402],{"class":40},[34,2411,422],{"class":44},[34,2413,426],{"class":425},[34,2415,52],{"class":40},[34,2417,2418,2420,2422],{"class":36,"line":211},[34,2419,466],{"class":40},[34,2421,370],{"class":44},[34,2423,52],{"class":40},[34,2425,2426,2428,2430],{"class":36,"line":225},[34,2427,476],{"class":40},[34,2429,370],{"class":44},[34,2431,52],{"class":40},[34,2433,2434,2436,2438],{"class":36,"line":252},[34,2435,261],{"class":40},[34,2437,278],{"class":44},[34,2439,52],{"class":40},[2441,2442,2443,2447,2465,2476,2623],"details",{},[2444,2445,2446],"summary",{},"Answer",[1249,2448,2449,2450,2453,2454,2456,2457,2460,2461,2464],{},"The modal is a DOM child of ",[31,2451,2452],{},".dashboard",", which has ",[31,2455,2260],{}," (clips the modal) and ",[31,2458,2459],{},"transform: translateZ(0)"," (creates a new stacking context — ",[31,2462,2463],{},"z-index: 9999"," is scoped to the parent's context, not global).",[1249,2466,2467,2471,2472,2475],{},[2468,2469,2470],"strong",{},"Fix"," — use Teleport to render the modal at ",[31,2473,2474],{},"body"," level:",[20,2477,2479],{"filename":2478,"language":23},"ModalFixed.vue",[25,2480,2482],{"className":27,"code":2481,"language":23,"meta":29,"style":29},"\u003Ctemplate>\n  \u003Cdiv class=\"dashboard\" style=\"overflow: hidden; transform: translateZ(0);\">\n    \u003Cbutton @click=\"isOpen = true\">Open Modal\u003C\u002Fbutton>\n\n    \u003C!-- ✅ Teleport: modal DOM is at body level, no parent stacking context -->\n    \u003CTeleport to=\"body\">\n      \u003Cdiv v-if=\"isOpen\" class=\"modal\" style=\"z-index: 9999;\">\n        \u003Cslot \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002FTeleport>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[31,2483,2484,2492,2512,2530,2534,2539,2555,2581,2591,2599,2607,2615],{"__ignoreMap":29},[34,2485,2486,2488,2490],{"class":36,"line":37},[34,2487,41],{"class":40},[34,2489,278],{"class":44},[34,2491,52],{"class":40},[34,2493,2494,2496,2498,2500,2502,2504,2506,2508,2510],{"class":36,"line":55},[34,2495,310],{"class":40},[34,2497,370],{"class":44},[34,2499,381],{"class":48},[34,2501,322],{"class":40},[34,2503,2338],{"class":68},[34,2505,2341],{"class":48},[34,2507,322],{"class":40},[34,2509,2346],{"class":68},[34,2511,52],{"class":40},[34,2513,2514,2516,2518,2520,2522,2524,2526,2528],{"class":36,"line":72},[34,2515,367],{"class":40},[34,2517,436],{"class":44},[34,2519,439],{"class":48},[34,2521,322],{"class":40},[34,2523,2361],{"class":68},[34,2525,2364],{"class":40},[34,2527,436],{"class":44},[34,2529,52],{"class":40},[34,2531,2532],{"class":36,"line":79},[34,2533,76],{"emptyLinePlaceholder":75},[34,2535,2536],{"class":36,"line":98},[34,2537,2538],{"class":123},"    \u003C!-- ✅ Teleport: modal DOM is at body level, no parent stacking context -->\n",[34,2540,2541,2543,2545,2548,2550,2553],{"class":36,"line":111},[34,2542,367],{"class":40},[34,2544,313],{"class":44},[34,2546,2547],{"class":48}," to",[34,2549,322],{"class":40},[34,2551,2552],{"class":68},"\"body\"",[34,2554,52],{"class":40},[34,2556,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2577,2579],{"class":36,"line":127},[34,2558,402],{"class":40},[34,2560,370],{"class":44},[34,2562,373],{"class":48},[34,2564,322],{"class":40},[34,2566,378],{"class":68},[34,2568,381],{"class":48},[34,2570,322],{"class":40},[34,2572,2396],{"class":68},[34,2574,2341],{"class":48},[34,2576,322],{"class":40},[34,2578,2403],{"class":68},[34,2580,52],{"class":40},[34,2582,2583,2585,2587,2589],{"class":36,"line":133},[34,2584,419],{"class":40},[34,2586,422],{"class":44},[34,2588,426],{"class":425},[34,2590,52],{"class":40},[34,2592,2593,2595,2597],{"class":36,"line":138},[34,2594,456],{"class":40},[34,2596,370],{"class":44},[34,2598,52],{"class":40},[34,2600,2601,2603,2605],{"class":36,"line":160},[34,2602,466],{"class":40},[34,2604,313],{"class":44},[34,2606,52],{"class":40},[34,2608,2609,2611,2613],{"class":36,"line":165},[34,2610,476],{"class":40},[34,2612,370],{"class":44},[34,2614,52],{"class":40},[34,2616,2617,2619,2621],{"class":36,"line":196},[34,2618,261],{"class":40},[34,2620,278],{"class":44},[34,2622,52],{"class":40},[1249,2624,2625,530,2628,2261,2630,2632,2633,2635],{},[2468,2626,2627],{},"The lesson",[31,2629,2260],{},[31,2631,2264],{}," on an ancestor clip and scope the z-index of descendant elements. Teleport moves the modal DOM to ",[31,2634,2474],{},", escaping the parent's stacking context entirely.",[2637,2638,2639],"style",{},"html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .sMKGj, html code.shiki .sMKGj{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-github-dark:#FDAEB7;--shiki-github-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":29,"searchDepth":55,"depth":55,"links":2641},[2642,2645,2646,2647,2648,2649,2650],{"id":17,"depth":55,"text":18,"children":2643},[2644],{"id":493,"depth":72,"text":494},{"id":626,"depth":55,"text":627},{"id":879,"depth":55,"text":880},{"id":1681,"depth":55,"text":1682},{"id":2026,"depth":55,"text":2027},{"id":2131,"depth":55,"text":2132},{"id":2253,"depth":55,"text":2254},"Teleport target mounting, disabled prop for conditional teleporting, Suspense async orchestration with nested boundaries, error handling patterns, and SSR-safe teleport rendering.","md",{},"\u002Fvue\u002F16-teleport-and-suspense",{"title":5,"description":2651},"vue\u002F16-teleport-and-suspense","e-ew6gsDekXzTr8KVG7XRWi3HqreGJc6G3tFtaxtpkM",1789924655735]