[{"data":1,"prerenderedAt":393},["ShallowReactive",2],{"navigation_docs":3,"-get-started-guide-concepts":108,"-get-started-guide-concepts-surround":390},[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":17,"body":110,"description":383,"extension":384,"links":385,"meta":386,"navigation":387,"path":18,"seo":388,"stem":19,"__hash__":389},"docs\u002F2.get-started\u002F1.guide\u002F1.concepts.md",{"type":111,"value":112,"toc":374},"minimark",[113,122,127,135,150,202,207,300,304,309,312,320,324,330,333,370],[114,115,116,117,121],"caution",{},"❗️ If you came from vue-final-modal 4.x, please check the ",[118,119,120],"a",{"href":26},"migration guide",".",[123,124,126],"h2",{"id":125},"what-is-vuefinalmodal","What is VueFinalModal?",[128,129,130,134],"p",{},[131,132,133],"code",{},"vue-final-modal"," is a modal library built specifically for Vue.js and as such it makes some assumptions and enforces \"best-practices\" for your modals while being versatile and customizable.",[128,136,137,139,140,146,147,149],{},[131,138,133],{}," is a collection of ",[118,141,145],{"href":142,"rel":143},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Freusability\u002Fcomposables.html#what-is-a-composable",[144],"nofollow","composables"," and Vue components, the main things that will be covered is how to use these components to build your own modal components and use them with ",[118,148,60],{"href":61}," composable function.",[128,151,152,166,167,179,180,185,186,192,193,201],{},[131,153,157,162],{"className":154,"language":155,"style":156},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[158,159,161],"span",{"class":160},"s2Zo4","useModal",[158,163,165],{"class":164},"sTEyZ","()"," and ",[131,168,169,172,176],{"className":154,"language":155,"style":156},[158,170,171],{"class":164},"\u003C",[158,173,175],{"class":174},"sBMFI","ModalsContainer",[158,177,178],{"class":164},">"," are built on ",[118,181,184],{"href":182,"rel":183},"https:\u002F\u002Fgithub.com\u002Fhunterliu1003\u002Fvue-use-template",[144],"vue-use-template",": a modal you open with ",[131,187,188,190],{"className":154,"language":155,"style":156},[158,189,161],{"class":160},[158,191,165],{"class":164}," is rendered inside ",[131,194,195,197,199],{"className":154,"language":155,"style":156},[158,196,171],{"class":164},[158,198,175],{"class":174},[158,200,178],{"class":164},", so it needs no place in your template.",[203,204,206],"h3",{"id":205},"built-in-features","Built-in features",[208,209,210,237,258,266,275,283,290,297],"ul",{},[211,212,213,221,222,166,229,236],"li",{},[118,214,215],{"href":61},[131,216,217,219],{"className":154,"language":155,"style":156},[158,218,161],{"class":160},[158,220,165],{"class":164}," composable to manage your modal programmatically. Its ",[131,223,224,227],{"className":154,"language":155,"style":156},[158,225,226],{"class":160},"open",[158,228,165],{"class":164},[131,230,231,234],{"className":154,"language":155,"style":156},[158,232,233],{"class":160},"close",[158,235,165],{"class":164}," return promises that always settle.",[211,238,239,240,244,245,257],{},"SSR (Nuxt) support: a modal opened while a component sets up is part of the server HTML and hydrates already open. ",[118,241,243],{"href":242},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#teleportto","Teleport"," your modals to ",[131,246,247,251,255],{"className":154,"language":155,"style":156},[158,248,250],{"class":249},"sMK4o","'",[158,252,254],{"class":253},"sfazB","body",[158,256,250],{"class":249}," by default.",[211,259,260,261,265],{},"A ",[118,262,264],{"href":263},"\u002Fget-started\u002Fguide\u002Fsetup#nuxt","Nuxt module"," that registers the plugin, adds the CSS and auto-imports the components and composables.",[211,267,268,269,274],{},"Trap keyboard focus within modal element (uses ",[118,270,273],{"href":271,"rel":272},"https:\u002F\u002Fgithub.com\u002Ffocus-trap\u002Ffocus-trap",[144],"focus-trap"," for best web accessibility).",[211,276,277,278,282],{},"Lock the scroll of the page, and of the scroll container a modal is rendered in, while the modal is opened (see ",[118,279,281],{"href":280},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#lockscroll","lockScroll prop",").",[211,284,285,286,282],{},"Full control to the zIndex of the nested modals (see ",[118,287,289],{"href":288},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#zindexfn","zIndexFn prop",[211,291,292,293,296],{},"Customizable ",[131,294,295],{},"\u003CTransition>"," for the modal content and overlay.",[211,298,299],{},"Tiny footprint! Vue Final Modal focuses on the core functionality of modals, leaves the complex CSS up to the developer.",[203,301,303],{"id":302},"a-styleless-component","A Styleless component",[128,305,306,308],{},[118,307,46],{"href":47}," is a styleless component that provides the features that modal required as much as possible but leave the layout as a slot to developer.",[128,310,311],{},"So you have to define the modal style by yourself.",[313,314,315,316,319],"note",{},"Follow the ",[118,317,318],{"href":22},"Setup section"," to learn how to use VueFinalModal.",[123,321,323],{"id":322},"you-might-not-need-vuefinalmodal","You Might Not Need VueFinalModal",[128,325,326,327,329],{},"Although I created ",[131,328,133],{},", I still try not to use it as much as possible.",[128,331,332],{},"Here are the articles that I highly recommended you to read before diving into VueFinalModal:",[208,334,335,342,349,356,363],{},[211,336,337],{},[118,338,341],{"href":339,"rel":340},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fpopups\u002F",[144],"Popups: 10 Problematic Trends and Alternatives",[211,343,344],{},[118,345,348],{"href":346,"rel":347},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmaking-hated-design-elements-work\u002F",[144],"Can Hated Design Elements Be Made to Work?",[211,350,351],{},[118,352,355],{"href":353,"rel":354},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmost-hated-advertising-techniques\u002F",[144],"The Most Hated Online Advertising Techniques",[211,357,358],{},[118,359,362],{"href":360,"rel":361},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmodal-nonmodal-dialog\u002F",[144],"Modal & Nonmodal Dialogs: When (& When Not) to Use Them",[211,364,365],{},[118,366,369],{"href":367,"rel":368},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fmodes\u002F",[144],"Modes in User Interfaces: When They Help and When They Hurt Users",[371,372,373],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":156,"searchDepth":375,"depth":375,"links":376},2,[377,382],{"id":125,"depth":375,"text":126,"children":378},[379,381],{"id":205,"depth":380,"text":206},3,{"id":302,"depth":380,"text":303},{"id":322,"depth":375,"text":323},"These are the core concepts you need to know about vue-final-modal and its approach to modals management.","md",null,{},true,{"title":17,"description":383},"1JE7ILeww0wUYZmzFFNC2_usihbW0P4O_bnRya0ES_4",[385,391],{"title":21,"path":22,"stem":23,"description":392,"children":-1},"How to start with Vue Final Modal, by creating a fresh new project or adding it to your Vue application.",1791743377016]