[{"data":1,"prerenderedAt":432},["ShallowReactive",2],{"navigation_docs":3,"-api-components-modals-container":108,"-api-components-modals-container-surround":428},[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":50,"body":110,"description":422,"extension":423,"links":424,"meta":425,"navigation":241,"path":51,"seo":426,"stem":52,"__hash__":427},"docs\u002F3.api\u002F1.components\u002F2.modals-container.md",{"type":111,"value":112,"toc":419},"minimark",[113,157,280,302,319,324,352,412,415],[114,115,116,134,135,142,143,151,152,156],"p",{},[117,118,122,127,131],"code",{"className":119,"language":120,"style":121},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[123,124,126],"span",{"class":125},"sTEyZ","\u003C",[123,128,130],{"class":129},"sBMFI","ModalsContainer",[123,132,133],{"class":125},">"," is a ",[136,137,141],"a",{"href":138,"rel":139},"https:\u002F\u002Fadamwathan.me\u002Frenderless-components-in-vuejs\u002F",[140],"nofollow","renderless component"," that is responsible for hosting the Vue instances of your dynamic modals. You don't need to add anything else to the ",[117,144,145,147,149],{"className":119,"language":120,"style":121},[123,146,126],{"class":125},[123,148,130],{"class":129},[123,150,133],{"class":125},". As long as you include it in your Vue tree ",[153,154,155],"strong",{},"once",", you can use dynamic modals:",[158,159,164],"pre",{"className":160,"code":161,"filename":162,"language":163,"meta":121,"style":121},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ModalsContainer } from 'vue-final-modal'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Your app -->\n  \u003CModalsContainer \u002F>\n\u003C\u002Ftemplate>\n","App.vue","vue",[117,165,166,198,226,236,243,253,260,271],{"__ignoreMap":121},[123,167,170,173,177,181,184,187,190,193,195],{"class":168,"line":169},"line",1,[123,171,126],{"class":172},"sMK4o",[123,174,176],{"class":175},"swJcz","script",[123,178,180],{"class":179},"spNyl"," setup",[123,182,183],{"class":179}," lang",[123,185,186],{"class":172},"=",[123,188,189],{"class":172},"\"",[123,191,120],{"class":192},"sfazB",[123,194,189],{"class":172},[123,196,197],{"class":172},">\n",[123,199,201,205,208,211,214,217,220,223],{"class":168,"line":200},2,[123,202,204],{"class":203},"s7zQu","import",[123,206,207],{"class":172}," {",[123,209,210],{"class":125}," ModalsContainer",[123,212,213],{"class":172}," }",[123,215,216],{"class":203}," from",[123,218,219],{"class":172}," '",[123,221,222],{"class":192},"vue-final-modal",[123,224,225],{"class":172},"'\n",[123,227,229,232,234],{"class":168,"line":228},3,[123,230,231],{"class":172},"\u003C\u002F",[123,233,176],{"class":175},[123,235,197],{"class":172},[123,237,239],{"class":168,"line":238},4,[123,240,242],{"emptyLinePlaceholder":241},true,"\n",[123,244,246,248,251],{"class":168,"line":245},5,[123,247,126],{"class":172},[123,249,250],{"class":175},"template",[123,252,197],{"class":172},[123,254,256],{"class":168,"line":255},6,[123,257,259],{"class":258},"sHwdD","  \u003C!-- Your app -->\n",[123,261,263,266,268],{"class":168,"line":262},7,[123,264,265],{"class":172},"  \u003C",[123,267,130],{"class":175},[123,269,270],{"class":172}," \u002F>\n",[123,272,274,276,278],{"class":168,"line":273},8,[123,275,231],{"class":172},[123,277,250],{"class":175},[123,279,197],{"class":172},[114,281,282,283,291,292,301],{},"In the component tree the modals are children of ",[117,284,285,287,289],{"className":119,"language":120,"style":121},[123,286,126],{"class":125},[123,288,130],{"class":129},[123,290,133],{"class":125},", so put it inside any component whose provided context the modal content needs, such as Nuxt UI's ",[117,293,294,296,299],{"className":119,"language":120,"style":121},[123,295,126],{"class":125},[123,297,298],{"class":129},"UApp",[123,300,133],{"class":125},".",[114,303,304,305,309,310,301],{},"Checkout the ",[136,306,308],{"href":307},"\u002Fapi\u002Fcomposables\u002Fuse-modal#prerequisite","Prerequisite section"," to learn how to use dynamic modals with ",[117,311,312,316],{"className":119,"language":120,"style":121},[123,313,315],{"class":314},"s2Zo4","useModal",[123,317,318],{"class":125},"()",[320,321,323],"h2",{"id":322},"advanced-isolated-instances","Advanced: isolated instances",[114,325,326,327,333,334,341,342,351],{},"For advanced scenarios (e.g. micro frontends) you can create an isolated provider with its own ",[117,328,329,331],{"className":119,"language":120,"style":121},[123,330,315],{"class":314},[123,332,318],{"class":125}," and ",[117,335,336,339],{"className":119,"language":120,"style":121},[123,337,338],{"class":314},"useVfm",[123,340,318],{"class":125}," that don't share state with the default one. ",[117,343,344,346,349],{"className":119,"language":120,"style":121},[123,345,126],{"class":125},[123,347,348],{"class":129},"ModalsProvider",[123,350,133],{"class":125}," provides the isolated context to its subtree and hosts the dynamic modals by itself:",[158,353,355],{"className":119,"code":354,"language":120,"meta":121,"style":121},"import { createModalsProvider } from 'vue-final-modal'\n\nconst { ModalsProvider, useModal, useVfm } = createModalsProvider()\n",[117,356,357,376,380],{"__ignoreMap":121},[123,358,359,361,363,366,368,370,372,374],{"class":168,"line":169},[123,360,204],{"class":203},[123,362,207],{"class":172},[123,364,365],{"class":125}," createModalsProvider",[123,367,213],{"class":172},[123,369,216],{"class":203},[123,371,219],{"class":172},[123,373,222],{"class":192},[123,375,225],{"class":172},[123,377,378],{"class":168,"line":200},[123,379,242],{"emptyLinePlaceholder":241},[123,381,382,385,387,390,393,396,398,401,404,407,409],{"class":168,"line":228},[123,383,384],{"class":179},"const",[123,386,207],{"class":172},[123,388,389],{"class":125}," ModalsProvider",[123,391,392],{"class":172},",",[123,394,395],{"class":125}," useModal",[123,397,392],{"class":172},[123,399,400],{"class":125}," useVfm ",[123,402,403],{"class":172},"}",[123,405,406],{"class":172}," =",[123,408,365],{"class":314},[123,410,411],{"class":125},"()\n",[413,414],"read-more",{"link":61},[416,417,418],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":121,"searchDepth":200,"depth":200,"links":420},[421],{"id":322,"depth":200,"text":323},"A container for the dynamic modals created by useModal().","md",null,{},{"title":50,"description":422},"2eDvczaStRPkoKOuTrL5UY_tolGL_DBb7SuU8icSeW0",[429,430],{"title":46,"path":47,"stem":48,"description":121,"children":-1},{"title":60,"path":61,"stem":62,"description":431,"children":-1},"A composable function to define a dynamic modal.",1791743379914]