[{"data":1,"prerenderedAt":1580},["ShallowReactive",2],{"navigation_docs":3,"-get-started-guide-migration-guide":108,"-get-started-guide-migration-guide-surround":1575},[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":25,"body":110,"description":1569,"extension":1570,"links":1571,"meta":1572,"navigation":475,"path":26,"seo":1573,"stem":27,"__hash__":1574},"docs\u002F2.get-started\u002F1.guide\u002F3.migration-guide.md",{"type":111,"value":112,"toc":1547},"minimark",[113,118,146,229,232,237,254,288,295,339,348,388,391,517,520,652,668,674,724,731,808,815,832,879,886,911,915,936,954,994,998,1011,1059,1098,1102,1105,1298,1302,1530,1534,1543],[114,115,117],"h2",{"id":116},"migrating-from-4x-to-50","Migrating from 4.x to 5.0",[119,120,121,122,137,138,145],"p",{},"vue-final-modal 5.0 rebuilds ",[123,124,128,133],"code",{"className":125,"language":126,"style":127},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts","",[129,130,132],"span",{"class":131},"s2Zo4","useModal",[129,134,136],{"class":135},"sTEyZ","()"," on top of ",[139,140,144],"a",{"href":141,"rel":142},"https:\u002F\u002Fgithub.com\u002Fhunterliu1003\u002Fvue-use-template",[143],"nofollow","vue-use-template",", while keeping the public API compatible with 4.x.",[119,147,148,149,153,154,161,162,161,174,180,181,188,189,161,196,161,203,210,211,216,217,228],{},"For most apps ",[150,151,152],"strong",{},"no code change is needed",": ",[123,155,156,159],{"className":125,"language":126,"style":127},[129,157,158],{"class":131},"createVfm",[129,160,136],{"class":135},", ",[123,163,164,168,171],{"className":125,"language":126,"style":127},[129,165,167],{"class":166},"sMK4o","\u003C",[129,169,170],{"class":135},"ModalsContainer ",[129,172,173],{"class":166},"\u002F>",[123,175,176,178],{"className":125,"language":126,"style":127},[129,177,132],{"class":131},[129,179,136],{"class":135}," with ",[123,182,183,186],{"className":125,"language":126,"style":127},[129,184,185],{"class":131},"open",[129,187,136],{"class":135}," \u002F ",[123,190,191,194],{"className":125,"language":126,"style":127},[129,192,193],{"class":131},"close",[129,195,136],{"class":135},[123,197,198,201],{"className":125,"language":126,"style":127},[129,199,200],{"class":131},"useVfm",[129,202,136],{"class":135},[123,204,205,208],{"className":125,"language":126,"style":127},[129,206,207],{"class":131},"useModalSlot",[129,209,136],{"class":135}," and ",[123,212,213],{"className":125,"language":126,"style":127},[129,214,215],{"class":135},"$vfm"," all keep working as before. The ",[123,218,219,221,225],{"className":125,"language":126,"style":127},[129,220,167],{"class":135},[129,222,224],{"class":223},"sBMFI","VueFinalModal",[129,226,227],{"class":135},">"," component itself (props, events, slots) stays the same.",[119,230,231],{},"What can need a change: installing the peer dependencies, a few removed advanced APIs that leaked the old internals, and some behaviors described below.",[233,234,236],"h3",{"id":235},"install-the-peer-dependencies","Install the peer dependencies",[119,238,239,240,161,243,210,246,249,250,253],{},"4.x installed ",[123,241,242],{},"@vueuse\u002Fcore",[123,244,245],{},"@vueuse\u002Fintegrations",[123,247,248],{},"focus-trap"," as its own dependencies. 5.0 lists them only as peer dependencies, together with the new ",[139,251,144],{"href":141,"rel":252},[143],", and needs Vue 3.3 or later instead of 3.2. npm and pnpm install peer dependencies for you. With Yarn, add them yourself:",[255,256,260],"pre",{"className":257,"code":258,"language":259,"meta":127,"style":127},"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","bash",[123,261,262],{"__ignoreMap":127},[129,263,266,269,273,276,279,282,285],{"class":264,"line":265},"line",1,[129,267,268],{"class":223},"yarn",[129,270,272],{"class":271},"sfazB"," add",[129,274,275],{"class":271}," vue-final-modal",[129,277,278],{"class":271}," vue-use-template",[129,280,281],{"class":271}," @vueuse\u002Fcore",[129,283,284],{"class":271}," @vueuse\u002Fintegrations",[129,286,287],{"class":271}," focus-trap\n",[233,289,291,292],{"id":290},"removed-vfmdynamicmodals","Removed ",[123,293,294],{},"vfm.dynamicModals",[119,296,297,298,304,305,188,311,317,318,324,325,333],{},"The dynamic modals created by ",[123,299,300,302],{"className":125,"language":126,"style":127},[129,301,132],{"class":131},[129,303,136],{"class":135}," are no longer exposed as an array on the vfm instance. Control each modal with the ",[123,306,307,309],{"className":125,"language":126,"style":127},[129,308,185],{"class":131},[129,310,136],{"class":135},[123,312,313,315],{"className":125,"language":126,"style":127},[129,314,193],{"class":131},[129,316,136],{"class":135}," functions returned by ",[123,319,320,322],{"className":125,"language":126,"style":127},[129,321,132],{"class":131},[129,323,136],{"class":135},", or close everything with ",[123,326,327,329,331,334,337],{"className":125,"language":126,"style":127},[129,328,200],{"class":131},[129,330,136],{"class":135},[129,332,333],{"class":166},".",[129,335,336],{"class":131},"closeAll",[129,338,136],{"class":135},[233,340,291,342,210,345],{"id":341},"removed-usemodaloptions-and-patchoptions",[123,343,344],{},"useModal().options",[123,346,347],{},"patchOptions()",[119,349,350,356,357,362,363,370,371,161,376,381,382,387],{},[123,351,352,354],{"className":125,"language":126,"style":127},[129,353,132],{"class":131},[129,355,136],{"class":135}," no longer returns the internal reactive ",[123,358,359],{"className":125,"language":126,"style":127},[129,360,361],{"class":135},"options"," object, and ",[123,364,365,368],{"className":125,"language":126,"style":127},[129,366,367],{"class":131},"patchOptions",[129,369,136],{"class":135}," is gone. Pass a ",[123,372,373],{"className":125,"language":126,"style":127},[129,374,375],{"class":135},"ref",[123,377,378],{"className":125,"language":126,"style":127},[129,379,380],{"class":135},"computed"," or getter function as ",[123,383,384],{"className":125,"language":126,"style":127},[129,385,386],{"class":135},"attrs"," instead. The modal stays in sync with it:",[119,389,390],{},"So this:",[255,392,394],{"className":125,"code":393,"language":126,"meta":127,"style":127},"const modal = useModal({\n  component: ModalConfirm,\n  attrs: { title: 'Hello World!' },\n})\n\nmodal.patchOptions({ attrs: { title: 'Hello Vue!' } })\n",[123,395,396,417,433,461,470,477],{"__ignoreMap":127},[129,397,398,402,405,408,411,414],{"class":264,"line":265},[129,399,401],{"class":400},"spNyl","const",[129,403,404],{"class":135}," modal ",[129,406,407],{"class":166},"=",[129,409,410],{"class":131}," useModal",[129,412,413],{"class":135},"(",[129,415,416],{"class":166},"{\n",[129,418,420,424,427,430],{"class":264,"line":419},2,[129,421,423],{"class":422},"swJcz","  component",[129,425,426],{"class":166},":",[129,428,429],{"class":135}," ModalConfirm",[129,431,432],{"class":166},",\n",[129,434,436,439,441,444,447,449,452,455,458],{"class":264,"line":435},3,[129,437,438],{"class":422},"  attrs",[129,440,426],{"class":166},[129,442,443],{"class":166}," {",[129,445,446],{"class":422}," title",[129,448,426],{"class":166},[129,450,451],{"class":166}," '",[129,453,454],{"class":271},"Hello World!",[129,456,457],{"class":166},"'",[129,459,460],{"class":166}," },\n",[129,462,464,467],{"class":264,"line":463},4,[129,465,466],{"class":166},"}",[129,468,469],{"class":135},")\n",[129,471,473],{"class":264,"line":472},5,[129,474,476],{"emptyLinePlaceholder":475},true,"\n",[129,478,480,483,485,487,489,492,495,497,499,501,503,505,508,510,513,515],{"class":264,"line":479},6,[129,481,482],{"class":135},"modal",[129,484,333],{"class":166},[129,486,367],{"class":131},[129,488,413],{"class":135},[129,490,491],{"class":166},"{",[129,493,494],{"class":422}," attrs",[129,496,426],{"class":166},[129,498,443],{"class":166},[129,500,446],{"class":422},[129,502,426],{"class":166},[129,504,451],{"class":166},[129,506,507],{"class":271},"Hello Vue!",[129,509,457],{"class":166},[129,511,512],{"class":166}," }",[129,514,512],{"class":166},[129,516,469],{"class":135},[119,518,519],{},"Will be re-written as this:",[255,521,523],{"className":125,"code":522,"language":126,"meta":127,"style":127},"const title = ref('Hello World!')\n\nconst { open, close } = useModal({\n  component: ModalConfirm,\n  attrs: () => ({ title: title.value }),\n})\n\ntitle.value = 'Hello Vue!'\n",[123,524,525,547,551,577,587,622,628,633],{"__ignoreMap":127},[129,526,527,529,532,534,537,539,541,543,545],{"class":264,"line":265},[129,528,401],{"class":400},[129,530,531],{"class":135}," title ",[129,533,407],{"class":166},[129,535,536],{"class":131}," ref",[129,538,413],{"class":135},[129,540,457],{"class":166},[129,542,454],{"class":271},[129,544,457],{"class":166},[129,546,469],{"class":135},[129,548,549],{"class":264,"line":419},[129,550,476],{"emptyLinePlaceholder":475},[129,552,553,555,557,560,563,566,568,571,573,575],{"class":264,"line":435},[129,554,401],{"class":400},[129,556,443],{"class":166},[129,558,559],{"class":135}," open",[129,561,562],{"class":166},",",[129,564,565],{"class":135}," close ",[129,567,466],{"class":166},[129,569,570],{"class":166}," =",[129,572,410],{"class":131},[129,574,413],{"class":135},[129,576,416],{"class":166},[129,578,579,581,583,585],{"class":264,"line":463},[129,580,423],{"class":422},[129,582,426],{"class":166},[129,584,429],{"class":135},[129,586,432],{"class":166},[129,588,589,591,593,596,599,602,604,606,608,610,612,615,617,620],{"class":264,"line":472},[129,590,438],{"class":131},[129,592,426],{"class":166},[129,594,595],{"class":166}," ()",[129,597,598],{"class":400}," =>",[129,600,601],{"class":135}," (",[129,603,491],{"class":166},[129,605,446],{"class":422},[129,607,426],{"class":166},[129,609,446],{"class":135},[129,611,333],{"class":166},[129,613,614],{"class":135},"value ",[129,616,466],{"class":166},[129,618,619],{"class":135},")",[129,621,432],{"class":166},[129,623,624,626],{"class":264,"line":479},[129,625,466],{"class":166},[129,627,469],{"class":135},[129,629,631],{"class":264,"line":630},7,[129,632,476],{"emptyLinePlaceholder":475},[129,634,636,639,641,643,645,647,649],{"class":264,"line":635},8,[129,637,638],{"class":135},"title",[129,640,333],{"class":166},[129,642,614],{"class":135},[129,644,407],{"class":166},[129,646,451],{"class":166},[129,648,507],{"class":271},[129,650,651],{"class":166},"'\n",[119,653,654,655,660,661,667],{},"Swapping the ",[123,656,657],{"className":125,"language":126,"style":127},[129,658,659],{"class":135},"component"," of an existing modal is no longer supported: create a separate modal with ",[123,662,663,665],{"className":125,"language":126,"style":127},[129,664,132],{"class":131},[129,666,136],{"class":135}," instead.",[233,669,291,671],{"id":670},"removed-getmodalexposed",[123,672,673],{},"getModalExposed()",[119,675,676,683,684,690,691,161,699,161,705,161,711,210,718,333],{},[123,677,678,681],{"className":125,"language":126,"style":127},[129,679,680],{"class":131},"getModalExposed",[129,682,136],{"class":135}," operated on component internal instances and is gone. ",[123,685,686,688],{"className":125,"language":126,"style":127},[129,687,200],{"class":131},[129,689,136],{"class":135}," keeps exposing ",[123,692,693,696],{"className":125,"language":126,"style":127},[129,694,695],{"class":131},"get",[129,697,698],{"class":135},"(modalId)",[123,700,701,703],{"className":125,"language":126,"style":127},[129,702,185],{"class":131},[129,704,698],{"class":135},[123,706,707,709],{"className":125,"language":126,"style":127},[129,708,193],{"class":131},[129,710,698],{"class":135},[123,712,713,716],{"className":125,"language":126,"style":127},[129,714,715],{"class":131},"toggle",[129,717,698],{"class":135},[123,719,720,722],{"className":125,"language":126,"style":127},[129,721,336],{"class":131},[129,723,136],{"class":135},[233,725,727,730],{"id":726},"focustrap-options-are-merged-over-the-defaults",[123,728,729],{},"focusTrap"," options are merged over the defaults",[119,732,733,734,737,738,753,754,776,777,781,782,787,788,793,794,798,799,807],{},"In 4.x, the options you passed to ",[139,735,729],{"href":736},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#focustrap"," replaced its default ",[123,739,740,742,745,747,751],{"className":125,"language":126,"style":127},[129,741,491],{"class":166},[129,743,744],{"class":223}," allowOutsideClick",[129,746,426],{"class":166},[129,748,750],{"class":749},"sfNiH"," true",[129,752,512],{"class":166},". In 5.0 they are merged over ",[123,755,756,758,760,762,764,766,769,771,774],{"className":125,"language":126,"style":127},[129,757,491],{"class":166},[129,759,744],{"class":223},[129,761,426],{"class":166},[129,763,750],{"class":749},[129,765,562],{"class":166},[129,767,768],{"class":223}," escapeDeactivates",[129,770,426],{"class":166},[129,772,773],{"class":749}," false",[129,775,512],{"class":166},", so outside clicks keep reaching ",[139,778,780],{"href":779},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#clicktoclose","clickToClose"," unless you set ",[123,783,784],{"className":125,"language":126,"style":127},[129,785,786],{"class":135},"allowOutsideClick"," yourself. The ",[123,789,790],{"className":125,"language":126,"style":127},[129,791,792],{"class":135},"esc"," key no longer deactivates the focus trap on its own: ",[139,795,797],{"href":796},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#esctoclose","escToClose"," handles it, so with ",[123,800,801,803,805],{"className":125,"language":126,"style":127},[129,802,797],{"class":223},[129,804,426],{"class":166},[129,806,773],{"class":749}," the focus stays trapped in the modal.",[233,809,811,812],{"id":810},"scroll-locking-moved-to-hunterliuscroll-lock","Scroll locking moved to ",[123,813,814],{},"@hunterliu\u002Fscroll-lock",[119,816,817,818,822,823,210,827,831],{},"5.0 locks the scroll with ",[139,819,814],{"href":820,"rel":821},"https:\u002F\u002Fgithub.com\u002Fhunterliu1003\u002Fscroll-lock",[143],", which replaces the copy of body-scroll-lock that 4.x carried. ",[139,824,826],{"href":825},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#lockscroll","lockScroll",[139,828,830],{"href":829},"\u002Fapi\u002Fcomponents\u002Fvue-final-modal#reservescrollbargap","reserveScrollBarGap"," keep their names and defaults. Two things you may notice:",[833,834,835,849],"ul",{},[836,837,838,839,848],"li",{},"A modal rendered inside a scroll container, for example with ",[123,840,841,844,846],{"className":125,"language":126,"style":127},[129,842,843],{"class":223},"teleportTo",[129,845,426],{"class":166},[129,847,773],{"class":749},", locks that container as well as the page.",[836,850,851,852,868,869,333],{},"A scroll container keeps the room of its scrollbar with ",[123,853,854,857,860,863,865],{"className":125,"language":126,"style":127},[129,855,856],{"class":135},"scrollbar",[129,858,859],{"class":166},"-",[129,861,862],{"class":223},"gutter",[129,864,426],{"class":166},[129,866,867],{"class":135}," stable"," where the browser supports it. The page still gets the scrollbar's width as ",[123,870,871,874,876],{"className":125,"language":126,"style":127},[129,872,873],{"class":135},"padding",[129,875,859],{"class":166},[129,877,878],{"class":135},"right",[233,880,882,885],{"id":881},"open-outside-any-app-context-on-the-server-is-ignored",[123,883,884],{},"open()"," outside any app context on the server is ignored",[119,887,888,889,895,896,902,903,910],{},"On the server, ",[123,890,891,893],{"className":125,"language":126,"style":127},[129,892,185],{"class":131},[129,894,136],{"class":135}," of a modal created outside a component (for example at module level or in a store) and called outside any app context is now ignored with a warning. 4.x opened it in the last created vfm, which can belong to another request when requests run concurrently. Call ",[123,897,898,900],{"className":125,"language":126,"style":127},[129,899,132],{"class":131},[129,901,136],{"class":135}," in ",[123,904,905,908],{"className":125,"language":126,"style":127},[129,906,907],{"class":131},"setup",[129,909,136],{"class":135}," to open a modal during a server render. In the browser nothing changes.",[233,912,914],{"id":913},"a-modal-opened-outside-a-component-opens-once-the-app-has-mounted","A modal opened outside a component opens once the app has mounted",[119,916,917,918,924,925,931,932,935],{},"A modal opened outside a component before the app renders, for example from a Nuxt plugin or a route middleware, is no longer part of the server HTML: the server skips that ",[123,919,920,922],{"className":125,"language":126,"style":127},[129,921,185],{"class":131},[129,923,136],{"class":135}," with a warning and resolves it right away. In the browser the modal opens once the app has mounted, with its enter transition, so hydration never meets a modal the server did not render, whether the code runs on both sides or only in the browser. 4.x rendered such a modal on the server, and one opened only in the browser before the app mounted caused a hydration mismatch. Do not await that ",[123,926,927,929],{"className":125,"language":126,"style":127},[129,928,185],{"class":131},[129,930,136],{"class":135}," before the app mounts: it settles once the modal has opened. To show a modal on the first paint, open it while a component sets up, for example in ",[123,933,934],{},"app.vue"," or in a page.",[119,937,938,939,942,943,945,946,953],{},"A server that polyfills ",[123,940,941],{},"window"," cannot be told apart from a browser by looking at ",[123,944,941],{},", so it has to say it is a server: call ",[123,947,948,951],{"className":125,"language":126,"style":127},[129,949,950],{"class":131},"markServer",[129,952,136],{"class":135}," once, before it renders. The Nuxt module does this for you.",[255,955,958],{"className":125,"code":956,"filename":957,"language":126,"meta":127,"style":127},"import { markServer } from 'vue-final-modal'\n\nmarkServer()\n","server entry",[123,959,960,983,987],{"__ignoreMap":127},[129,961,962,966,968,971,973,976,978,981],{"class":264,"line":265},[129,963,965],{"class":964},"s7zQu","import",[129,967,443],{"class":166},[129,969,970],{"class":135}," markServer",[129,972,512],{"class":166},[129,974,975],{"class":964}," from",[129,977,451],{"class":166},[129,979,980],{"class":271},"vue-final-modal",[129,982,651],{"class":166},[129,984,985],{"class":264,"line":419},[129,986,476],{"emptyLinePlaceholder":475},[129,988,989,991],{"class":264,"line":435},[129,990,950],{"class":131},[129,992,993],{"class":135},"()\n",[233,995,997],{"id":996},"the-nuxt-module-ships-inside-the-package","The Nuxt module ships inside the package",[119,999,1000,1003,1004,1006,1007,1010],{},[123,1001,1002],{},"@vue-final-modal\u002Fnuxt"," is no longer published. The module is part of ",[123,1005,980],{}," as ",[123,1008,1009],{},"vue-final-modal\u002Fnuxt",", so remove the old package and change the module name:",[255,1012,1015],{"className":125,"code":1013,"filename":1014,"language":126,"meta":127,"style":127},"export default defineNuxtConfig({\n  modules: ['vue-final-modal\u002Fnuxt'],\n})\n","nuxt.config.ts",[123,1016,1017,1032,1053],{"__ignoreMap":127},[129,1018,1019,1022,1025,1028,1030],{"class":264,"line":265},[129,1020,1021],{"class":964},"export",[129,1023,1024],{"class":964}," default",[129,1026,1027],{"class":131}," defineNuxtConfig",[129,1029,413],{"class":135},[129,1031,416],{"class":166},[129,1033,1034,1037,1039,1042,1044,1046,1048,1051],{"class":264,"line":419},[129,1035,1036],{"class":422},"  modules",[129,1038,426],{"class":166},[129,1040,1041],{"class":135}," [",[129,1043,457],{"class":166},[129,1045,1009],{"class":271},[129,1047,457],{"class":166},[129,1049,1050],{"class":135},"]",[129,1052,432],{"class":166},[129,1054,1055,1057],{"class":264,"line":435},[129,1056,466],{"class":166},[129,1058,469],{"class":135},[119,1060,1061,1062,1065,1066,1072,1073,1091,1092,1094,1095,333],{},"The module now also auto-imports the components and composables. If another module or your own ",[123,1063,1064],{},"composables\u002F"," directory auto-imports one of the same names, such as a ",[123,1067,1068,1070],{"className":125,"language":126,"style":127},[129,1069,132],{"class":131},[129,1071,136],{"class":135}," of its own, set ",[123,1074,1075,1078,1080,1082,1085,1087,1089],{"className":125,"language":126,"style":127},[129,1076,1077],{"class":223},"vueFinalModal",[129,1079,426],{"class":166},[129,1081,443],{"class":166},[129,1083,1084],{"class":223}," autoImports",[129,1086,426],{"class":166},[129,1088,773],{"class":749},[129,1090,512],{"class":166}," and keep importing from ",[123,1093,980],{},". See ",[139,1096,21],{"href":1097},"\u002Fget-started\u002Fguide\u002Fsetup#nuxt",[233,1099,1101],{"id":1100},"new-capabilities","New capabilities",[119,1103,1104],{},"Not breaking, but worth knowing:",[833,1106,1107,1140,1143,1160,1197,1263],{},[836,1108,1109,161,1113,210,1118,1123,1124,1130,1131,161,1135,1139],{},[123,1110,1111],{"className":125,"language":126,"style":127},[129,1112,386],{"class":135},[123,1114,1115],{"className":125,"language":126,"style":127},[129,1116,1117],{"class":135},"props",[123,1119,1120],{"className":125,"language":126,"style":127},[129,1121,1122],{"class":135},"emits"," of ",[123,1125,1126,1128],{"className":125,"language":126,"style":127},[129,1127,132],{"class":131},[129,1129,136],{"class":135}," accept a ",[123,1132,1133],{"className":125,"language":126,"style":127},[129,1134,375],{"class":135},[123,1136,1137],{"className":125,"language":126,"style":127},[129,1138,380],{"class":135}," or getter for reactive updates.",[836,1141,1142],{},"A modal opened while a component sets up during the server render is part of the server HTML, with its z-index, and hydrates already open: no enter transition plays on the first paint.",[836,1144,1145,1152,1153,1159],{},[123,1146,1147,1150],{"className":125,"language":126,"style":127},[129,1148,1149],{"class":131},"defineTemplate",[129,1151,136],{"class":135}," is a type helper for slot content with props and events (an alternative to ",[123,1154,1155,1157],{"className":125,"language":126,"style":127},[129,1156,207],{"class":131},[129,1158,136],{"class":135},").",[836,1161,1162,1169,1170,1174,1175,161,1184,210,1190,1196],{},[123,1163,1164,1167],{"className":125,"language":126,"style":127},[129,1165,1166],{"class":131},"createModalsProvider",[129,1168,136],{"class":135}," creates an ",[139,1171,1173],{"href":1172},"\u002Fapi\u002Fcomponents\u002Fmodals-container#advanced-isolated-instances","isolated instance"," with its own ",[123,1176,1177,1179,1182],{"className":125,"language":126,"style":127},[129,1178,167],{"class":135},[129,1180,1181],{"class":223},"ModalsProvider",[129,1183,227],{"class":135},[123,1185,1186,1188],{"className":125,"language":126,"style":127},[129,1187,132],{"class":131},[129,1189,136],{"class":135},[123,1191,1192,1194],{"className":125,"language":126,"style":127},[129,1193,200],{"class":131},[129,1195,136],{"class":135}," for advanced scenarios such as micro frontends.",[836,1198,1199,1200,210,1206,1212,1213,1219,1220,1226,1227,1236,1237,1246,1247,1250,1251,1258,1259,333],{},"The promises of ",[123,1201,1202,1204],{"className":125,"language":126,"style":127},[129,1203,185],{"class":131},[129,1205,136],{"class":135},[123,1207,1208,1210],{"className":125,"language":126,"style":127},[129,1209,193],{"class":131},[129,1211,136],{"class":135},", from ",[123,1214,1215,1217],{"className":125,"language":126,"style":127},[129,1216,132],{"class":131},[129,1218,136],{"class":135}," and from ",[123,1221,1222,1224],{"className":125,"language":126,"style":127},[129,1223,200],{"class":131},[129,1225,136],{"class":135},", always settle: with ",[123,1228,1229,1231,1234],{"className":125,"language":126,"style":127},[129,1230,457],{"class":166},[129,1232,1233],{"class":271},"opened",[129,1235,457],{"class":166}," or ",[123,1238,1239,1241,1244],{"className":125,"language":126,"style":127},[129,1240,457],{"class":166},[129,1242,1243],{"class":271},"closed",[129,1245,457],{"class":166}," once the transition has finished, or with a message when the modal never got there, for example when ",[123,1248,1249],{},"beforeOpen"," called ",[123,1252,1253,1256],{"className":125,"language":126,"style":127},[129,1254,1255],{"class":131},"stop",[129,1257,136],{"class":135}," or the modal was destroyed first. See ",[139,1260,1262],{"href":1261},"\u002Fapi\u002Fcomposables\u002Fuse-modal#what-open-and-close-resolve-with","what they resolve with",[836,1264,1265,1280,1281,1293,1294,333],{},[123,1266,1267,1270,1272,1274,1276,1278],{"className":125,"language":126,"style":127},[129,1268,1269],{"class":131},"require",[129,1271,413],{"class":135},[129,1273,457],{"class":166},[129,1275,980],{"class":271},[129,1277,457],{"class":166},[129,1279,619],{"class":135}," loads a CommonJS build with its own ",[123,1282,1283,1285,1288,1290],{"className":125,"language":126,"style":127},[129,1284,333],{"class":166},[129,1286,1287],{"class":135},"d",[129,1289,333],{"class":166},[129,1291,1292],{"class":135},"cts"," types instead of the UMD build. The UMD build is still there for ",[139,1295,1297],{"href":1296},"\u002Fget-started\u002Fguide\u002Fsetup#from-a-cdn","CDNs",[233,1299,1301],{"id":1300},"summary","Summary",[1303,1304,1305,1318],"table",{},[1306,1307,1308],"thead",{},[1309,1310,1311,1315],"tr",{},[1312,1313,1314],"th",{},"4.x",[1312,1316,1317],{},"5.0",[1319,1320,1321,1336,1345,1357,1369,1383,1394,1405,1416,1431,1442,1453,1463,1476,1488,1504,1520],"tbody",{},[1309,1322,1323,1333],{},[1324,1325,1326,1329,1330],"td",{},[123,1327,1328],{},"createVfm()"," + ",[123,1331,1332],{},"app.use(vfm)",[1324,1334,1335],{},"Unchanged",[1309,1337,1338,1343],{},[1324,1339,1340],{},[123,1341,1342],{},"\u003CModalsContainer \u002F>",[1324,1344,1335],{},[1309,1346,1347,1355],{},[1324,1348,1349,188,1352],{},[123,1350,1351],{},"useModal().open()",[123,1353,1354],{},".close()",[1324,1356,1335],{},[1309,1358,1359,1367],{},[1324,1360,1361,188,1364],{},[123,1362,1363],{},"defaultModelValue",[123,1365,1366],{},"keepAlive",[1324,1368,1335],{},[1309,1370,1371,1376],{},[1324,1372,1373],{},[123,1374,1375],{},"useModalSlot()",[1324,1377,1378,1379,1382],{},"Unchanged (",[123,1380,1381],{},"defineTemplate()"," is the new alternative)",[1309,1384,1385,1392],{},[1324,1386,1387,188,1390],{},[123,1388,1389],{},"this.$vfm",[123,1391,64],{},[1324,1393,1335],{},[1309,1395,1396,1400],{},[1324,1397,1398],{},[123,1399,294],{},[1324,1401,1402,1403],{},"Removed, use the functions returned by ",[123,1404,60],{},[1309,1406,1407,1411],{},[1324,1408,1409],{},[123,1410,344],{},[1324,1412,1413,1414],{},"Removed, use reactive ",[123,1415,386],{},[1309,1417,1418,1422],{},[1324,1419,1420],{},[123,1421,347],{},[1324,1423,1413,1424,601,1426,188,1428,1430],{},[123,1425,386],{},[123,1427,375],{},[123,1429,380],{}," \u002F getter)",[1309,1432,1433,1437],{},[1324,1434,1435],{},[123,1436,673],{},[1324,1438,1439,1440],{},"Removed, use ",[139,1441,64],{"href":65},[1309,1443,1444,1450],{},[1324,1445,1446,1447,1449],{},"Server ",[123,1448,884],{}," outside any app context",[1324,1451,1452],{},"Ignored with a warning",[1309,1454,1455,1460],{},[1324,1456,1457,1459],{},[123,1458,884],{}," from a Nuxt plugin or route middleware",[1324,1461,1462],{},"Opens in the browser once the app has mounted",[1309,1464,1465,1470],{},[1324,1466,1467],{},[123,1468,1469],{},"modules: ['@vue-final-modal\u002Fnuxt']",[1324,1471,1472,1475],{},[123,1473,1474],{},"modules: ['vue-final-modal\u002Fnuxt']",", no extra package",[1309,1477,1478,1481],{},[1324,1479,1480],{},"Nuxt: import the components and composables",[1324,1482,1483,1484,1487],{},"Auto-imported, ",[123,1485,1486],{},"vueFinalModal: { autoImports: false }"," to opt out",[1309,1489,1490,1498],{},[1324,1491,1492,210,1495,1497],{},[123,1493,1494],{},"@vueuse\u002F*",[123,1496,248],{}," as dependencies, Vue 3.2+",[1324,1499,1500,1501,1503],{},"Peer dependencies with ",[123,1502,144],{}," (add them yourself with Yarn), Vue 3.3+",[1309,1505,1506,1514],{},[1324,1507,1508,1510,1511],{},[123,1509,729],{}," options replace ",[123,1512,1513],{},"{ allowOutsideClick: true }",[1324,1515,1516,1517],{},"Merged over ",[123,1518,1519],{},"{ allowOutsideClick: true, escapeDeactivates: false }",[1309,1521,1522,1525],{},[1324,1523,1524],{},"Vendored body-scroll-lock for the page",[1324,1526,1527,1529],{},[123,1528,814],{},", also locks the scroll container a modal is rendered in",[114,1531,1533],{"id":1532},"migrating-from-3x-to-40","Migrating from 3.x to 4.0",[119,1535,1536,1537,1542],{},"Please check the ",[139,1538,1541],{"href":1539,"rel":1540},"https:\u002F\u002Fv4.vue-final-modal.org",[143],"vue-final-modal 4.x documentation"," for the 3.x to 4.0 migration guide, then migrate to 5.0 from there.",[1544,1545,1546],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":127,"searchDepth":419,"depth":419,"links":1548},[1549,1568],{"id":116,"depth":419,"text":117,"children":1550},[1551,1552,1554,1556,1558,1560,1562,1564,1565,1566,1567],{"id":235,"depth":435,"text":236},{"id":290,"depth":435,"text":1553},"Removed vfm.dynamicModals",{"id":341,"depth":435,"text":1555},"Removed useModal().options and patchOptions()",{"id":670,"depth":435,"text":1557},"Removed getModalExposed()",{"id":726,"depth":435,"text":1559},"focusTrap options are merged over the defaults",{"id":810,"depth":435,"text":1561},"Scroll locking moved to @hunterliu\u002Fscroll-lock",{"id":881,"depth":435,"text":1563},"open() outside any app context on the server is ignored",{"id":913,"depth":435,"text":914},{"id":996,"depth":435,"text":997},{"id":1100,"depth":435,"text":1101},{"id":1300,"depth":435,"text":1301},{"id":1532,"depth":419,"text":1533},"This document should help you navigate the tricky path of migrating between different versions of vue-final-modal that introduced breaking changes.","md",null,{},{"title":25,"description":1569},"EM5vYwnNUsjQFlo3OXyl7yaQ2VYEyoHtPtJNdEt2Omw",[1576,1578],{"title":21,"path":22,"stem":23,"description":1577,"children":-1},"How to start with Vue Final Modal, by creating a fresh new project or adding it to your Vue application.",{"title":29,"path":30,"stem":31,"description":1579,"children":-1},"The exported types in VueFinalModal.",1791743377607]