[{"data":1,"prerenderedAt":338},["ShallowReactive",2],{"navigation_docs":3,"landing":188},[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":190,"body":191,"description":190,"extension":329,"meta":330,"navigation":331,"path":332,"seo":333,"stem":336,"__hash__":337},"landing\u002Findex.md","",{"type":192,"value":193,"toc":326},"minimark",[194,260],[195,196,199,202,206,209],"u-page-hero",{":ui":197,"orientation":198},"{\"container\":\"flex flex-col lg:grid py-10 sm:py-14 lg:py-20 gap-8 sm:gap-y-10 lg:gap-y-12\",\"body\":\"mt-6\",\"footer\":\"mt-6\"}","horizontal",[200,201],"live-demo",{},[203,204,205],"template",{"v-slot:title":190},"Modal magic for Vue3",[203,207,208],{"v-slot:description":190},"Open modals from any function, stack them as needed, and style them however you want. No template boilerplate, no manual state — just call and await.",[203,210,211,217,222,229],{"v-slot:links":190},[212,213,216],"u-button",{"size":214,"to":16,"trailing-icon":215},"xl","i-lucide-arrow-right","Get Started",[212,218,221],{"size":214,"to":6,"color":219,"icon":8,"variant":220},"neutral","subtle","Try the Playground",[212,223,228],{"size":214,"to":224,"color":219,"icon":225,"variant":226,"target":227},"https:\u002F\u002Fgithub.com\u002Fkolirt\u002Fvue-modal","i-simple-icons-github","outline","_blank","Open on GitHub",[230,231,239,245],"div",{"className":232},[233,234,235,236,237,238],"mt-4","flex","w-full","flex-col","items-start","gap-2",[230,240,244],{"className":241},[242,243],"text-sm","text-(--ui-text-muted)","If this package saved you time, you can buy me a coffee — it keeps me building.",[246,247,253],"a",{"className":248,"href":250,"rel":251,"target":227},[249],"inline-block","https:\u002F\u002Fbuymeacoffee.com\u002Fkolirt",[252],"nofollow",[254,255],"img",{":zoom":256,"alt":257,"src":258,"style":259},"false","Buy Me A Coffee","https:\u002F\u002Fcdn.buymeacoffee.com\u002Fbuttons\u002Fv2\u002Farial-yellow.png","height:40px;width:auto",[261,262,264,267,270],"u-page-section",{":ui":263},"{\"container\":\"flex flex-col lg:grid py-10 sm:py-14 lg:py-20 gap-6 sm:gap-10\",\"body\":\"mt-6\",\"footer\":\"mt-6\"}",[203,265,266],{"v-slot:title":190},"Why this library",[203,268,269],{"v-slot:description":190},"Less boilerplate, cleaner control flow, and room to bring your own styles.",[203,271,272,282,291,300,309,318],{"v-slot:features":190},[273,274,276,279],"u-page-feature",{"icon":275},"i-lucide-zap",[203,277,278],{"v-slot:title":190},"Open from JS\u002FTS",[203,280,281],{"v-slot:description":190},"Trigger modals from any function and await the user's response — a single call returns a typed promise with full TypeScript inference for props and result.",[273,283,285,288],{"icon":284},"i-lucide-code-2",[203,286,287],{"v-slot:title":190},"Less template boilerplate",[203,289,290],{"v-slot:description":190},"Skip placing every modal in your templates and wiring open\u002Fclose state by hand. Register one mount point and trigger any modal from code with a single call.",[273,292,294,297],{"icon":293},"i-lucide-layers",[203,295,296],{"v-slot:title":190},"Cascading modals",[203,298,299],{"v-slot:description":190},"Open multiple modals one after another while preserving their state and context. Layer a confirmation on top of a form without losing the form's data.",[273,301,303,306],{"icon":302},"i-lucide-palette",[203,304,305],{"v-slot:title":190},"Highly customizable",[203,307,308],{"v-slot:description":190},"Headless primitives with no imposed styles. Bring your own CSS, transitions, and animations — compose modals that fit any design system.",[273,310,312,315],{"icon":311},"i-lucide-folder-tree",[203,313,314],{"v-slot:title":190},"Modal groups",[203,316,317],{"v-slot:description":190},"Isolate flows with named groups — the main app stack, confirm dialogs, side panels — each rendering in its own mount point with its own queue.",[273,319,321,323],{"icon":320},"i-lucide-puzzle",[203,322,94],{"v-slot:title":190},[203,324,325],{"v-slot:description":190},"Open any Vue component, including async ones loaded on demand. Heavy modals stay out of your initial bundle and resolve through the same promise.",{"title":190,"searchDepth":327,"depth":327,"links":328},2,[],"md",{},true,"\u002F",{"title":334,"description":335},"@kolirt\u002Fvue-modal — Simple Vue 3 modal package","Easy to use and highly customizable Vue 3 modal package. Open and close modals dynamically from JS\u002FTS, stack cascading modals, and skip the template boilerplate.","index","w6c_5epiW-S0IoffryfolBzX6x_-h2sP44EZGrZonVI",1779523616326]