[{"data":1,"prerenderedAt":358},["ShallowReactive",2],{"navigation_docs":3,"landing":108},[4,33,67],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":32},"Get Started","heroicons-outline:book-open","\u002Fget-started","2.get-started",[10],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":32},"Guide","akar-icons:book","\u002Fget-started\u002Fguide","2.get-started\u002F1.guide",[16,20,24,28],{"title":17,"path":18,"stem":19},"Concepts","\u002Fget-started\u002Fguide\u002Fconcepts","2.get-started\u002F1.guide\u002F1.concepts",{"title":21,"path":22,"stem":23},"Setup","\u002Fget-started\u002Fguide\u002Fsetup","2.get-started\u002F1.guide\u002F2.setup",{"title":25,"path":26,"stem":27},"Migration Guide","\u002Fget-started\u002Fguide\u002Fmigration-guide","2.get-started\u002F1.guide\u002F3.migration-guide",{"title":29,"path":30,"stem":31},"Types","\u002Fget-started\u002Fguide\u002Ftypes","2.get-started\u002F1.guide\u002F4.types",false,{"title":34,"icon":35,"path":36,"stem":37,"children":38,"page":32},"API","heroicons-outline:bookmark-alt","\u002Fapi","3.api",[39,53],{"title":40,"icon":41,"path":42,"stem":43,"children":44,"page":32},"Components","heroicons-outline:cube","\u002Fapi\u002Fcomponents","3.api\u002F1.components",[45,49],{"title":46,"path":47,"stem":48},"\u003CVueFinalModal>","\u002Fapi\u002Fcomponents\u002Fvue-final-modal","3.api\u002F1.components\u002F1.vue-final-modal",{"title":50,"path":51,"stem":52},"\u003CModalsContainer>","\u002Fapi\u002Fcomponents\u002Fmodals-container","3.api\u002F1.components\u002F2.modals-container",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":32},"Composables","heroicons-outline:switch-horizontal","\u002Fapi\u002Fcomposables","3.api\u002F2.composables",[59,63],{"title":60,"path":61,"stem":62},"useModal()","\u002Fapi\u002Fcomposables\u002Fuse-modal","3.api\u002F2.composables\u002F1.use-modal",{"title":64,"path":65,"stem":66},"useVfm()","\u002Fapi\u002Fcomposables\u002Fuse-vfm","3.api\u002F2.composables\u002F2.use-vfm",{"title":68,"path":69,"stem":70,"children":71,"page":32},"Use Cases","\u002Fuse-cases","4.use-cases",[72,76,80,84,88,92,96,100,104],{"title":73,"path":74,"stem":75},"Playground","\u002Fuse-cases\u002Fplayground","4.use-cases\u002F1.playground",{"title":77,"path":78,"stem":79},"Modal Keep Alive","\u002Fuse-cases\u002Fmodal-keep-alive","4.use-cases\u002F10.modal-keep-alive",{"title":81,"path":82,"stem":83},"Modal Confirm","\u002Fuse-cases\u002Fconfirm-modal","4.use-cases\u002F3.confirm-modal",{"title":85,"path":86,"stem":87},"Modal Nested","\u002Fuse-cases\u002Fmodal-nested","4.use-cases\u002F4.modal-nested",{"title":89,"path":90,"stem":91},"Modal Fullscreen","\u002Fuse-cases\u002Fmodal-fullscreen","4.use-cases\u002F5.modal-fullscreen",{"title":93,"path":94,"stem":95},"Modal Bottom","\u002Fuse-cases\u002Fmodal-bottom","4.use-cases\u002F6.modal-bottom",{"title":97,"path":98,"stem":99},"Modal Login Form","\u002Fuse-cases\u002Fmodal-login-form","4.use-cases\u002F7.modal-login-form",{"title":101,"path":102,"stem":103},"Modal Drag Resize","\u002Fuse-cases\u002Fmodal-drag-resize","4.use-cases\u002F8.modal-drag-resize",{"title":105,"path":106,"stem":107},"Modal Long Scroll","\u002Fuse-cases\u002Fmodal-long-scroll","4.use-cases\u002F9.modal-long-scroll",{"id":109,"title":110,"body":111,"description":351,"extension":352,"meta":353,"navigation":32,"path":354,"seo":355,"stem":356,"__hash__":357},"landing\u002Findex.md","Vue Final Modal",{"type":112,"value":113,"toc":349},"minimark",[114,139,207,345],[115,116,117,122,125],"u-page-hero",{},[118,119,121],"template",{"v-slot:title":120},"","Modals made easy for Vue Developers",[118,123,124],{"v-slot:description":120},"The most powerful yet most light-weight modal library for Vue 3.",[118,126,127,132],{"v-slot:links":120},[128,129,5],"u-button",{"size":130,"to":18,"trailing-icon":131},"xl","i-lucide-arrow-right",[128,133,138],{"size":130,"to":134,"color":135,"icon":136,"variant":137},"https:\u002F\u002Fgithub.com\u002Fvue-final\u002Fvue-final-modal","neutral","i-simple-icons-github","outline","Star on GitHub",[140,141,142,145],"u-page-section",{},[118,143,144],{"v-slot:title":120},"Powerful Features",[118,146,147,157,180,189,198],{"v-slot:features":120},[148,149,151,154],"u-page-feature",{"icon":150},"i-lucide-paintbrush",[118,152,153],{"v-slot:title":120},"Custom Styling",[118,155,156],{"v-slot:description":120},"Write your own CSS or bring libraries like Tailwind.",[148,158,160,163],{"icon":159},"i-lucide-code",[118,161,162],{"v-slot:title":120},"useModal",[118,164,165,166,179],{"v-slot:description":120},"Open and close modal programmatically with ",[167,168,171,175],"code",{"className":169,"language":170,"style":120},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts",[172,173,162],"span",{"class":174},"s2Zo4",[172,176,178],{"class":177},"sTEyZ","()"," composable function.",[148,181,183,186],{"icon":182},"i-lucide-server",[118,184,185],{"v-slot:title":120},"Nuxt Support",[118,187,188],{"v-slot:description":120},"A Nuxt module with auto-imports, and modals opened while a component sets up are part of the server HTML.",[148,190,192,195],{"icon":191},"i-lucide-file-type",[118,193,194],{"v-slot:title":120},"Written in TypeScript",[118,196,197],{"v-slot:description":120},"Fully typed for better DX.",[148,199,201,204],{"icon":200},"i-lucide-feather",[118,202,203],{"v-slot:title":120},"Tiny footprint",[118,205,206],{"v-slot:description":120},"Vue Final Modal focuses on the core functionality of modals, leaves the complex CSS up to the developer.",[140,208,209,212,219,324],{},[118,210,211],{"v-slot:title":120},"Contribution Guide",[118,213,214,215,218],{"v-slot:description":120},"Thank you to all the people who already contributed to ",[167,216,217],{},"vue-final-modal","!",[220,221,226],"pre",{"className":222,"code":223,"filename":224,"language":225,"meta":120,"style":120},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Install packages, which also builds vue-final-modal\npnpm install\n\n# Run both docs and viteplay\npnpm dev\n\n# Rebuild vue-final-modal on change\npnpm dev:vfm\n\n# Run docs: http:\u002F\u002Flocalhost:3000\u002F\npnpm dev:docs\n\n# Run viteplay: http:\u002F\u002Flocalhost:5173\u002F\npnpm dev:viteplay\n","pnpm","bash",[167,227,228,236,246,253,259,267,272,278,286,291,297,305,310,316],{"__ignoreMap":120},[172,229,232],{"class":230,"line":231},"line",1,[172,233,235],{"class":234},"sHwdD","# Install packages, which also builds vue-final-modal\n",[172,237,239,242],{"class":230,"line":238},2,[172,240,224],{"class":241},"sBMFI",[172,243,245],{"class":244},"sfazB"," install\n",[172,247,249],{"class":230,"line":248},3,[172,250,252],{"emptyLinePlaceholder":251},true,"\n",[172,254,256],{"class":230,"line":255},4,[172,257,258],{"class":234},"# Run both docs and viteplay\n",[172,260,262,264],{"class":230,"line":261},5,[172,263,224],{"class":241},[172,265,266],{"class":244}," dev\n",[172,268,270],{"class":230,"line":269},6,[172,271,252],{"emptyLinePlaceholder":251},[172,273,275],{"class":230,"line":274},7,[172,276,277],{"class":234},"# Rebuild vue-final-modal on change\n",[172,279,281,283],{"class":230,"line":280},8,[172,282,224],{"class":241},[172,284,285],{"class":244}," dev:vfm\n",[172,287,289],{"class":230,"line":288},9,[172,290,252],{"emptyLinePlaceholder":251},[172,292,294],{"class":230,"line":293},10,[172,295,296],{"class":234},"# Run docs: http:\u002F\u002Flocalhost:3000\u002F\n",[172,298,300,302],{"class":230,"line":299},11,[172,301,224],{"class":241},[172,303,304],{"class":244}," dev:docs\n",[172,306,308],{"class":230,"line":307},12,[172,309,252],{"emptyLinePlaceholder":251},[172,311,313],{"class":230,"line":312},13,[172,314,315],{"class":234},"# Run viteplay: http:\u002F\u002Flocalhost:5173\u002F\n",[172,317,319,321],{"class":230,"line":318},14,[172,320,224],{"class":241},[172,322,323],{"class":244}," dev:viteplay\n",[325,326,327,328,330,331,338,339,344],"p",{},"🚀 If you have any ideas for optimization of ",[167,329,217],{},", feel free to open ",[332,333,337],"a",{"href":334,"rel":335},"https:\u002F\u002Fgithub.com\u002Fvue-final\u002Fvue-final-modal\u002Fissues",[336],"nofollow","issues"," or ",[332,340,343],{"href":341,"rel":342},"https:\u002F\u002Fgithub.com\u002Fvue-final\u002Fvue-final-modal\u002Fpulls",[336],"pull requests",".",[346,347,348],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":120,"searchDepth":238,"depth":238,"links":350},[],"Vue Final Modal is the most powerful yet most light-weight modal library for Vue 3","md",{},"\u002F",{"title":121,"description":351},"index","v-EMEdoU2iPK7ci2aIdK4dfzUFtxyoptZncYtSQac4c",1791743375688]