[{"data":1,"prerenderedAt":667},["ShallowReactive",2],{"navigation_docs":3,"-resources-comparison":188,"-resources-comparison-surround":662},[4,9,27,52,101,130,163],{"title":5,"path":6,"stem":7,"icon":8},"Playground","\u002Fplayground","1.playground","i-lucide-flask-conical",{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fgetting-started","2.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fgetting-started\u002Fintroduction","2.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fgetting-started\u002Finstallation","2.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"First modal","\u002Fgetting-started\u002Ffirst-modal","2.getting-started\u002F3.first-modal",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Concepts","\u002Fconcepts","3.concepts",[32,36,40,44,48],{"title":33,"path":34,"stem":35},"Architecture","\u002Fconcepts\u002Farchitecture","3.concepts\u002F1.architecture",{"title":37,"path":38,"stem":39},"Imperative flow","\u002Fconcepts\u002Fimperative-flow","3.concepts\u002F2.imperative-flow",{"title":41,"path":42,"stem":43},"Stacking","\u002Fconcepts\u002Fstacking","3.concepts\u002F3.stacking",{"title":45,"path":46,"stem":47},"Groups","\u002Fconcepts\u002Fgroups","3.concepts\u002F4.groups",{"title":49,"path":50,"stem":51},"Headless primitives","\u002Fconcepts\u002Fheadless-primitives","3.concepts\u002F5.headless-primitives",{"title":53,"path":54,"stem":55,"children":56,"page":26},"Guide","\u002Fguide","4.guide",[57,61,65,69,73,77,81,85,89,93,97],{"title":58,"path":59,"stem":60},"Writing a modal","\u002Fguide\u002Fwriting-a-modal","4.guide\u002F01.writing-a-modal",{"title":62,"path":63,"stem":64},"Opening & closing","\u002Fguide\u002Fopening-and-closing","4.guide\u002F02.opening-and-closing",{"title":66,"path":67,"stem":68},"Props & results","\u002Fguide\u002Fpassing-props-and-results","4.guide\u002F03.passing-props-and-results",{"title":70,"path":71,"stem":72},"Behavior options","\u002Fguide\u002Fbehavior-options","4.guide\u002F04.behavior-options",{"title":74,"path":75,"stem":76},"Animations & styling","\u002Fguide\u002Fstyling-and-animations","4.guide\u002F05.styling-and-animations",{"title":78,"path":79,"stem":80},"useModal composable","\u002Fguide\u002Fusemodal-composable","4.guide\u002F06.usemodal-composable",{"title":82,"path":83,"stem":84},"Modal context","\u002Fguide\u002Fmodal-context","4.guide\u002F07.modal-context",{"title":86,"path":87,"stem":88},"Multiple targets","\u002Fguide\u002Fmultiple-targets","4.guide\u002F08.multiple-targets",{"title":90,"path":91,"stem":92},"Overlay","\u002Fguide\u002Foverlay","4.guide\u002F09.overlay",{"title":94,"path":95,"stem":96},"Async components","\u002Fguide\u002Fasync-components","4.guide\u002F10.async-components",{"title":98,"path":99,"stem":100},"TypeScript","\u002Fguide\u002Ftypescript","4.guide\u002F11.typescript",{"title":102,"path":103,"stem":104,"children":105,"page":26},"Recipes","\u002Frecipes","5.recipes",[106,110,114,118,122,126],{"title":107,"path":108,"stem":109},"Confirm dialog","\u002Frecipes\u002Fconfirm-dialog","5.recipes\u002F1.confirm-dialog",{"title":111,"path":112,"stem":113},"Form modal with validation","\u002Frecipes\u002Fform-modal-with-validation","5.recipes\u002F2.form-modal-with-validation",{"title":115,"path":116,"stem":117},"Image lightbox","\u002Frecipes\u002Fimage-lightbox","5.recipes\u002F3.image-lightbox",{"title":119,"path":120,"stem":121},"Command palette","\u002Frecipes\u002Fcommand-palette","5.recipes\u002F4.command-palette",{"title":123,"path":124,"stem":125},"Nested flows \u002F wizards","\u002Frecipes\u002Fnested-flows","5.recipes\u002F5.nested-flows",{"title":127,"path":128,"stem":129},"Global error modal","\u002Frecipes\u002Fglobal-error-modal","5.recipes\u002F6.global-error-modal",{"title":131,"path":132,"stem":133,"children":134,"page":26},"Api","\u002Fapi","6.api",[135,139,143,147,151,155,159],{"title":136,"path":137,"stem":138},"Functions","\u002Fapi\u002Ffunctions","6.api\u002F1.functions",{"title":140,"path":141,"stem":142},"Components","\u002Fapi\u002Fcomponents","6.api\u002F2.components",{"title":144,"path":145,"stem":146},"Composables","\u002Fapi\u002Fcomposables","6.api\u002F3.composables",{"title":148,"path":149,"stem":150},"Plugin","\u002Fapi\u002Fplugin","6.api\u002F4.plugin",{"title":152,"path":153,"stem":154},"State helpers","\u002Fapi\u002Fstate","6.api\u002F5.state",{"title":156,"path":157,"stem":158},"Global events","\u002Fapi\u002Fevents","6.api\u002F6.events",{"title":160,"path":161,"stem":162},"Types","\u002Fapi\u002Ftypes","6.api\u002F7.types",{"title":164,"path":165,"stem":166,"children":167,"page":26},"Resources","\u002Fresources","7.resources",[168,172,176,180,184],{"title":169,"path":170,"stem":171},"Migration from v1","\u002Fresources\u002Fmigration-from-v1","7.resources\u002F1.migration-from-v1",{"title":173,"path":174,"stem":175},"FAQ","\u002Fresources\u002Ffaq","7.resources\u002F2.faq",{"title":177,"path":178,"stem":179},"Troubleshooting","\u002Fresources\u002Ftroubleshooting","7.resources\u002F3.troubleshooting",{"title":181,"path":182,"stem":183},"Comparison","\u002Fresources\u002Fcomparison","7.resources\u002F4.comparison",{"title":185,"path":186,"stem":187},"Changelog","\u002Fresources\u002Fchangelog","7.resources\u002F5.changelog",{"id":189,"title":181,"body":190,"description":655,"extension":656,"links":657,"meta":658,"navigation":659,"path":182,"seo":660,"stem":183,"__hash__":661},"docs\u002F7.resources\u002F4.comparison.md",{"type":191,"value":192,"toc":643},"minimark",[193,197,202,471,474,481,493,504,507,509,513,522,527,533,535,539,542,551,554,556,561,575,592,598,600,607,610,633],[194,195,181],"h1",{"id":196},"comparison",[198,199,201],"h2",{"id":200},"feature-matrix","Feature matrix",[203,204,205,234],"table",{},[206,207,208],"thead",{},[209,210,211,215,218,221,224,227],"tr",{},[212,213,214],"th",{},"Feature",[212,216,217],{},"@kolirt\u002Fvue-modal v2",[212,219,220],{},"vue-final-modal",[212,222,223],{},"Headless UI Dialog",[212,225,226],{},"Vuetify \u002F PrimeVue",[212,228,229,230],{},"Native ",[231,232,233],"code",{},"\u003Cdialog>",[235,236,237,260,275,290,306,321,336,353,371,387,402,418,435,451],"tbody",{},[209,238,239,247,250,252,255,258],{},[240,241,242,243,246],"td",{},"Imperative ",[231,244,245],{},"openModal()"," API",[240,248,249],{},"✓",[240,251,249],{},[240,253,254],{},"✗",[240,256,257],{},"partial",[240,259,254],{},[209,261,262,265,267,269,271,273],{},[240,263,264],{},"Promise-based result",[240,266,249],{},[240,268,249],{},[240,270,254],{},[240,272,254],{},[240,274,254],{},[209,276,277,280,282,284,286,288],{},[240,278,279],{},"Modal groups \u002F named targets",[240,281,249],{},[240,283,254],{},[240,285,254],{},[240,287,254],{},[240,289,254],{},[209,291,292,295,297,299,302,304],{},[240,293,294],{},"TypeScript-safe groups",[240,296,249],{},[240,298,254],{},[240,300,301],{},"n\u002Fa",[240,303,254],{},[240,305,301],{},[209,307,308,311,313,315,317,319],{},[240,309,310],{},"Stack management",[240,312,249],{},[240,314,257],{},[240,316,254],{},[240,318,254],{},[240,320,254],{},[209,322,323,326,328,330,332,334],{},[240,324,325],{},"Scroll lock with shift compensation",[240,327,249],{},[240,329,249],{},[240,331,249],{},[240,333,249],{},[240,335,254],{},[209,337,338,341,344,346,348,350],{},[240,339,340],{},"Focus trap",[240,342,343],{},"✓ (via reka-ui)",[240,345,249],{},[240,347,249],{},[240,349,249],{},[240,351,352],{},"✓ (modern browsers)",[209,354,355,361,363,365,367,369],{},[240,356,357,358],{},"ARIA ",[231,359,360],{},"role=\"dialog\"",[240,362,249],{},[240,364,249],{},[240,366,249],{},[240,368,249],{},[240,370,249],{},[209,372,373,376,378,380,382,385],{},[240,374,375],{},"Headless (bring your own CSS)",[240,377,249],{},[240,379,249],{},[240,381,249],{},[240,383,384],{},"✗ (opinionated)",[240,386,254],{},[209,388,389,392,394,396,398,400],{},[240,390,391],{},"beforeClose guards",[240,393,249],{},[240,395,257],{},[240,397,254],{},[240,399,254],{},[240,401,254],{},[209,403,404,407,409,411,413,416],{},[240,405,406],{},"Async component support",[240,408,249],{},[240,410,249],{},[240,412,249],{},[240,414,415],{},"varies",[240,417,301],{},[209,419,420,423,426,428,430,432],{},[240,421,422],{},"SSR-safe (no open during hydration)",[240,424,425],{},"✓ (with care)",[240,427,425],{},[240,429,249],{},[240,431,249],{},[240,433,434],{},"limited",[209,436,437,440,442,445,447,449],{},[240,438,439],{},"Vue 2 support",[240,441,254],{},[240,443,444],{},"✓ (v2 version)",[240,446,254],{},[240,448,415],{},[240,450,301],{},[209,452,453,456,459,462,465,468],{},[240,454,455],{},"Bundle size",[240,457,458],{},"small + reka-ui peer",[240,460,461],{},"small",[240,463,464],{},"part of @headlessui\u002Fvue",[240,466,467],{},"large",[240,469,470],{},"0",[472,473],"hr",{},[198,475,477,478],{"id":476},"headless-ui-dialog","Headless UI ",[231,479,480],{},"Dialog",[482,483,484,485,488,489,492],"p",{},"Headless UI provides a ",[231,486,487],{},"\u003CDialog>"," component driven by ",[231,490,491],{},"v-model",". It handles focus trap and ARIA correctly and has zero styles.",[482,494,495,499,500,503],{},[496,497,498],"strong",{},"Where it differs."," There is no imperative API — you maintain ",[231,501,502],{},"isOpen"," ref and co-locate the dialog in the same template as the trigger. Each dialog is an isolated unit with no cross-dialog coordination. Opening a confirmation on top of a form modal requires wiring the state yourself. There is no promise-based result; you use callbacks or watchers.",[482,505,506],{},"Choose Headless UI when you have one or two dialogs per page and prefer a template-first, v-model-style API.",[472,508],{},[198,510,511],{"id":220},[231,512,220],{},[482,514,515,517,518,521],{},[231,516,220],{}," v4+ is close in spirit: imperative ",[231,519,520],{},"useModal()"," composable, promise-based open\u002Fclose, headless. It has a large user base and good documentation.",[482,523,524,526],{},[496,525,498],{}," It has no concept of named groups — all modals share one global layer. There is no TypeScript augmentation for group names. The scroll-lock implementation and focus management are provided by the package itself rather than delegating to a primitives library. Transitions are configured via component props rather than CSS. It also supports Vue 2 via a separate package.",[482,528,529,530,532],{},"Choose ",[231,531,220],{}," if you need Vue 2 support or prefer an approach without a primitives peer dep.",[472,534],{},[198,536,538],{"id":537},"vuetify-primevue-dialogs","Vuetify \u002F PrimeVue dialogs",[482,540,541],{},"Both design systems ship dialog components tightly coupled to their visual language. They include styles, transitions, themed overlays, and slot APIs integrated with the rest of the kit.",[482,543,544,547,548,550],{},[496,545,546],{},"Where they differ."," You cannot use these dialogs without adopting the full design system (or significant CSS overrides). The API is template-first (",[231,549,491],{}," \u002F event callbacks). Imperative usage is possible via globally injected methods in some versions, but is not the primary pattern. Stack management and group semantics are absent.",[482,552,553],{},"Choose these when your app is already on Vuetify or PrimeVue and you want dialogs that match your component library out of the box without any styling work.",[472,555],{},[198,557,229,559],{"id":558},"native-dialog",[231,560,233],{},[482,562,563,564,566,567,570,571,574],{},"The browser's ",[231,565,233],{}," element with ",[231,568,569],{},".showModal()"," provides a focus trap, Escape to close, and ",[231,572,573],{},"::backdrop"," styling — no library needed.",[482,576,577,579,580,583,584,587,588,591],{},[496,578,498],{}," No transitions (CSS ",[231,581,582],{},"@starting-style"," is still limited). No return value — you listen to the ",[231,585,586],{},"close"," event and read ",[231,589,590],{},"dialog.returnValue",". No stacking protocol; nesting multiple dialogs requires manual z-index management. No scroll lock on older browsers.",[482,593,594,595,597],{},"Choose native ",[231,596,233],{}," for a single simple modal in a project with minimal tooling requirements.",[472,599],{},[198,601,603,604],{"id":602},"when-to-choose-kolirtvue-modal","When to choose ",[231,605,606],{},"@kolirt\u002Fvue-modal",[482,608,609],{},"This library is a good fit when:",[611,612,613,617,624,627,630],"ul",{},[614,615,616],"li",{},"Your app has many dialogs distributed across pages and components (not co-located with their triggers).",[614,618,619,620,623],{},"Flows chain modals — a form opens a confirm, which opens a sub-dialog — and you want each ",[231,621,622],{},"await openModal(…)"," to stay linear.",[614,625,626],{},"TypeScript correctness on every modal call matters to your team.",[614,628,629],{},"You need independently styled and positioned modal stacks (group A at center, group B as a side drawer).",[614,631,632],{},"You want full control over markup and animation without fighting a framework's defaults.",[482,634,635,636,638,639,642],{},"It is probably not the right choice when you want a modal that closely mirrors a design system's visual style (use that system's dialog), or when your project has only one or two simple overlays (native ",[231,637,233],{}," or ",[231,640,641],{},"v-if"," is sufficient).",{"title":644,"searchDepth":645,"depth":645,"links":646},"",2,[647,648,649,650,651,653],{"id":200,"depth":645,"text":201},{"id":476,"depth":645,"text":223},{"id":220,"depth":645,"text":220},{"id":537,"depth":645,"text":538},{"id":558,"depth":645,"text":652},"Native \u003Cdialog>",{"id":602,"depth":645,"text":654},"When to choose @kolirt\u002Fvue-modal","How @kolirt\u002Fvue-modal compares to other dialog solutions for Vue 3.","md",null,{},true,{"title":181,"description":655},"I38O2gn4Z4tDV-bPacFvDhk-fk4zbU18OZDLNx09Me0",[663,665],{"title":177,"path":178,"stem":179,"description":664,"children":-1},"Common errors and problems in @kolirt\u002Fvue-modal v2, with causes and fixes.",{"title":185,"path":186,"stem":187,"description":666,"children":-1},"Version history for @kolirt\u002Fvue-modal.",1779523621862]