[{"data":1,"prerenderedAt":3853},["ShallowReactive",2],{"navigation_docs":3,"-get-started-guide-setup":108,"-get-started-guide-setup-surround":3848},[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":21,"body":110,"description":3842,"extension":3843,"links":3844,"meta":3845,"navigation":310,"path":22,"seo":3846,"stem":23,"__hash__":3847},"docs\u002F2.get-started\u002F1.guide\u002F2.setup.md",{"type":111,"value":112,"toc":3817},"minimark",[113,122,127,131,150,154,225,245,250,257,799,805,809,821,825,952,956,1018,1067,1080,1148,1155,1178,1269,1307,1364,1368,1375,1378,1394,1397,1403,1445,1449,1471,1475,1496,1511,2399,2403,2407,2426,2932,2936,2939,2951,2954,2978,2984,3221,3224,3227,3233,3498,3502,3537,3812,3814],[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},"play-online","Play online",[128,129,130],"p",{},"You can start playing with Vue Final Modal in your browser using our online sandboxes:",[132,133,134,143],"ul",{},[135,136,137],"li",{},[118,138,142],{"href":139,"rel":140},"https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fvue-final\u002Fvue-final-modal\u002Ftree\u002Fv5\u002Fexamples\u002Fvue3",[141],"nofollow","Play in Vue 3 on StackBlitz",[135,144,145],{},[118,146,149],{"href":147,"rel":148},"https:\u002F\u002Fstackblitz.com\u002Fgithub\u002Fvue-final\u002Fvue-final-modal\u002Ftree\u002Fv5\u002Fexamples\u002Fnuxt",[141],"Play in Nuxt on StackBlitz",[123,151,153],{"id":152},"installation","Installation",[155,156,157,195,211],"code-group",{},[158,159,165],"pre",{"className":160,"code":161,"filename":162,"language":163,"meta":164,"style":164},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","yarn add vue-final-modal vue-use-template @vueuse\u002Fcore @vueuse\u002Fintegrations focus-trap\n","yarn","bash","",[166,167,168],"code",{"__ignoreMap":164},[169,170,173,176,180,183,186,189,192],"span",{"class":171,"line":172},"line",1,[169,174,162],{"class":175},"sBMFI",[169,177,179],{"class":178},"sfazB"," add",[169,181,182],{"class":178}," vue-final-modal",[169,184,185],{"class":178}," vue-use-template",[169,187,188],{"class":178}," @vueuse\u002Fcore",[169,190,191],{"class":178}," @vueuse\u002Fintegrations",[169,193,194],{"class":178}," focus-trap\n",[158,196,199],{"className":160,"code":197,"filename":198,"language":163,"meta":164,"style":164},"npm install vue-final-modal\n","npm",[166,200,201],{"__ignoreMap":164},[169,202,203,205,208],{"class":171,"line":172},[169,204,198],{"class":175},[169,206,207],{"class":178}," install",[169,209,210],{"class":178}," vue-final-modal\n",[158,212,215],{"className":160,"code":213,"filename":214,"language":163,"meta":164,"style":164},"pnpm add vue-final-modal\n","pnpm",[166,216,217],{"__ignoreMap":164},[169,218,219,221,223],{"class":171,"line":172},[169,220,214],{"class":175},[169,222,179],{"class":178},[169,224,210],{"class":178},[128,226,227,228,233,234,233,237,240,241,244],{},"Vue Final Modal needs Vue 3.3 or later. ",[118,229,232],{"href":230,"rel":231},"https:\u002F\u002Fgithub.com\u002Fhunterliu1003\u002Fvue-use-template",[141],"vue-use-template",", ",[166,235,236],{},"@vueuse\u002Fcore",[166,238,239],{},"@vueuse\u002Fintegrations"," and ",[166,242,243],{},"focus-trap"," are peer dependencies: npm and pnpm install them for you, Yarn does not, so the Yarn command lists them.",[246,247,249],"h3",{"id":248},"from-a-cdn","From a CDN",[128,251,252,253,256],{},"The UMD build defines a global ",[166,254,255],{},"VueFinalModal"," and reads the globals of its peer dependencies, so load them first, in this order. vue-use-template and the scroll lock are bundled into it.",[158,258,263],{"className":259,"code":260,"filename":261,"language":262,"meta":164,"style":164},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fvue-final-modal@5\u002Fdist\u002Fstyle.css\">\n\n\u003Cdiv id=\"app\">\n  \u003Cbutton @click=\"() => open()\">Open Modal\u003C\u002Fbutton>\n  \u003Cmodals-container>\u003C\u002Fmodals-container>\n\u003C\u002Fdiv>\n\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fvue@3\u002Fdist\u002Fvue.global.prod.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fshared@15\u002Fdist\u002Findex.iife.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fcore@15\u002Fdist\u002Findex.iife.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Ftabbable@6\u002Fdist\u002Findex.umd.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Ffocus-trap@8\u002Fdist\u002Ffocus-trap.umd.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fintegrations@15\u002Fdist\u002FuseFocusTrap.iife.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fvue-final-modal@5\">\u003C\u002Fscript>\n\u003Cscript>\n  const { createApp } = Vue\n  const { ModalsContainer, createVfm, useModal } = VueFinalModal\n\n  createApp({\n    components: { ModalsContainer },\n    setup() {\n      const { open } = useModal({\n        slots: { default: '\u003Cp>The content of the modal\u003C\u002Fp>' },\n      })\n      return { open }\n    },\n  }).use(createVfm()).mount('#app')\n\u003C\u002Fscript>\n","index.html","html",[166,264,265,305,312,334,369,384,393,398,424,448,472,496,520,544,568,577,598,626,631,644,661,673,696,723,732,746,752,790],{"__ignoreMap":164},[169,266,267,271,275,279,282,285,288,290,293,295,297,300,302],{"class":171,"line":172},[169,268,270],{"class":269},"sMK4o","\u003C",[169,272,274],{"class":273},"swJcz","link",[169,276,278],{"class":277},"spNyl"," rel",[169,280,281],{"class":269},"=",[169,283,284],{"class":269},"\"",[169,286,287],{"class":178},"stylesheet",[169,289,284],{"class":269},[169,291,292],{"class":277}," href",[169,294,281],{"class":269},[169,296,284],{"class":269},[169,298,299],{"class":178},"https:\u002F\u002Funpkg.com\u002Fvue-final-modal@5\u002Fdist\u002Fstyle.css",[169,301,284],{"class":269},[169,303,304],{"class":269},">\n",[169,306,308],{"class":171,"line":307},2,[169,309,311],{"emptyLinePlaceholder":310},true,"\n",[169,313,315,317,320,323,325,327,330,332],{"class":171,"line":314},3,[169,316,270],{"class":269},[169,318,319],{"class":273},"div",[169,321,322],{"class":277}," id",[169,324,281],{"class":269},[169,326,284],{"class":269},[169,328,329],{"class":178},"app",[169,331,284],{"class":269},[169,333,304],{"class":269},[169,335,337,340,343,346,348,350,353,355,358,362,365,367],{"class":171,"line":336},4,[169,338,339],{"class":269},"  \u003C",[169,341,342],{"class":273},"button",[169,344,345],{"class":277}," @click",[169,347,281],{"class":269},[169,349,284],{"class":269},[169,351,352],{"class":178},"() => open()",[169,354,284],{"class":269},[169,356,357],{"class":269},">",[169,359,361],{"class":360},"sTEyZ","Open Modal",[169,363,364],{"class":269},"\u003C\u002F",[169,366,342],{"class":273},[169,368,304],{"class":269},[169,370,372,374,377,380,382],{"class":171,"line":371},5,[169,373,339],{"class":269},[169,375,376],{"class":273},"modals-container",[169,378,379],{"class":269},">\u003C\u002F",[169,381,376],{"class":273},[169,383,304],{"class":269},[169,385,387,389,391],{"class":171,"line":386},6,[169,388,364],{"class":269},[169,390,319],{"class":273},[169,392,304],{"class":269},[169,394,396],{"class":171,"line":395},7,[169,397,311],{"emptyLinePlaceholder":310},[169,399,401,403,406,409,411,413,416,418,420,422],{"class":171,"line":400},8,[169,402,270],{"class":269},[169,404,405],{"class":273},"script",[169,407,408],{"class":277}," src",[169,410,281],{"class":269},[169,412,284],{"class":269},[169,414,415],{"class":178},"https:\u002F\u002Funpkg.com\u002Fvue@3\u002Fdist\u002Fvue.global.prod.js",[169,417,284],{"class":269},[169,419,379],{"class":269},[169,421,405],{"class":273},[169,423,304],{"class":269},[169,425,427,429,431,433,435,437,440,442,444,446],{"class":171,"line":426},9,[169,428,270],{"class":269},[169,430,405],{"class":273},[169,432,408],{"class":277},[169,434,281],{"class":269},[169,436,284],{"class":269},[169,438,439],{"class":178},"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fshared@15\u002Fdist\u002Findex.iife.min.js",[169,441,284],{"class":269},[169,443,379],{"class":269},[169,445,405],{"class":273},[169,447,304],{"class":269},[169,449,451,453,455,457,459,461,464,466,468,470],{"class":171,"line":450},10,[169,452,270],{"class":269},[169,454,405],{"class":273},[169,456,408],{"class":277},[169,458,281],{"class":269},[169,460,284],{"class":269},[169,462,463],{"class":178},"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fcore@15\u002Fdist\u002Findex.iife.min.js",[169,465,284],{"class":269},[169,467,379],{"class":269},[169,469,405],{"class":273},[169,471,304],{"class":269},[169,473,475,477,479,481,483,485,488,490,492,494],{"class":171,"line":474},11,[169,476,270],{"class":269},[169,478,405],{"class":273},[169,480,408],{"class":277},[169,482,281],{"class":269},[169,484,284],{"class":269},[169,486,487],{"class":178},"https:\u002F\u002Funpkg.com\u002Ftabbable@6\u002Fdist\u002Findex.umd.min.js",[169,489,284],{"class":269},[169,491,379],{"class":269},[169,493,405],{"class":273},[169,495,304],{"class":269},[169,497,499,501,503,505,507,509,512,514,516,518],{"class":171,"line":498},12,[169,500,270],{"class":269},[169,502,405],{"class":273},[169,504,408],{"class":277},[169,506,281],{"class":269},[169,508,284],{"class":269},[169,510,511],{"class":178},"https:\u002F\u002Funpkg.com\u002Ffocus-trap@8\u002Fdist\u002Ffocus-trap.umd.min.js",[169,513,284],{"class":269},[169,515,379],{"class":269},[169,517,405],{"class":273},[169,519,304],{"class":269},[169,521,523,525,527,529,531,533,536,538,540,542],{"class":171,"line":522},13,[169,524,270],{"class":269},[169,526,405],{"class":273},[169,528,408],{"class":277},[169,530,281],{"class":269},[169,532,284],{"class":269},[169,534,535],{"class":178},"https:\u002F\u002Funpkg.com\u002F@vueuse\u002Fintegrations@15\u002Fdist\u002FuseFocusTrap.iife.min.js",[169,537,284],{"class":269},[169,539,379],{"class":269},[169,541,405],{"class":273},[169,543,304],{"class":269},[169,545,547,549,551,553,555,557,560,562,564,566],{"class":171,"line":546},14,[169,548,270],{"class":269},[169,550,405],{"class":273},[169,552,408],{"class":277},[169,554,281],{"class":269},[169,556,284],{"class":269},[169,558,559],{"class":178},"https:\u002F\u002Funpkg.com\u002Fvue-final-modal@5",[169,561,284],{"class":269},[169,563,379],{"class":269},[169,565,405],{"class":273},[169,567,304],{"class":269},[169,569,571,573,575],{"class":171,"line":570},15,[169,572,270],{"class":269},[169,574,405],{"class":273},[169,576,304],{"class":269},[169,578,580,583,586,589,592,595],{"class":171,"line":579},16,[169,581,582],{"class":277},"  const",[169,584,585],{"class":269}," {",[169,587,588],{"class":360}," createApp ",[169,590,591],{"class":269},"}",[169,593,594],{"class":269}," =",[169,596,597],{"class":360}," Vue\n",[169,599,601,603,605,608,611,614,616,619,621,623],{"class":171,"line":600},17,[169,602,582],{"class":277},[169,604,585],{"class":269},[169,606,607],{"class":360}," ModalsContainer",[169,609,610],{"class":269},",",[169,612,613],{"class":360}," createVfm",[169,615,610],{"class":269},[169,617,618],{"class":360}," useModal ",[169,620,591],{"class":269},[169,622,594],{"class":269},[169,624,625],{"class":360}," VueFinalModal\n",[169,627,629],{"class":171,"line":628},18,[169,630,311],{"emptyLinePlaceholder":310},[169,632,634,638,641],{"class":171,"line":633},19,[169,635,637],{"class":636},"s2Zo4","  createApp",[169,639,640],{"class":360},"(",[169,642,643],{"class":269},"{\n",[169,645,647,650,653,655,658],{"class":171,"line":646},20,[169,648,649],{"class":273},"    components",[169,651,652],{"class":269},":",[169,654,585],{"class":269},[169,656,657],{"class":360}," ModalsContainer ",[169,659,660],{"class":269},"},\n",[169,662,664,667,670],{"class":171,"line":663},21,[169,665,666],{"class":273},"    setup",[169,668,669],{"class":269},"()",[169,671,672],{"class":269}," {\n",[169,674,676,679,681,684,687,689,692,694],{"class":171,"line":675},22,[169,677,678],{"class":277},"      const",[169,680,585],{"class":269},[169,682,683],{"class":360}," open",[169,685,686],{"class":269}," }",[169,688,594],{"class":269},[169,690,691],{"class":636}," useModal",[169,693,640],{"class":273},[169,695,643],{"class":269},[169,697,699,702,704,706,709,711,714,717,720],{"class":171,"line":698},23,[169,700,701],{"class":273},"        slots",[169,703,652],{"class":269},[169,705,585],{"class":269},[169,707,708],{"class":273}," default",[169,710,652],{"class":269},[169,712,713],{"class":269}," '",[169,715,716],{"class":178},"\u003Cp>The content of the modal\u003C\u002Fp>",[169,718,719],{"class":269},"'",[169,721,722],{"class":269}," },\n",[169,724,726,729],{"class":171,"line":725},24,[169,727,728],{"class":269},"      }",[169,730,731],{"class":273},")\n",[169,733,735,739,741,743],{"class":171,"line":734},25,[169,736,738],{"class":737},"s7zQu","      return",[169,740,585],{"class":269},[169,742,683],{"class":360},[169,744,745],{"class":269}," }\n",[169,747,749],{"class":171,"line":748},26,[169,750,751],{"class":269},"    },\n",[169,753,755,758,761,763,766,768,771,774,776,779,781,783,786,788],{"class":171,"line":754},27,[169,756,757],{"class":269},"  }",[169,759,760],{"class":360},")",[169,762,121],{"class":269},[169,764,765],{"class":636},"use",[169,767,640],{"class":360},[169,769,770],{"class":636},"createVfm",[169,772,773],{"class":360},"())",[169,775,121],{"class":269},[169,777,778],{"class":636},"mount",[169,780,640],{"class":360},[169,782,719],{"class":269},[169,784,785],{"class":178},"#app",[169,787,719],{"class":269},[169,789,731],{"class":360},[169,791,793,795,797],{"class":171,"line":792},28,[169,794,364],{"class":269},[169,796,405],{"class":273},[169,798,304],{"class":269},[128,800,801,802,121],{},"VueUse 10 to 13 serve the same files from the package root, without ",[166,803,804],{},"dist\u002F",[123,806,808],{"id":807},"plugin-registration","Plugin registration",[128,810,811,812,820],{},"Create the plugin with ",[166,813,816,818],{"className":814,"language":815,"style":164},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts",[169,817,770],{"class":636},[169,819,669],{"class":360}," and register it. Vue Final Modal keeps a shared context that is provided to every modal through provide\u002Finject.",[246,822,824],{"id":823},"vue-3","Vue 3",[158,826,829],{"className":814,"code":827,"filename":828,"language":815,"meta":164,"style":164},"import { createApp } from 'vue'\nimport { createVfm } from 'vue-final-modal'\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\n\nconst vfm = createVfm()\napp.use(vfm).mount('#app')\n","main.ts",[166,830,831,854,873,890,894,909,913,927],{"__ignoreMap":164},[169,832,833,836,838,841,843,846,848,851],{"class":171,"line":172},[169,834,835],{"class":737},"import",[169,837,585],{"class":269},[169,839,840],{"class":360}," createApp",[169,842,686],{"class":269},[169,844,845],{"class":737}," from",[169,847,713],{"class":269},[169,849,850],{"class":178},"vue",[169,852,853],{"class":269},"'\n",[169,855,856,858,860,862,864,866,868,871],{"class":171,"line":307},[169,857,835],{"class":737},[169,859,585],{"class":269},[169,861,613],{"class":360},[169,863,686],{"class":269},[169,865,845],{"class":737},[169,867,713],{"class":269},[169,869,870],{"class":178},"vue-final-modal",[169,872,853],{"class":269},[169,874,875,877,880,883,885,888],{"class":171,"line":314},[169,876,835],{"class":737},[169,878,879],{"class":360}," App ",[169,881,882],{"class":737},"from",[169,884,713],{"class":269},[169,886,887],{"class":178},".\u002FApp.vue",[169,889,853],{"class":269},[169,891,892],{"class":171,"line":336},[169,893,311],{"emptyLinePlaceholder":310},[169,895,896,899,902,904,906],{"class":171,"line":371},[169,897,898],{"class":277},"const",[169,900,901],{"class":360}," app ",[169,903,281],{"class":269},[169,905,840],{"class":636},[169,907,908],{"class":360},"(App)\n",[169,910,911],{"class":171,"line":386},[169,912,311],{"emptyLinePlaceholder":310},[169,914,915,917,920,922,924],{"class":171,"line":395},[169,916,898],{"class":277},[169,918,919],{"class":360}," vfm ",[169,921,281],{"class":269},[169,923,613],{"class":636},[169,925,926],{"class":360},"()\n",[169,928,929,931,933,935,938,940,942,944,946,948,950],{"class":171,"line":400},[169,930,329],{"class":360},[169,932,121],{"class":269},[169,934,765],{"class":636},[169,936,937],{"class":360},"(vfm)",[169,939,121],{"class":269},[169,941,778],{"class":636},[169,943,640],{"class":360},[169,945,719],{"class":269},[169,947,785],{"class":178},[169,949,719],{"class":269},[169,951,731],{"class":360},[246,953,955],{"id":954},"nuxt","Nuxt",[128,957,958,959,233,967,233,976,233,983,233,990,233,997,233,1004,240,1011,652],{},"Install the Nuxt module. It registers the plugin and the required CSS for you, and auto-imports ",[166,960,961,963,965],{"className":814,"language":815,"style":164},[169,962,270],{"class":360},[169,964,255],{"class":175},[169,966,357],{"class":360},[166,968,969,971,974],{"className":814,"language":815,"style":164},[169,970,270],{"class":360},[169,972,973],{"class":175},"ModalsContainer",[169,975,357],{"class":360},[166,977,978,981],{"className":814,"language":815,"style":164},[169,979,980],{"class":636},"useModal",[169,982,669],{"class":360},[166,984,985,988],{"className":814,"language":815,"style":164},[169,986,987],{"class":636},"useModalSlot",[169,989,669],{"class":360},[166,991,992,995],{"className":814,"language":815,"style":164},[169,993,994],{"class":636},"useVfm",[169,996,669],{"class":360},[166,998,999,1002],{"className":814,"language":815,"style":164},[169,1000,1001],{"class":636},"useVfmAttrs",[169,1003,669],{"class":360},[166,1005,1006,1009],{"className":814,"language":815,"style":164},[169,1007,1008],{"class":636},"defineModal",[169,1010,669],{"class":360},[166,1012,1013,1016],{"className":814,"language":815,"style":164},[169,1014,1015],{"class":636},"defineTemplate",[169,1017,669],{"class":360},[158,1019,1022],{"className":814,"code":1020,"filename":1021,"language":815,"meta":164,"style":164},"export default defineNuxtConfig({\n  modules: ['vue-final-modal\u002Fnuxt'],\n})\n","nuxt.config.ts",[166,1023,1024,1038,1061],{"__ignoreMap":164},[169,1025,1026,1029,1031,1034,1036],{"class":171,"line":172},[169,1027,1028],{"class":737},"export",[169,1030,708],{"class":737},[169,1032,1033],{"class":636}," defineNuxtConfig",[169,1035,640],{"class":360},[169,1037,643],{"class":269},[169,1039,1040,1043,1045,1048,1050,1053,1055,1058],{"class":171,"line":307},[169,1041,1042],{"class":273},"  modules",[169,1044,652],{"class":269},[169,1046,1047],{"class":360}," [",[169,1049,719],{"class":269},[169,1051,1052],{"class":178},"vue-final-modal\u002Fnuxt",[169,1054,719],{"class":269},[169,1056,1057],{"class":360},"]",[169,1059,1060],{"class":269},",\n",[169,1062,1063,1065],{"class":171,"line":314},[169,1064,591],{"class":269},[169,1066,731],{"class":360},[128,1068,1069,1070,1076,1077,1079],{},"If another module auto-imports the same names, such as a ",[166,1071,1072,1074],{"className":814,"language":815,"style":164},[169,1073,980],{"class":636},[169,1075,669],{"class":360}," of its own, turn the auto-imports off and import them from ",[166,1078,870],{}," yourself:",[158,1081,1083],{"className":814,"code":1082,"filename":1021,"language":815,"meta":164,"style":164},"export default defineNuxtConfig({\n  modules: ['vue-final-modal\u002Fnuxt'],\n  vueFinalModal: {\n    autoImports: false,\n  },\n})\n",[166,1084,1085,1097,1115,1124,1137,1142],{"__ignoreMap":164},[169,1086,1087,1089,1091,1093,1095],{"class":171,"line":172},[169,1088,1028],{"class":737},[169,1090,708],{"class":737},[169,1092,1033],{"class":636},[169,1094,640],{"class":360},[169,1096,643],{"class":269},[169,1098,1099,1101,1103,1105,1107,1109,1111,1113],{"class":171,"line":307},[169,1100,1042],{"class":273},[169,1102,652],{"class":269},[169,1104,1047],{"class":360},[169,1106,719],{"class":269},[169,1108,1052],{"class":178},[169,1110,719],{"class":269},[169,1112,1057],{"class":360},[169,1114,1060],{"class":269},[169,1116,1117,1120,1122],{"class":171,"line":314},[169,1118,1119],{"class":273},"  vueFinalModal",[169,1121,652],{"class":269},[169,1123,672],{"class":269},[169,1125,1126,1129,1131,1135],{"class":171,"line":336},[169,1127,1128],{"class":273},"    autoImports",[169,1130,652],{"class":269},[169,1132,1134],{"class":1133},"sfNiH"," false",[169,1136,1060],{"class":269},[169,1138,1139],{"class":171,"line":371},[169,1140,1141],{"class":269},"  },\n",[169,1143,1144,1146],{"class":171,"line":386},[169,1145,591],{"class":269},[169,1147,731],{"class":360},[123,1149,1151,1152,1154],{"id":1150},"add-modalscontainer-to-your-app","Add ",[166,1153,50],{}," to your app",[128,1156,1157,1165,1166,1172,1173,1177],{},[166,1158,1159,1161,1163],{"className":814,"language":815,"style":164},[169,1160,270],{"class":360},[169,1162,973],{"class":175},[169,1164,357],{"class":360}," renders the dynamic modals created by ",[166,1167,1168,1170],{"className":814,"language":815,"style":164},[169,1169,980],{"class":636},[169,1171,669],{"class":360},". You don't need to add anything else to it, and you only need to put it ",[1174,1175,1176],"strong",{},"once"," in your app:",[158,1179,1183],{"className":1180,"code":1181,"filename":1182,"language":850,"meta":164,"style":164},"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",[166,1184,1185,1207,1225,1233,1237,1246,1252,1261],{"__ignoreMap":164},[169,1186,1187,1189,1191,1194,1197,1199,1201,1203,1205],{"class":171,"line":172},[169,1188,270],{"class":269},[169,1190,405],{"class":273},[169,1192,1193],{"class":277}," setup",[169,1195,1196],{"class":277}," lang",[169,1198,281],{"class":269},[169,1200,284],{"class":269},[169,1202,815],{"class":178},[169,1204,284],{"class":269},[169,1206,304],{"class":269},[169,1208,1209,1211,1213,1215,1217,1219,1221,1223],{"class":171,"line":307},[169,1210,835],{"class":737},[169,1212,585],{"class":269},[169,1214,607],{"class":360},[169,1216,686],{"class":269},[169,1218,845],{"class":737},[169,1220,713],{"class":269},[169,1222,870],{"class":178},[169,1224,853],{"class":269},[169,1226,1227,1229,1231],{"class":171,"line":314},[169,1228,364],{"class":269},[169,1230,405],{"class":273},[169,1232,304],{"class":269},[169,1234,1235],{"class":171,"line":336},[169,1236,311],{"emptyLinePlaceholder":310},[169,1238,1239,1241,1244],{"class":171,"line":371},[169,1240,270],{"class":269},[169,1242,1243],{"class":273},"template",[169,1245,304],{"class":269},[169,1247,1248],{"class":171,"line":386},[169,1249,1251],{"class":1250},"sHwdD","  \u003C!-- Your app -->\n",[169,1253,1254,1256,1258],{"class":171,"line":395},[169,1255,339],{"class":269},[169,1257,973],{"class":273},[169,1259,1260],{"class":269}," \u002F>\n",[169,1262,1263,1265,1267],{"class":171,"line":400},[169,1264,364],{"class":269},[169,1266,1243],{"class":273},[169,1268,304],{"class":269},[128,1270,1271,1272,1280,1281,1287,1288,1297,1298,1306],{},"In the component tree the modals are children of ",[166,1273,1274,1276,1278],{"className":814,"language":815,"style":164},[169,1275,270],{"class":360},[169,1277,973],{"class":175},[169,1279,357],{"class":360},", so their content can inject what its ancestors provide, not what the component calling ",[166,1282,1283,1285],{"className":814,"language":815,"style":164},[169,1284,980],{"class":636},[169,1286,669],{"class":360}," provides. If your app wraps its content in a component that provides context, such as Nuxt UI's ",[166,1289,1290,1292,1295],{"className":814,"language":815,"style":164},[169,1291,270],{"class":360},[169,1293,1294],{"class":175},"UApp",[169,1296,357],{"class":360},", put ",[166,1299,1300,1302,1304],{"className":814,"language":815,"style":164},[169,1301,270],{"class":360},[169,1303,973],{"class":175},[169,1305,357],{"class":360}," inside it:",[158,1308,1311],{"className":1180,"code":1309,"filename":1310,"language":850,"meta":164,"style":164},"\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage \u002F>\n    \u003CModalsContainer \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n","app.vue",[166,1312,1313,1321,1329,1339,1347,1356],{"__ignoreMap":164},[169,1314,1315,1317,1319],{"class":171,"line":172},[169,1316,270],{"class":269},[169,1318,1243],{"class":273},[169,1320,304],{"class":269},[169,1322,1323,1325,1327],{"class":171,"line":307},[169,1324,339],{"class":269},[169,1326,1294],{"class":273},[169,1328,304],{"class":269},[169,1330,1331,1334,1337],{"class":171,"line":314},[169,1332,1333],{"class":269},"    \u003C",[169,1335,1336],{"class":273},"NuxtPage",[169,1338,1260],{"class":269},[169,1340,1341,1343,1345],{"class":171,"line":336},[169,1342,1333],{"class":269},[169,1344,973],{"class":273},[169,1346,1260],{"class":269},[169,1348,1349,1352,1354],{"class":171,"line":371},[169,1350,1351],{"class":269},"  \u003C\u002F",[169,1353,1294],{"class":273},[169,1355,304],{"class":269},[169,1357,1358,1360,1362],{"class":171,"line":386},[169,1359,364],{"class":269},[169,1361,1243],{"class":273},[169,1363,304],{"class":269},[123,1365,1367],{"id":1366},"import-required-css","Import required CSS",[128,1369,1370,1371,1374],{},"Vue Final Modal has a tiny amount of required CSS (gzipped 0.49kb). All classes have a ",[166,1372,1373],{},".vfm-"," prefix, so you don't have to worry about any CSS pollution.",[246,1376,824],{"id":1377},"vue-3-1",[158,1379,1381],{"className":814,"code":1380,"filename":828,"language":815,"meta":164,"style":164},"import 'vue-final-modal\u002Fstyle.css'\n",[166,1382,1383],{"__ignoreMap":164},[169,1384,1385,1387,1389,1392],{"class":171,"line":172},[169,1386,835],{"class":737},[169,1388,713],{"class":269},[169,1390,1391],{"class":178},"vue-final-modal\u002Fstyle.css",[169,1393,853],{"class":269},[246,1395,955],{"id":1396},"nuxt-1",[128,1398,1399,1400,1402],{},"The ",[166,1401,1052],{}," module adds the CSS for you. If you don't use the module, add it manually:",[158,1404,1406],{"className":814,"code":1405,"filename":1021,"language":815,"meta":164,"style":164},"export default defineNuxtConfig({\n  css: ['vue-final-modal\u002Fstyle.css'],\n})\n",[166,1407,1408,1420,1439],{"__ignoreMap":164},[169,1409,1410,1412,1414,1416,1418],{"class":171,"line":172},[169,1411,1028],{"class":737},[169,1413,708],{"class":737},[169,1415,1033],{"class":636},[169,1417,640],{"class":360},[169,1419,643],{"class":269},[169,1421,1422,1425,1427,1429,1431,1433,1435,1437],{"class":171,"line":307},[169,1423,1424],{"class":273},"  css",[169,1426,652],{"class":269},[169,1428,1047],{"class":360},[169,1430,719],{"class":269},[169,1432,1391],{"class":178},[169,1434,719],{"class":269},[169,1436,1057],{"class":360},[169,1438,1060],{"class":269},[169,1440,1441,1443],{"class":171,"line":314},[169,1442,591],{"class":269},[169,1444,731],{"class":360},[123,1446,1448],{"id":1447},"style-a-modal","Style a modal",[128,1450,1451,1452,1461,1462,1470],{},"Define a styled modal for yourself. Here will create a styled ",[166,1453,1454,1456,1459],{"className":814,"language":815,"style":164},[169,1455,270],{"class":360},[169,1457,1458],{"class":175},"ModalConfirm",[169,1460,357],{"class":360}," with ",[166,1463,1464,1466,1468],{"className":814,"language":815,"style":164},[169,1465,270],{"class":360},[169,1467,255],{"class":175},[169,1469,357],{"class":360}," as an example.",[246,1472,1474],{"id":1473},"plain-css","Plain CSS",[128,1476,1477,1478,1487,1488,121],{},"Use plain CSS to define a ",[166,1479,1480,1482,1485],{"className":814,"language":815,"style":164},[169,1481,270],{"class":360},[169,1483,1484],{"class":175},"ModalConfirmPlainCss",[169,1486,357],{"class":360}," component with ",[166,1489,1490,1492,1494],{"className":814,"language":815,"style":164},[169,1491,270],{"class":360},[169,1493,255],{"class":175},[169,1495,357],{"class":360},[1497,1498,1499,1500,1503,1504,121],"warning",{},"The examples below pass the modal content as a string slot, which is rendered as raw HTML like ",[166,1501,1502],{},"v-html",". Never pass user-provided content this way, see ",[118,1505,1507,1508],{"href":1506},"\u002Fapi\u002Fcomposables\u002Fuse-modal#with-string","Passing Slots with ",[166,1509,1510],{},"String",[132,1512,1513],{},[135,1514,1515,1516],{},"Basic example",[1517,1518,1519,1522],"code-preview",{},[1520,1521],"modal-confirm-plain-css-preview",{},[1243,1523,1524],{"v-slot:code":164},[155,1525,1526,1771],{},[158,1527,1530],{"className":1180,"code":1528,"filename":1529,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { useModal } from 'vue-final-modal'\n  import ModalConfirmPlainCss from '.\u002FModalConfirmPlainCss.vue'\n\n  const { open, close } = useModal({\n    component: ModalConfirmPlainCss,\n    attrs: {\n      title: 'Hello World!',\n      onConfirm() {\n        close()\n      },\n    },\n    slots: {\n      default: '\u003Cp>The content of the modal\u003C\u002Fp>',\n    },\n  })\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"() => open()\">\n      Open Modal\n    \u003C\u002FVButton>\n  \u003C\u002Ftemplate>\n","Preview.vue",[166,1531,1532,1552,1571,1587,1591,1614,1626,1635,1651,1660,1667,1672,1676,1685,1700,1704,1710,1718,1722,1730,1749,1754,1763],{"__ignoreMap":164},[169,1533,1534,1536,1538,1540,1542,1544,1546,1548,1550],{"class":171,"line":172},[169,1535,339],{"class":269},[169,1537,405],{"class":273},[169,1539,1193],{"class":277},[169,1541,1196],{"class":277},[169,1543,281],{"class":269},[169,1545,284],{"class":269},[169,1547,815],{"class":178},[169,1549,284],{"class":269},[169,1551,304],{"class":269},[169,1553,1554,1557,1559,1561,1563,1565,1567,1569],{"class":171,"line":307},[169,1555,1556],{"class":737},"  import",[169,1558,585],{"class":269},[169,1560,691],{"class":360},[169,1562,686],{"class":269},[169,1564,845],{"class":737},[169,1566,713],{"class":269},[169,1568,870],{"class":178},[169,1570,853],{"class":269},[169,1572,1573,1575,1578,1580,1582,1585],{"class":171,"line":314},[169,1574,1556],{"class":737},[169,1576,1577],{"class":360}," ModalConfirmPlainCss ",[169,1579,882],{"class":737},[169,1581,713],{"class":269},[169,1583,1584],{"class":178},".\u002FModalConfirmPlainCss.vue",[169,1586,853],{"class":269},[169,1588,1589],{"class":171,"line":336},[169,1590,311],{"emptyLinePlaceholder":310},[169,1592,1593,1595,1597,1599,1601,1604,1606,1608,1610,1612],{"class":171,"line":371},[169,1594,582],{"class":277},[169,1596,585],{"class":269},[169,1598,683],{"class":360},[169,1600,610],{"class":269},[169,1602,1603],{"class":360}," close ",[169,1605,591],{"class":269},[169,1607,594],{"class":269},[169,1609,691],{"class":636},[169,1611,640],{"class":360},[169,1613,643],{"class":269},[169,1615,1616,1619,1621,1624],{"class":171,"line":386},[169,1617,1618],{"class":273},"    component",[169,1620,652],{"class":269},[169,1622,1623],{"class":360}," ModalConfirmPlainCss",[169,1625,1060],{"class":269},[169,1627,1628,1631,1633],{"class":171,"line":395},[169,1629,1630],{"class":273},"    attrs",[169,1632,652],{"class":269},[169,1634,672],{"class":269},[169,1636,1637,1640,1642,1644,1647,1649],{"class":171,"line":400},[169,1638,1639],{"class":273},"      title",[169,1641,652],{"class":269},[169,1643,713],{"class":269},[169,1645,1646],{"class":178},"Hello World!",[169,1648,719],{"class":269},[169,1650,1060],{"class":269},[169,1652,1653,1656,1658],{"class":171,"line":426},[169,1654,1655],{"class":273},"      onConfirm",[169,1657,669],{"class":269},[169,1659,672],{"class":269},[169,1661,1662,1665],{"class":171,"line":450},[169,1663,1664],{"class":636},"        close",[169,1666,926],{"class":273},[169,1668,1669],{"class":171,"line":474},[169,1670,1671],{"class":269},"      },\n",[169,1673,1674],{"class":171,"line":498},[169,1675,751],{"class":269},[169,1677,1678,1681,1683],{"class":171,"line":522},[169,1679,1680],{"class":273},"    slots",[169,1682,652],{"class":269},[169,1684,672],{"class":269},[169,1686,1687,1690,1692,1694,1696,1698],{"class":171,"line":546},[169,1688,1689],{"class":273},"      default",[169,1691,652],{"class":269},[169,1693,713],{"class":269},[169,1695,716],{"class":178},[169,1697,719],{"class":269},[169,1699,1060],{"class":269},[169,1701,1702],{"class":171,"line":570},[169,1703,751],{"class":269},[169,1705,1706,1708],{"class":171,"line":579},[169,1707,757],{"class":269},[169,1709,731],{"class":360},[169,1711,1712,1714,1716],{"class":171,"line":600},[169,1713,1351],{"class":269},[169,1715,405],{"class":273},[169,1717,304],{"class":269},[169,1719,1720],{"class":171,"line":628},[169,1721,311],{"emptyLinePlaceholder":310},[169,1723,1724,1726,1728],{"class":171,"line":633},[169,1725,339],{"class":269},[169,1727,1243],{"class":273},[169,1729,304],{"class":269},[169,1731,1732,1734,1737,1739,1741,1743,1745,1747],{"class":171,"line":646},[169,1733,1333],{"class":269},[169,1735,1736],{"class":273},"VButton",[169,1738,345],{"class":277},[169,1740,281],{"class":269},[169,1742,284],{"class":269},[169,1744,352],{"class":178},[169,1746,284],{"class":269},[169,1748,304],{"class":269},[169,1750,1751],{"class":171,"line":663},[169,1752,1753],{"class":360},"      Open Modal\n",[169,1755,1756,1759,1761],{"class":171,"line":675},[169,1757,1758],{"class":269},"    \u003C\u002F",[169,1760,1736],{"class":273},[169,1762,304],{"class":269},[169,1764,1765,1767,1769],{"class":171,"line":698},[169,1766,1351],{"class":269},[169,1768,1243],{"class":273},[169,1770,304],{"class":269},[158,1772,1775],{"className":1180,"code":1773,"filename":1774,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { VueFinalModal } from 'vue-final-modal'\n\n  defineProps\u003C{\n    title?: string\n  }>()\n\n  const emit = defineEmits\u003C{\n    (e: 'confirm'): void\n  }>()\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      class=\"confirm-modal\"\n      content-class=\"confirm-modal-content\"\n      overlay-transition=\"vfm-fade\"\n      content-transition=\"vfm-fade\"\n    >\n      \u003Ch1>{{ title }}\u003C\u002Fh1>\n      \u003Cslot \u002F>\n      \u003Cbutton @click=\"emit('confirm')\">\n        Confirm\n      \u003C\u002Fbutton>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n\n  \u003Cstyle>\n  .confirm-modal {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .confirm-modal-content {\n    display: flex;\n    flex-direction: column;\n    padding: 1rem;\n    background: #fff;\n    border-radius: 0.5rem;\n  }\n  .confirm-modal-content > * + *{\n    margin: 0.5rem 0;\n  }\n  .confirm-modal-content h1 {\n    font-size: 1.375rem;\n  }\n  .confirm-modal-content button {\n    margin: 0.25rem 0 0 auto;\n    padding: 0 8px;\n    border: 1px solid;\n    border-radius: 0.5rem;\n  }\n  .dark .confirm-modal-content {\n    background: #000;\n  }\n  \u003C\u002Fstyle>\n","ModalConfirmPlainCss.vue",[166,1776,1777,1797,1816,1820,1828,1839,1846,1850,1864,1888,1894,1902,1906,1914,1921,1936,1950,1964,1977,1982,2001,2010,2029,2034,2043,2051,2059,2063,2072,2082,2097,2110,2122,2128,2137,2148,2161,2175,2191,2204,2209,2229,2244,2249,2261,2274,2279,2291,2310,2324,2340,2351,2356,2371,2385,2390],{"__ignoreMap":164},[169,1778,1779,1781,1783,1785,1787,1789,1791,1793,1795],{"class":171,"line":172},[169,1780,339],{"class":269},[169,1782,405],{"class":273},[169,1784,1193],{"class":277},[169,1786,1196],{"class":277},[169,1788,281],{"class":269},[169,1790,284],{"class":269},[169,1792,815],{"class":178},[169,1794,284],{"class":269},[169,1796,304],{"class":269},[169,1798,1799,1801,1803,1806,1808,1810,1812,1814],{"class":171,"line":307},[169,1800,1556],{"class":737},[169,1802,585],{"class":269},[169,1804,1805],{"class":360}," VueFinalModal",[169,1807,686],{"class":269},[169,1809,845],{"class":737},[169,1811,713],{"class":269},[169,1813,870],{"class":178},[169,1815,853],{"class":269},[169,1817,1818],{"class":171,"line":314},[169,1819,311],{"emptyLinePlaceholder":310},[169,1821,1822,1825],{"class":171,"line":336},[169,1823,1824],{"class":636},"  defineProps",[169,1826,1827],{"class":269},"\u003C{\n",[169,1829,1830,1833,1836],{"class":171,"line":371},[169,1831,1832],{"class":273},"    title",[169,1834,1835],{"class":269},"?:",[169,1837,1838],{"class":175}," string\n",[169,1840,1841,1844],{"class":171,"line":386},[169,1842,1843],{"class":269},"  }>",[169,1845,926],{"class":360},[169,1847,1848],{"class":171,"line":395},[169,1849,311],{"emptyLinePlaceholder":310},[169,1851,1852,1854,1857,1859,1862],{"class":171,"line":400},[169,1853,582],{"class":277},[169,1855,1856],{"class":360}," emit ",[169,1858,281],{"class":269},[169,1860,1861],{"class":636}," defineEmits",[169,1863,1827],{"class":269},[169,1865,1866,1869,1873,1875,1877,1880,1882,1885],{"class":171,"line":426},[169,1867,1868],{"class":269},"    (",[169,1870,1872],{"class":1871},"sHdIc","e",[169,1874,652],{"class":269},[169,1876,713],{"class":269},[169,1878,1879],{"class":178},"confirm",[169,1881,719],{"class":269},[169,1883,1884],{"class":269},"):",[169,1886,1887],{"class":175}," void\n",[169,1889,1890,1892],{"class":171,"line":450},[169,1891,1843],{"class":269},[169,1893,926],{"class":360},[169,1895,1896,1898,1900],{"class":171,"line":474},[169,1897,1351],{"class":269},[169,1899,405],{"class":273},[169,1901,304],{"class":269},[169,1903,1904],{"class":171,"line":498},[169,1905,311],{"emptyLinePlaceholder":310},[169,1907,1908,1910,1912],{"class":171,"line":522},[169,1909,339],{"class":269},[169,1911,1243],{"class":273},[169,1913,304],{"class":269},[169,1915,1916,1918],{"class":171,"line":546},[169,1917,1333],{"class":269},[169,1919,1920],{"class":273},"VueFinalModal\n",[169,1922,1923,1926,1928,1930,1933],{"class":171,"line":570},[169,1924,1925],{"class":277},"      class",[169,1927,281],{"class":269},[169,1929,284],{"class":269},[169,1931,1932],{"class":178},"confirm-modal",[169,1934,1935],{"class":269},"\"\n",[169,1937,1938,1941,1943,1945,1948],{"class":171,"line":579},[169,1939,1940],{"class":277},"      content-class",[169,1942,281],{"class":269},[169,1944,284],{"class":269},[169,1946,1947],{"class":178},"confirm-modal-content",[169,1949,1935],{"class":269},[169,1951,1952,1955,1957,1959,1962],{"class":171,"line":600},[169,1953,1954],{"class":277},"      overlay-transition",[169,1956,281],{"class":269},[169,1958,284],{"class":269},[169,1960,1961],{"class":178},"vfm-fade",[169,1963,1935],{"class":269},[169,1965,1966,1969,1971,1973,1975],{"class":171,"line":628},[169,1967,1968],{"class":277},"      content-transition",[169,1970,281],{"class":269},[169,1972,284],{"class":269},[169,1974,1961],{"class":178},[169,1976,1935],{"class":269},[169,1978,1979],{"class":171,"line":633},[169,1980,1981],{"class":269},"    >\n",[169,1983,1984,1987,1990,1992,1995,1997,1999],{"class":171,"line":646},[169,1985,1986],{"class":269},"      \u003C",[169,1988,1989],{"class":273},"h1",[169,1991,357],{"class":269},[169,1993,1994],{"class":360},"{{ title }}",[169,1996,364],{"class":269},[169,1998,1989],{"class":273},[169,2000,304],{"class":269},[169,2002,2003,2005,2008],{"class":171,"line":663},[169,2004,1986],{"class":269},[169,2006,2007],{"class":273},"slot",[169,2009,1260],{"class":269},[169,2011,2012,2014,2016,2018,2020,2022,2025,2027],{"class":171,"line":675},[169,2013,1986],{"class":269},[169,2015,342],{"class":273},[169,2017,345],{"class":277},[169,2019,281],{"class":269},[169,2021,284],{"class":269},[169,2023,2024],{"class":178},"emit('confirm')",[169,2026,284],{"class":269},[169,2028,304],{"class":269},[169,2030,2031],{"class":171,"line":698},[169,2032,2033],{"class":360},"        Confirm\n",[169,2035,2036,2039,2041],{"class":171,"line":725},[169,2037,2038],{"class":269},"      \u003C\u002F",[169,2040,342],{"class":273},[169,2042,304],{"class":269},[169,2044,2045,2047,2049],{"class":171,"line":734},[169,2046,1758],{"class":269},[169,2048,255],{"class":273},[169,2050,304],{"class":269},[169,2052,2053,2055,2057],{"class":171,"line":748},[169,2054,1351],{"class":269},[169,2056,1243],{"class":273},[169,2058,304],{"class":269},[169,2060,2061],{"class":171,"line":754},[169,2062,311],{"emptyLinePlaceholder":310},[169,2064,2065,2067,2070],{"class":171,"line":792},[169,2066,339],{"class":269},[169,2068,2069],{"class":273},"style",[169,2071,304],{"class":269},[169,2073,2075,2078,2080],{"class":171,"line":2074},29,[169,2076,2077],{"class":269},"  .",[169,2079,1932],{"class":175},[169,2081,672],{"class":269},[169,2083,2085,2089,2091,2094],{"class":171,"line":2084},30,[169,2086,2088],{"class":2087},"sqsOY","    display",[169,2090,652],{"class":269},[169,2092,2093],{"class":360}," flex",[169,2095,2096],{"class":269},";\n",[169,2098,2100,2103,2105,2108],{"class":171,"line":2099},31,[169,2101,2102],{"class":2087},"    justify-content",[169,2104,652],{"class":269},[169,2106,2107],{"class":360}," center",[169,2109,2096],{"class":269},[169,2111,2113,2116,2118,2120],{"class":171,"line":2112},32,[169,2114,2115],{"class":2087},"    align-items",[169,2117,652],{"class":269},[169,2119,2107],{"class":360},[169,2121,2096],{"class":269},[169,2123,2125],{"class":171,"line":2124},33,[169,2126,2127],{"class":269},"  }\n",[169,2129,2131,2133,2135],{"class":171,"line":2130},34,[169,2132,2077],{"class":269},[169,2134,1947],{"class":175},[169,2136,672],{"class":269},[169,2138,2140,2142,2144,2146],{"class":171,"line":2139},35,[169,2141,2088],{"class":2087},[169,2143,652],{"class":269},[169,2145,2093],{"class":360},[169,2147,2096],{"class":269},[169,2149,2151,2154,2156,2159],{"class":171,"line":2150},36,[169,2152,2153],{"class":2087},"    flex-direction",[169,2155,652],{"class":269},[169,2157,2158],{"class":360}," column",[169,2160,2096],{"class":269},[169,2162,2164,2167,2169,2173],{"class":171,"line":2163},37,[169,2165,2166],{"class":2087},"    padding",[169,2168,652],{"class":269},[169,2170,2172],{"class":2171},"sbssI"," 1rem",[169,2174,2096],{"class":269},[169,2176,2178,2181,2183,2186,2189],{"class":171,"line":2177},38,[169,2179,2180],{"class":2087},"    background",[169,2182,652],{"class":269},[169,2184,2185],{"class":269}," #",[169,2187,2188],{"class":360},"fff",[169,2190,2096],{"class":269},[169,2192,2194,2197,2199,2202],{"class":171,"line":2193},39,[169,2195,2196],{"class":2087},"    border-radius",[169,2198,652],{"class":269},[169,2200,2201],{"class":2171}," 0.5rem",[169,2203,2096],{"class":269},[169,2205,2207],{"class":171,"line":2206},40,[169,2208,2127],{"class":269},[169,2210,2212,2214,2216,2219,2222,2225,2227],{"class":171,"line":2211},41,[169,2213,2077],{"class":269},[169,2215,1947],{"class":175},[169,2217,2218],{"class":269}," >",[169,2220,2221],{"class":175}," *",[169,2223,2224],{"class":269}," +",[169,2226,2221],{"class":175},[169,2228,643],{"class":269},[169,2230,2232,2235,2237,2239,2242],{"class":171,"line":2231},42,[169,2233,2234],{"class":2087},"    margin",[169,2236,652],{"class":269},[169,2238,2201],{"class":2171},[169,2240,2241],{"class":2171}," 0",[169,2243,2096],{"class":269},[169,2245,2247],{"class":171,"line":2246},43,[169,2248,2127],{"class":269},[169,2250,2252,2254,2256,2259],{"class":171,"line":2251},44,[169,2253,2077],{"class":269},[169,2255,1947],{"class":175},[169,2257,2258],{"class":175}," h1",[169,2260,672],{"class":269},[169,2262,2264,2267,2269,2272],{"class":171,"line":2263},45,[169,2265,2266],{"class":2087},"    font-size",[169,2268,652],{"class":269},[169,2270,2271],{"class":2171}," 1.375rem",[169,2273,2096],{"class":269},[169,2275,2277],{"class":171,"line":2276},46,[169,2278,2127],{"class":269},[169,2280,2282,2284,2286,2289],{"class":171,"line":2281},47,[169,2283,2077],{"class":269},[169,2285,1947],{"class":175},[169,2287,2288],{"class":175}," button",[169,2290,672],{"class":269},[169,2292,2294,2296,2298,2301,2303,2305,2308],{"class":171,"line":2293},48,[169,2295,2234],{"class":2087},[169,2297,652],{"class":269},[169,2299,2300],{"class":2171}," 0.25rem",[169,2302,2241],{"class":2171},[169,2304,2241],{"class":2171},[169,2306,2307],{"class":360}," auto",[169,2309,2096],{"class":269},[169,2311,2313,2315,2317,2319,2322],{"class":171,"line":2312},49,[169,2314,2166],{"class":2087},[169,2316,652],{"class":269},[169,2318,2241],{"class":2171},[169,2320,2321],{"class":2171}," 8px",[169,2323,2096],{"class":269},[169,2325,2327,2330,2332,2335,2338],{"class":171,"line":2326},50,[169,2328,2329],{"class":2087},"    border",[169,2331,652],{"class":269},[169,2333,2334],{"class":2171}," 1px",[169,2336,2337],{"class":360}," solid",[169,2339,2096],{"class":269},[169,2341,2343,2345,2347,2349],{"class":171,"line":2342},51,[169,2344,2196],{"class":2087},[169,2346,652],{"class":269},[169,2348,2201],{"class":2171},[169,2350,2096],{"class":269},[169,2352,2354],{"class":171,"line":2353},52,[169,2355,2127],{"class":269},[169,2357,2359,2361,2364,2367,2369],{"class":171,"line":2358},53,[169,2360,2077],{"class":269},[169,2362,2363],{"class":175},"dark",[169,2365,2366],{"class":269}," .",[169,2368,1947],{"class":175},[169,2370,672],{"class":269},[169,2372,2374,2376,2378,2380,2383],{"class":171,"line":2373},54,[169,2375,2180],{"class":2087},[169,2377,652],{"class":269},[169,2379,2185],{"class":269},[169,2381,2382],{"class":360},"000",[169,2384,2096],{"class":269},[169,2386,2388],{"class":171,"line":2387},55,[169,2389,2127],{"class":269},[169,2391,2393,2395,2397],{"class":171,"line":2392},56,[169,2394,1351],{"class":269},[169,2396,2069],{"class":273},[169,2398,304],{"class":269},[246,2400,2402],{"id":2401},"atomic-css-recommended","Atomic CSS (Recommended)",[2404,2405,2406],"note",{},"Highly recommended to use TailwindCSS or UnoCSS to define your modals.",[128,2408,2409,2410,1487,2418,121],{},"Let's take TailwindCSS for example to define a ",[166,2411,2412,2414,2416],{"className":814,"language":815,"style":164},[169,2413,270],{"class":360},[169,2415,1458],{"class":175},[169,2417,357],{"class":360},[166,2419,2420,2422,2424],{"className":814,"language":815,"style":164},[169,2421,270],{"class":360},[169,2423,255],{"class":175},[169,2425,357],{"class":360},[132,2427,2428],{},[135,2429,1515,2430],{},[1517,2431,2432,2435],{},[2433,2434],"modal-confirm-preview",{},[1243,2436,2437],{"v-slot:code":164},[155,2438,2439,2670],{},[158,2440,2442],{"className":1180,"code":2441,"filename":1529,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { useModal } from 'vue-final-modal'\n  import ModalConfirm from '.\u002FModalConfirm.vue'\n\n  const { open, close } = useModal({\n    component: ModalConfirm,\n    attrs: {\n      title: 'Hello World!',\n      onConfirm() {\n        close()\n      },\n    },\n    slots: {\n      default: '\u003Cp>UseModal: The content of the modal\u003C\u002Fp>',\n    },\n  })\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"() => open()\">\n      Open Modal\n    \u003C\u002FVButton>\n  \u003C\u002Ftemplate>\n",[166,2443,2444,2464,2482,2498,2502,2524,2535,2543,2557,2565,2571,2575,2579,2587,2602,2606,2612,2620,2624,2632,2650,2654,2662],{"__ignoreMap":164},[169,2445,2446,2448,2450,2452,2454,2456,2458,2460,2462],{"class":171,"line":172},[169,2447,339],{"class":269},[169,2449,405],{"class":273},[169,2451,1193],{"class":277},[169,2453,1196],{"class":277},[169,2455,281],{"class":269},[169,2457,284],{"class":269},[169,2459,815],{"class":178},[169,2461,284],{"class":269},[169,2463,304],{"class":269},[169,2465,2466,2468,2470,2472,2474,2476,2478,2480],{"class":171,"line":307},[169,2467,1556],{"class":737},[169,2469,585],{"class":269},[169,2471,691],{"class":360},[169,2473,686],{"class":269},[169,2475,845],{"class":737},[169,2477,713],{"class":269},[169,2479,870],{"class":178},[169,2481,853],{"class":269},[169,2483,2484,2486,2489,2491,2493,2496],{"class":171,"line":314},[169,2485,1556],{"class":737},[169,2487,2488],{"class":360}," ModalConfirm ",[169,2490,882],{"class":737},[169,2492,713],{"class":269},[169,2494,2495],{"class":178},".\u002FModalConfirm.vue",[169,2497,853],{"class":269},[169,2499,2500],{"class":171,"line":336},[169,2501,311],{"emptyLinePlaceholder":310},[169,2503,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522],{"class":171,"line":371},[169,2505,582],{"class":277},[169,2507,585],{"class":269},[169,2509,683],{"class":360},[169,2511,610],{"class":269},[169,2513,1603],{"class":360},[169,2515,591],{"class":269},[169,2517,594],{"class":269},[169,2519,691],{"class":636},[169,2521,640],{"class":360},[169,2523,643],{"class":269},[169,2525,2526,2528,2530,2533],{"class":171,"line":386},[169,2527,1618],{"class":273},[169,2529,652],{"class":269},[169,2531,2532],{"class":360}," ModalConfirm",[169,2534,1060],{"class":269},[169,2536,2537,2539,2541],{"class":171,"line":395},[169,2538,1630],{"class":273},[169,2540,652],{"class":269},[169,2542,672],{"class":269},[169,2544,2545,2547,2549,2551,2553,2555],{"class":171,"line":400},[169,2546,1639],{"class":273},[169,2548,652],{"class":269},[169,2550,713],{"class":269},[169,2552,1646],{"class":178},[169,2554,719],{"class":269},[169,2556,1060],{"class":269},[169,2558,2559,2561,2563],{"class":171,"line":426},[169,2560,1655],{"class":273},[169,2562,669],{"class":269},[169,2564,672],{"class":269},[169,2566,2567,2569],{"class":171,"line":450},[169,2568,1664],{"class":636},[169,2570,926],{"class":273},[169,2572,2573],{"class":171,"line":474},[169,2574,1671],{"class":269},[169,2576,2577],{"class":171,"line":498},[169,2578,751],{"class":269},[169,2580,2581,2583,2585],{"class":171,"line":522},[169,2582,1680],{"class":273},[169,2584,652],{"class":269},[169,2586,672],{"class":269},[169,2588,2589,2591,2593,2595,2598,2600],{"class":171,"line":546},[169,2590,1689],{"class":273},[169,2592,652],{"class":269},[169,2594,713],{"class":269},[169,2596,2597],{"class":178},"\u003Cp>UseModal: The content of the modal\u003C\u002Fp>",[169,2599,719],{"class":269},[169,2601,1060],{"class":269},[169,2603,2604],{"class":171,"line":570},[169,2605,751],{"class":269},[169,2607,2608,2610],{"class":171,"line":579},[169,2609,757],{"class":269},[169,2611,731],{"class":360},[169,2613,2614,2616,2618],{"class":171,"line":600},[169,2615,1351],{"class":269},[169,2617,405],{"class":273},[169,2619,304],{"class":269},[169,2621,2622],{"class":171,"line":628},[169,2623,311],{"emptyLinePlaceholder":310},[169,2625,2626,2628,2630],{"class":171,"line":633},[169,2627,339],{"class":269},[169,2629,1243],{"class":273},[169,2631,304],{"class":269},[169,2633,2634,2636,2638,2640,2642,2644,2646,2648],{"class":171,"line":646},[169,2635,1333],{"class":269},[169,2637,1736],{"class":273},[169,2639,345],{"class":277},[169,2641,281],{"class":269},[169,2643,284],{"class":269},[169,2645,352],{"class":178},[169,2647,284],{"class":269},[169,2649,304],{"class":269},[169,2651,2652],{"class":171,"line":663},[169,2653,1753],{"class":360},[169,2655,2656,2658,2660],{"class":171,"line":675},[169,2657,1758],{"class":269},[169,2659,1736],{"class":273},[169,2661,304],{"class":269},[169,2663,2664,2666,2668],{"class":171,"line":698},[169,2665,1351],{"class":269},[169,2667,1243],{"class":273},[169,2669,304],{"class":269},[158,2671,2674],{"className":1180,"code":2672,"filename":2673,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { VueFinalModal } from 'vue-final-modal'\n\n  defineProps\u003C{\n    title?: string\n  }>()\n\n  const emit = defineEmits\u003C{\n    (e: 'confirm'): void\n  }>()\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      class=\"flex justify-center items-center\"\n      content-class=\"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2\"\n    >\n      \u003Ch1 class=\"text-xl\">\n        {{ title }}\n      \u003C\u002Fh1>\n      \u003Cslot \u002F>\n      \u003Cbutton class=\"mt-1 ml-auto px-2 border rounded-lg\" @click=\"emit('confirm')\">\n        Confirm\n      \u003C\u002Fbutton>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n","ModalConfirm.vue",[166,2675,2676,2696,2714,2718,2724,2732,2738,2742,2754,2772,2778,2786,2790,2798,2804,2817,2830,2834,2854,2859,2867,2875,2904,2908,2916,2924],{"__ignoreMap":164},[169,2677,2678,2680,2682,2684,2686,2688,2690,2692,2694],{"class":171,"line":172},[169,2679,339],{"class":269},[169,2681,405],{"class":273},[169,2683,1193],{"class":277},[169,2685,1196],{"class":277},[169,2687,281],{"class":269},[169,2689,284],{"class":269},[169,2691,815],{"class":178},[169,2693,284],{"class":269},[169,2695,304],{"class":269},[169,2697,2698,2700,2702,2704,2706,2708,2710,2712],{"class":171,"line":307},[169,2699,1556],{"class":737},[169,2701,585],{"class":269},[169,2703,1805],{"class":360},[169,2705,686],{"class":269},[169,2707,845],{"class":737},[169,2709,713],{"class":269},[169,2711,870],{"class":178},[169,2713,853],{"class":269},[169,2715,2716],{"class":171,"line":314},[169,2717,311],{"emptyLinePlaceholder":310},[169,2719,2720,2722],{"class":171,"line":336},[169,2721,1824],{"class":636},[169,2723,1827],{"class":269},[169,2725,2726,2728,2730],{"class":171,"line":371},[169,2727,1832],{"class":273},[169,2729,1835],{"class":269},[169,2731,1838],{"class":175},[169,2733,2734,2736],{"class":171,"line":386},[169,2735,1843],{"class":269},[169,2737,926],{"class":360},[169,2739,2740],{"class":171,"line":395},[169,2741,311],{"emptyLinePlaceholder":310},[169,2743,2744,2746,2748,2750,2752],{"class":171,"line":400},[169,2745,582],{"class":277},[169,2747,1856],{"class":360},[169,2749,281],{"class":269},[169,2751,1861],{"class":636},[169,2753,1827],{"class":269},[169,2755,2756,2758,2760,2762,2764,2766,2768,2770],{"class":171,"line":426},[169,2757,1868],{"class":269},[169,2759,1872],{"class":1871},[169,2761,652],{"class":269},[169,2763,713],{"class":269},[169,2765,1879],{"class":178},[169,2767,719],{"class":269},[169,2769,1884],{"class":269},[169,2771,1887],{"class":175},[169,2773,2774,2776],{"class":171,"line":450},[169,2775,1843],{"class":269},[169,2777,926],{"class":360},[169,2779,2780,2782,2784],{"class":171,"line":474},[169,2781,1351],{"class":269},[169,2783,405],{"class":273},[169,2785,304],{"class":269},[169,2787,2788],{"class":171,"line":498},[169,2789,311],{"emptyLinePlaceholder":310},[169,2791,2792,2794,2796],{"class":171,"line":522},[169,2793,339],{"class":269},[169,2795,1243],{"class":273},[169,2797,304],{"class":269},[169,2799,2800,2802],{"class":171,"line":546},[169,2801,1333],{"class":269},[169,2803,1920],{"class":273},[169,2805,2806,2808,2810,2812,2815],{"class":171,"line":570},[169,2807,1925],{"class":277},[169,2809,281],{"class":269},[169,2811,284],{"class":269},[169,2813,2814],{"class":178},"flex justify-center items-center",[169,2816,1935],{"class":269},[169,2818,2819,2821,2823,2825,2828],{"class":171,"line":579},[169,2820,1940],{"class":277},[169,2822,281],{"class":269},[169,2824,284],{"class":269},[169,2826,2827],{"class":178},"flex flex-col max-w-xl mx-4 p-4 bg-white dark:bg-gray-900 border dark:border-gray-700 rounded-lg space-y-2",[169,2829,1935],{"class":269},[169,2831,2832],{"class":171,"line":600},[169,2833,1981],{"class":269},[169,2835,2836,2838,2840,2843,2845,2847,2850,2852],{"class":171,"line":628},[169,2837,1986],{"class":269},[169,2839,1989],{"class":273},[169,2841,2842],{"class":277}," class",[169,2844,281],{"class":269},[169,2846,284],{"class":269},[169,2848,2849],{"class":178},"text-xl",[169,2851,284],{"class":269},[169,2853,304],{"class":269},[169,2855,2856],{"class":171,"line":633},[169,2857,2858],{"class":360},"        {{ title }}\n",[169,2860,2861,2863,2865],{"class":171,"line":646},[169,2862,2038],{"class":269},[169,2864,1989],{"class":273},[169,2866,304],{"class":269},[169,2868,2869,2871,2873],{"class":171,"line":663},[169,2870,1986],{"class":269},[169,2872,2007],{"class":273},[169,2874,1260],{"class":269},[169,2876,2877,2879,2881,2883,2885,2887,2890,2892,2894,2896,2898,2900,2902],{"class":171,"line":675},[169,2878,1986],{"class":269},[169,2880,342],{"class":273},[169,2882,2842],{"class":277},[169,2884,281],{"class":269},[169,2886,284],{"class":269},[169,2888,2889],{"class":178},"mt-1 ml-auto px-2 border rounded-lg",[169,2891,284],{"class":269},[169,2893,345],{"class":277},[169,2895,281],{"class":269},[169,2897,284],{"class":269},[169,2899,2024],{"class":178},[169,2901,284],{"class":269},[169,2903,304],{"class":269},[169,2905,2906],{"class":171,"line":698},[169,2907,2033],{"class":360},[169,2909,2910,2912,2914],{"class":171,"line":725},[169,2911,2038],{"class":269},[169,2913,342],{"class":273},[169,2915,304],{"class":269},[169,2917,2918,2920,2922],{"class":171,"line":734},[169,2919,1758],{"class":269},[169,2921,255],{"class":273},[169,2923,304],{"class":269},[169,2925,2926,2928,2930],{"class":171,"line":748},[169,2927,1351],{"class":269},[169,2929,1243],{"class":273},[169,2931,304],{"class":269},[123,2933,2935],{"id":2934},"control-a-modal","Control a modal",[128,2937,2938],{},"There are three ways to control a modal component.",[128,2940,2941,2942,2950],{},"Take the ",[166,2943,2944,2946,2948],{"className":814,"language":815,"style":164},[169,2945,270],{"class":360},[169,2947,1458],{"class":175},[169,2949,357],{"class":360}," component we built on previous section as an example:",[246,2952,60],{"id":2953},"usemodal",[128,2955,2956,2962,2963,240,2970,2977],{},[166,2957,2958,2960],{"className":814,"language":815,"style":164},[169,2959,980],{"class":636},[169,2961,669],{"class":360}," is a composable function that is used to create a dynamic modal, then you can control the modal programmatically with the returned ",[166,2964,2965,2968],{"className":814,"language":815,"style":164},[169,2966,2967],{"class":636},"open",[169,2969,669],{"class":360},[166,2971,2972,2975],{"className":814,"language":815,"style":164},[169,2973,2974],{"class":636},"close",[169,2976,669],{"class":360}," functions.",[128,2979,2980,2981,2983],{},"The dynamic modals are rendered by ",[118,2982,50],{"href":51},", so make sure it is included in your app.",[132,2985,2986],{},[135,2987,1515,2988],{},[1517,2989,2990,2993],{},[2991,2992],"use-modal-preview",{},[1243,2994,2995],{"v-slot:code":164},[158,2996,2997],{"className":1180,"code":2441,"filename":1529,"language":850,"meta":164,"style":164},[166,2998,2999,3019,3037,3051,3055,3077,3087,3095,3109,3117,3123,3127,3131,3139,3153,3157,3163,3171,3175,3183,3201,3205,3213],{"__ignoreMap":164},[169,3000,3001,3003,3005,3007,3009,3011,3013,3015,3017],{"class":171,"line":172},[169,3002,339],{"class":269},[169,3004,405],{"class":273},[169,3006,1193],{"class":277},[169,3008,1196],{"class":277},[169,3010,281],{"class":269},[169,3012,284],{"class":269},[169,3014,815],{"class":178},[169,3016,284],{"class":269},[169,3018,304],{"class":269},[169,3020,3021,3023,3025,3027,3029,3031,3033,3035],{"class":171,"line":307},[169,3022,1556],{"class":737},[169,3024,585],{"class":269},[169,3026,691],{"class":360},[169,3028,686],{"class":269},[169,3030,845],{"class":737},[169,3032,713],{"class":269},[169,3034,870],{"class":178},[169,3036,853],{"class":269},[169,3038,3039,3041,3043,3045,3047,3049],{"class":171,"line":314},[169,3040,1556],{"class":737},[169,3042,2488],{"class":360},[169,3044,882],{"class":737},[169,3046,713],{"class":269},[169,3048,2495],{"class":178},[169,3050,853],{"class":269},[169,3052,3053],{"class":171,"line":336},[169,3054,311],{"emptyLinePlaceholder":310},[169,3056,3057,3059,3061,3063,3065,3067,3069,3071,3073,3075],{"class":171,"line":371},[169,3058,582],{"class":277},[169,3060,585],{"class":269},[169,3062,683],{"class":360},[169,3064,610],{"class":269},[169,3066,1603],{"class":360},[169,3068,591],{"class":269},[169,3070,594],{"class":269},[169,3072,691],{"class":636},[169,3074,640],{"class":360},[169,3076,643],{"class":269},[169,3078,3079,3081,3083,3085],{"class":171,"line":386},[169,3080,1618],{"class":273},[169,3082,652],{"class":269},[169,3084,2532],{"class":360},[169,3086,1060],{"class":269},[169,3088,3089,3091,3093],{"class":171,"line":395},[169,3090,1630],{"class":273},[169,3092,652],{"class":269},[169,3094,672],{"class":269},[169,3096,3097,3099,3101,3103,3105,3107],{"class":171,"line":400},[169,3098,1639],{"class":273},[169,3100,652],{"class":269},[169,3102,713],{"class":269},[169,3104,1646],{"class":178},[169,3106,719],{"class":269},[169,3108,1060],{"class":269},[169,3110,3111,3113,3115],{"class":171,"line":426},[169,3112,1655],{"class":273},[169,3114,669],{"class":269},[169,3116,672],{"class":269},[169,3118,3119,3121],{"class":171,"line":450},[169,3120,1664],{"class":636},[169,3122,926],{"class":273},[169,3124,3125],{"class":171,"line":474},[169,3126,1671],{"class":269},[169,3128,3129],{"class":171,"line":498},[169,3130,751],{"class":269},[169,3132,3133,3135,3137],{"class":171,"line":522},[169,3134,1680],{"class":273},[169,3136,652],{"class":269},[169,3138,672],{"class":269},[169,3140,3141,3143,3145,3147,3149,3151],{"class":171,"line":546},[169,3142,1689],{"class":273},[169,3144,652],{"class":269},[169,3146,713],{"class":269},[169,3148,2597],{"class":178},[169,3150,719],{"class":269},[169,3152,1060],{"class":269},[169,3154,3155],{"class":171,"line":570},[169,3156,751],{"class":269},[169,3158,3159,3161],{"class":171,"line":579},[169,3160,757],{"class":269},[169,3162,731],{"class":360},[169,3164,3165,3167,3169],{"class":171,"line":600},[169,3166,1351],{"class":269},[169,3168,405],{"class":273},[169,3170,304],{"class":269},[169,3172,3173],{"class":171,"line":628},[169,3174,311],{"emptyLinePlaceholder":310},[169,3176,3177,3179,3181],{"class":171,"line":633},[169,3178,339],{"class":269},[169,3180,1243],{"class":273},[169,3182,304],{"class":269},[169,3184,3185,3187,3189,3191,3193,3195,3197,3199],{"class":171,"line":646},[169,3186,1333],{"class":269},[169,3188,1736],{"class":273},[169,3190,345],{"class":277},[169,3192,281],{"class":269},[169,3194,284],{"class":269},[169,3196,352],{"class":178},[169,3198,284],{"class":269},[169,3200,304],{"class":269},[169,3202,3203],{"class":171,"line":663},[169,3204,1753],{"class":360},[169,3206,3207,3209,3211],{"class":171,"line":675},[169,3208,1758],{"class":269},[169,3210,1736],{"class":273},[169,3212,304],{"class":269},[169,3214,3215,3217,3219],{"class":171,"line":698},[169,3216,1351],{"class":269},[169,3218,1243],{"class":273},[169,3220,304],{"class":269},[3222,3223],"read-more",{"link":61},[246,3225,3226],{"id":3226},"v-model",[128,3228,3229,3230,3232],{},"Use ",[166,3231,3226],{}," for show\u002Fhide a modal.",[132,3234,3235],{},[135,3236,1515,3237],{},[1517,3238,3239,3242],{},[3240,3241],"v-model-preview",{},[1243,3243,3244],{"v-slot:code":164},[158,3245,3247],{"className":1180,"code":3246,"filename":1529,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { ref } from 'vue'\n  import ModalConfirm from '.\u002FModalConfirm.vue'\n\n  const show = ref(false)\n\n  function confirm() {\n    show.value = false\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"show = true\">\n      Open Modal\n    \u003C\u002FVButton>\n\n    \u003CModalConfirm\n      v-model=\"show\"\n      title=\"Hello World!\"\n      @confirm=\"() => confirm()\"\n    >\n      \u003Cp>VModel: The content of the modal\u003C\u002Fp>\n    \u003C\u002FModalConfirm>\n  \u003C\u002Ftemplate>\n",[166,3248,3249,3269,3288,3302,3306,3324,3328,3340,3355,3359,3367,3371,3379,3398,3402,3410,3414,3421,3435,3447,3461,3465,3482,3490],{"__ignoreMap":164},[169,3250,3251,3253,3255,3257,3259,3261,3263,3265,3267],{"class":171,"line":172},[169,3252,339],{"class":269},[169,3254,405],{"class":273},[169,3256,1193],{"class":277},[169,3258,1196],{"class":277},[169,3260,281],{"class":269},[169,3262,284],{"class":269},[169,3264,815],{"class":178},[169,3266,284],{"class":269},[169,3268,304],{"class":269},[169,3270,3271,3273,3275,3278,3280,3282,3284,3286],{"class":171,"line":307},[169,3272,1556],{"class":737},[169,3274,585],{"class":269},[169,3276,3277],{"class":360}," ref",[169,3279,686],{"class":269},[169,3281,845],{"class":737},[169,3283,713],{"class":269},[169,3285,850],{"class":178},[169,3287,853],{"class":269},[169,3289,3290,3292,3294,3296,3298,3300],{"class":171,"line":314},[169,3291,1556],{"class":737},[169,3293,2488],{"class":360},[169,3295,882],{"class":737},[169,3297,713],{"class":269},[169,3299,2495],{"class":178},[169,3301,853],{"class":269},[169,3303,3304],{"class":171,"line":336},[169,3305,311],{"emptyLinePlaceholder":310},[169,3307,3308,3310,3313,3315,3317,3319,3322],{"class":171,"line":371},[169,3309,582],{"class":277},[169,3311,3312],{"class":360}," show ",[169,3314,281],{"class":269},[169,3316,3277],{"class":636},[169,3318,640],{"class":360},[169,3320,3321],{"class":1133},"false",[169,3323,731],{"class":360},[169,3325,3326],{"class":171,"line":386},[169,3327,311],{"emptyLinePlaceholder":310},[169,3329,3330,3333,3336,3338],{"class":171,"line":395},[169,3331,3332],{"class":277},"  function",[169,3334,3335],{"class":636}," confirm",[169,3337,669],{"class":269},[169,3339,672],{"class":269},[169,3341,3342,3345,3347,3350,3352],{"class":171,"line":400},[169,3343,3344],{"class":360},"    show",[169,3346,121],{"class":269},[169,3348,3349],{"class":360},"value",[169,3351,594],{"class":269},[169,3353,3354],{"class":1133}," false\n",[169,3356,3357],{"class":171,"line":426},[169,3358,2127],{"class":269},[169,3360,3361,3363,3365],{"class":171,"line":450},[169,3362,1351],{"class":269},[169,3364,405],{"class":273},[169,3366,304],{"class":269},[169,3368,3369],{"class":171,"line":474},[169,3370,311],{"emptyLinePlaceholder":310},[169,3372,3373,3375,3377],{"class":171,"line":498},[169,3374,339],{"class":269},[169,3376,1243],{"class":273},[169,3378,304],{"class":269},[169,3380,3381,3383,3385,3387,3389,3391,3394,3396],{"class":171,"line":522},[169,3382,1333],{"class":269},[169,3384,1736],{"class":273},[169,3386,345],{"class":277},[169,3388,281],{"class":269},[169,3390,284],{"class":269},[169,3392,3393],{"class":178},"show = true",[169,3395,284],{"class":269},[169,3397,304],{"class":269},[169,3399,3400],{"class":171,"line":546},[169,3401,1753],{"class":360},[169,3403,3404,3406,3408],{"class":171,"line":570},[169,3405,1758],{"class":269},[169,3407,1736],{"class":273},[169,3409,304],{"class":269},[169,3411,3412],{"class":171,"line":579},[169,3413,311],{"emptyLinePlaceholder":310},[169,3415,3416,3418],{"class":171,"line":600},[169,3417,1333],{"class":269},[169,3419,3420],{"class":273},"ModalConfirm\n",[169,3422,3423,3426,3428,3430,3433],{"class":171,"line":628},[169,3424,3425],{"class":277},"      v-model",[169,3427,281],{"class":269},[169,3429,284],{"class":269},[169,3431,3432],{"class":178},"show",[169,3434,1935],{"class":269},[169,3436,3437,3439,3441,3443,3445],{"class":171,"line":633},[169,3438,1639],{"class":277},[169,3440,281],{"class":269},[169,3442,284],{"class":269},[169,3444,1646],{"class":178},[169,3446,1935],{"class":269},[169,3448,3449,3452,3454,3456,3459],{"class":171,"line":646},[169,3450,3451],{"class":277},"      @confirm",[169,3453,281],{"class":269},[169,3455,284],{"class":269},[169,3457,3458],{"class":178},"() => confirm()",[169,3460,1935],{"class":269},[169,3462,3463],{"class":171,"line":663},[169,3464,1981],{"class":269},[169,3466,3467,3469,3471,3473,3476,3478,3480],{"class":171,"line":675},[169,3468,1986],{"class":269},[169,3470,128],{"class":273},[169,3472,357],{"class":269},[169,3474,3475],{"class":360},"VModel: The content of the modal",[169,3477,364],{"class":269},[169,3479,128],{"class":273},[169,3481,304],{"class":269},[169,3483,3484,3486,3488],{"class":171,"line":698},[169,3485,1758],{"class":269},[169,3487,1458],{"class":273},[169,3489,304],{"class":269},[169,3491,3492,3494,3496],{"class":171,"line":725},[169,3493,1351],{"class":269},[169,3495,1243],{"class":273},[169,3497,304],{"class":269},[246,3499,3501],{"id":3500},"modalid","modalId",[128,3503,3504,3509,3510,3518,3519,3530,3531,3533,3534,121],{},[166,3505,3506],{"className":814,"language":815,"style":164},[169,3507,3508],{"class":360},"modelValue"," is not a required prop for ",[166,3511,3512,3514,3516],{"className":814,"language":815,"style":164},[169,3513,270],{"class":360},[169,3515,255],{"class":175},[169,3517,357],{"class":360},". Without using ",[166,3520,3521,3524,3527],{"className":814,"language":815,"style":164},[169,3522,3523],{"class":360},"v",[169,3525,3526],{"class":269},"-",[169,3528,3529],{"class":360},"model",", you can also use ",[118,3532,64],{"href":65}," composable function to control the modal by given a ",[118,3535,3501],{"href":3536},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#modalid-optional",[132,3538,3539],{},[135,3540,1515,3541],{},[1517,3542,3543,3546],{},[3544,3545],"modal-id-preview",{},[1243,3547,3548],{"v-slot:code":164},[158,3549,3551],{"className":1180,"code":3550,"filename":1529,"language":850,"meta":164,"style":164},"  \u003Cscript setup lang=\"ts\">\n  import { useVfm } from 'vue-final-modal'\n  import ModalConfirm from '.\u002FModalConfirm.vue'\n\n  const vfm = useVfm()\n  const modalId = Symbol('modalId')\n\n  function confirm() {\n    vfm.close(modalId)\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"() => vfm.open(modalId)\">\n      Open Modal\n    \u003C\u002FVButton>\n\n    \u003CModalConfirm\n      :modal-id=\"modalId\"\n      title=\"Hello World!\"\n      @confirm=\"() => confirm()\"\n    >\n      \u003Cp>The content of the modal\u003C\u002Fp>\n    \u003C\u002FModalConfirm>\n  \u003C\u002Ftemplate>\n",[166,3552,3553,3573,3592,3606,3610,3622,3644,3648,3658,3673,3677,3685,3689,3697,3716,3720,3728,3732,3738,3751,3763,3775,3779,3796,3804],{"__ignoreMap":164},[169,3554,3555,3557,3559,3561,3563,3565,3567,3569,3571],{"class":171,"line":172},[169,3556,339],{"class":269},[169,3558,405],{"class":273},[169,3560,1193],{"class":277},[169,3562,1196],{"class":277},[169,3564,281],{"class":269},[169,3566,284],{"class":269},[169,3568,815],{"class":178},[169,3570,284],{"class":269},[169,3572,304],{"class":269},[169,3574,3575,3577,3579,3582,3584,3586,3588,3590],{"class":171,"line":307},[169,3576,1556],{"class":737},[169,3578,585],{"class":269},[169,3580,3581],{"class":360}," useVfm",[169,3583,686],{"class":269},[169,3585,845],{"class":737},[169,3587,713],{"class":269},[169,3589,870],{"class":178},[169,3591,853],{"class":269},[169,3593,3594,3596,3598,3600,3602,3604],{"class":171,"line":314},[169,3595,1556],{"class":737},[169,3597,2488],{"class":360},[169,3599,882],{"class":737},[169,3601,713],{"class":269},[169,3603,2495],{"class":178},[169,3605,853],{"class":269},[169,3607,3608],{"class":171,"line":336},[169,3609,311],{"emptyLinePlaceholder":310},[169,3611,3612,3614,3616,3618,3620],{"class":171,"line":371},[169,3613,582],{"class":277},[169,3615,919],{"class":360},[169,3617,281],{"class":269},[169,3619,3581],{"class":636},[169,3621,926],{"class":360},[169,3623,3624,3626,3629,3631,3634,3636,3638,3640,3642],{"class":171,"line":386},[169,3625,582],{"class":277},[169,3627,3628],{"class":360}," modalId ",[169,3630,281],{"class":269},[169,3632,3633],{"class":636}," Symbol",[169,3635,640],{"class":360},[169,3637,719],{"class":269},[169,3639,3501],{"class":178},[169,3641,719],{"class":269},[169,3643,731],{"class":360},[169,3645,3646],{"class":171,"line":395},[169,3647,311],{"emptyLinePlaceholder":310},[169,3649,3650,3652,3654,3656],{"class":171,"line":400},[169,3651,3332],{"class":277},[169,3653,3335],{"class":636},[169,3655,669],{"class":269},[169,3657,672],{"class":269},[169,3659,3660,3663,3665,3667,3669,3671],{"class":171,"line":426},[169,3661,3662],{"class":360},"    vfm",[169,3664,121],{"class":269},[169,3666,2974],{"class":636},[169,3668,640],{"class":273},[169,3670,3501],{"class":360},[169,3672,731],{"class":273},[169,3674,3675],{"class":171,"line":450},[169,3676,2127],{"class":269},[169,3678,3679,3681,3683],{"class":171,"line":474},[169,3680,1351],{"class":269},[169,3682,405],{"class":273},[169,3684,304],{"class":269},[169,3686,3687],{"class":171,"line":498},[169,3688,311],{"emptyLinePlaceholder":310},[169,3690,3691,3693,3695],{"class":171,"line":522},[169,3692,339],{"class":269},[169,3694,1243],{"class":273},[169,3696,304],{"class":269},[169,3698,3699,3701,3703,3705,3707,3709,3712,3714],{"class":171,"line":546},[169,3700,1333],{"class":269},[169,3702,1736],{"class":273},[169,3704,345],{"class":277},[169,3706,281],{"class":269},[169,3708,284],{"class":269},[169,3710,3711],{"class":178},"() => vfm.open(modalId)",[169,3713,284],{"class":269},[169,3715,304],{"class":269},[169,3717,3718],{"class":171,"line":570},[169,3719,1753],{"class":360},[169,3721,3722,3724,3726],{"class":171,"line":579},[169,3723,1758],{"class":269},[169,3725,1736],{"class":273},[169,3727,304],{"class":269},[169,3729,3730],{"class":171,"line":600},[169,3731,311],{"emptyLinePlaceholder":310},[169,3733,3734,3736],{"class":171,"line":628},[169,3735,1333],{"class":269},[169,3737,3420],{"class":273},[169,3739,3740,3743,3745,3747,3749],{"class":171,"line":633},[169,3741,3742],{"class":277},"      :modal-id",[169,3744,281],{"class":269},[169,3746,284],{"class":269},[169,3748,3501],{"class":178},[169,3750,1935],{"class":269},[169,3752,3753,3755,3757,3759,3761],{"class":171,"line":646},[169,3754,1639],{"class":277},[169,3756,281],{"class":269},[169,3758,284],{"class":269},[169,3760,1646],{"class":178},[169,3762,1935],{"class":269},[169,3764,3765,3767,3769,3771,3773],{"class":171,"line":663},[169,3766,3451],{"class":277},[169,3768,281],{"class":269},[169,3770,284],{"class":269},[169,3772,3458],{"class":178},[169,3774,1935],{"class":269},[169,3776,3777],{"class":171,"line":675},[169,3778,1981],{"class":269},[169,3780,3781,3783,3785,3787,3790,3792,3794],{"class":171,"line":698},[169,3782,1986],{"class":269},[169,3784,128],{"class":273},[169,3786,357],{"class":269},[169,3788,3789],{"class":360},"The content of the modal",[169,3791,364],{"class":269},[169,3793,128],{"class":273},[169,3795,304],{"class":269},[169,3797,3798,3800,3802],{"class":171,"line":725},[169,3799,1758],{"class":269},[169,3801,1458],{"class":273},[169,3803,304],{"class":269},[169,3805,3806,3808,3810],{"class":171,"line":734},[169,3807,1351],{"class":269},[169,3809,1243],{"class":273},[169,3811,304],{"class":269},[3222,3813],{"link":47},[2069,3815,3816],{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":164,"searchDepth":307,"depth":307,"links":3818},[3819,3820,3823,3827,3829,3833,3837],{"id":125,"depth":307,"text":126},{"id":152,"depth":307,"text":153,"children":3821},[3822],{"id":248,"depth":314,"text":249},{"id":807,"depth":307,"text":808,"children":3824},[3825,3826],{"id":823,"depth":314,"text":824},{"id":954,"depth":314,"text":955},{"id":1150,"depth":307,"text":3828},"Add \u003CModalsContainer> to your app",{"id":1366,"depth":307,"text":1367,"children":3830},[3831,3832],{"id":1377,"depth":314,"text":824},{"id":1396,"depth":314,"text":955},{"id":1447,"depth":307,"text":1448,"children":3834},[3835,3836],{"id":1473,"depth":314,"text":1474},{"id":2401,"depth":314,"text":2402},{"id":2934,"depth":307,"text":2935,"children":3838},[3839,3840,3841],{"id":2953,"depth":314,"text":60},{"id":3226,"depth":314,"text":3226},{"id":3500,"depth":314,"text":3501},"How to start with Vue Final Modal, by creating a fresh new project or adding it to your Vue application.","md",null,{},{"title":21,"description":3842},"S6i4dsLtiRGdMGT6QyWDl6Sz48znp15ydFjUklxptWA",[3849,3851],{"title":17,"path":18,"stem":19,"description":3850,"children":-1},"These are the core concepts you need to know about vue-final-modal and its approach to modals management.",{"title":25,"path":26,"stem":27,"description":3852,"children":-1},"This document should help you navigate the tricky path of migrating between different versions of vue-final-modal that introduced breaking changes.",1791743377607]