[{"data":1,"prerenderedAt":2307},["ShallowReactive",2],{"\u002Farticles\u002Fremote-back-button-js":3,"\u002Farticles\u002Fremote-back-button-js-surround":2296},{"id":4,"title":5,"author":6,"body":7,"date":2281,"description":13,"draft":2282,"extension":2283,"image":6,"lastmod":2281,"meta":2284,"minRead":6,"navigation":186,"path":2292,"seo":2293,"stem":2294,"__hash__":2295},"articles\u002Farticles\u002Fremote-back-button-js.md","How to Handle Browser Back Button Navigation Events in Vue 3",null,{"type":8,"value":9,"toc":2257},"minimark",[10,14,19,22,35,38,49,52,56,64,82,85,90,1024,1028,1032,1035,1119,1122,1126,1129,1137,1190,1194,1197,1266,1269,1273,1276,1377,1381,1385,1608,1612,1936,1940,1946,1950,1953,2023,2027,2030,2123,2127,2130,2174,2178,2216,2220,2226,2229,2232,2246,2249,2253],[11,12,13],"p",{},"As web applications become more sophisticated, managing browser navigation becomes increasingly complex. One common challenge is handling the browser's back button when dealing with modals, dialogs, or drawers. Today, we'll explore a powerful Vue 3 composable that solves this problem while maintaining a smooth user experience.",[15,16,18],"h2",{"id":17},"the-challenge","The Challenge",[11,20,21],{},"Have you ever encountered these scenarios?",[23,24,25,29,32],"ol",{},[26,27,28],"li",{},"User opens a modal dialog",[26,30,31],{},"User clicks the browser's back button",[26,33,34],{},"Instead of closing the modal, the whole application navigates back",[11,36,37],{},"Or maybe:",[23,39,40,43,46],{},[26,41,42],{},"User opens a modal",[26,44,45],{},"Modal closes when back button is pressed (good!)",[26,47,48],{},"But the page unexpectedly scrolls to the top (bad!)",[11,50,51],{},"These are common issues that can frustrate users and make your application feel unprofessional. Let's solve them with a robust solution.",[15,53,55],{"id":54},"introducing-usebackbutton-composable","Introducing useBackButton Composable",[11,57,58,59,63],{},"Our ",[60,61,62],"code",{},"useBackButton"," composable is designed to:",[65,66,67,70,73,76,79],"ul",{},[26,68,69],{},"Intercept back button clicks",[26,71,72],{},"Close modals\u002Fdialogs instead of navigating",[26,74,75],{},"Preserve scroll position when appropriate",[26,77,78],{},"Handle edge cases like double-clicks",[26,80,81],{},"Maintain a clean browser history",[11,83,84],{},"Here's how we build it:",[86,87,89],"h3",{"id":88},"the-core-implementation","The Core Implementation",[91,92,93],"code-collapse",{},[94,95,101],"pre",{"className":96,"code":97,"filename":98,"language":99,"meta":100,"style":100},"language-js shiki shiki-themes material-theme-lighter one-light one-dark-pro","\u002F\u002F composables\u002FuseBackButton.js\nimport { watch, onMounted, onUnmounted } from \"vue\";\nimport { useGlobalStore } from \"@\u002Fstores\u002Fglobal\";\n\nexport function useBackButton(contentVisibleRef) {\n  const globalStore = useGlobalStore();\n\n  const handlePopState = () => {\n    if (contentVisibleRef.value) {\n      \u002F\u002F Add history.pushState first to prevent navigation\n      history.pushState(null, \"\", window.location.pathname);\n      history.pushState(null, \"\", window.location.pathname); \u002F\u002F Add twice to ensure it works with double back click\n\n      globalStore.isBackBtnPressed = true;\n      contentVisibleRef.value = false;\n    }\n  };\n\n  onMounted(() => {\n    \u002F\u002F Add initial history state\n    history.pushState(null, \"\", window.location.pathname);\n    window.addEventListener(\"popstate\", handlePopState);\n  });\n\n  onUnmounted(() => {\n    window.removeEventListener(\"popstate\", handlePopState);\n  });\n\n  watch(contentVisibleRef, (newValue) => {\n    if (!newValue) {\n      setTimeout(() => {\n        globalStore.isBackBtnPressed = false;\n      }, 100);\n    }\n  });\n\n  watch(\n    () => globalStore.isBackBtnPressed,\n    (newValue) => {\n      if (newValue) {\n        \u002F\u002F Ensure route change is prevented when state is true\n        history.pushState(null, \"\", window.location.pathname);\n      }\n    },\n  );\n}\n\n\u002F\u002F router guard\nrouter.beforeEach((to, from, next) => {\n  if (globals.isBackBtnPressed) {\n    globals.isBackBtnPressed = false; \u002F\u002F Reset immediately\n    next(false); \u002F\u002F Prevent navigation\n    return;\n  }\n  next();\n});\n\n\u002F\u002F global store\nexport const useGlobalStore = defineStore(\"global\", {\n  state: () => ({\n    isBackBtnPressed: false,\n  }),\n});\n","useBackButton.js","js","",[60,102,103,112,158,181,188,215,237,242,261,285,291,333,370,375,394,411,417,423,428,442,448,482,511,521,526,540,566,575,580,603,619,633,649,663,668,677,682,690,707,721,735,741,775,781,787,795,801,806,812,846,865,884,902,910,916,926,936,941,947,975,993,1006,1015],{"__ignoreMap":100},[104,105,108],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"seacL","\u002F\u002F composables\u002FuseBackButton.js\n",[104,113,115,119,123,127,130,133,135,138,141,144,148,152,155],{"class":106,"line":114},2,[104,116,118],{"class":117},"sQsOY","import",[104,120,122],{"class":121},"sB4Xn"," {",[104,124,126],{"class":125},"s8dPH"," watch",[104,128,129],{"class":121},",",[104,131,132],{"class":125}," onMounted",[104,134,129],{"class":121},[104,136,137],{"class":125}," onUnmounted",[104,139,140],{"class":121}," }",[104,142,143],{"class":117}," from",[104,145,147],{"class":146},"sVH1b"," \"",[104,149,151],{"class":150},"spZWa","vue",[104,153,154],{"class":146},"\"",[104,156,157],{"class":121},";\n",[104,159,161,163,165,168,170,172,174,177,179],{"class":106,"line":160},3,[104,162,118],{"class":117},[104,164,122],{"class":121},[104,166,167],{"class":125}," useGlobalStore",[104,169,140],{"class":121},[104,171,143],{"class":117},[104,173,147],{"class":146},[104,175,176],{"class":150},"@\u002Fstores\u002Fglobal",[104,178,154],{"class":146},[104,180,157],{"class":121},[104,182,184],{"class":106,"line":183},4,[104,185,187],{"emptyLinePlaceholder":186},true,"\n",[104,189,191,194,198,202,205,209,212],{"class":106,"line":190},5,[104,192,193],{"class":117},"export",[104,195,197],{"class":196},"sJvVP"," function",[104,199,201],{"class":200},"spnjr"," useBackButton",[104,203,204],{"class":121},"(",[104,206,208],{"class":207},"s5f2p","contentVisibleRef",[104,210,211],{"class":121},")",[104,213,214],{"class":121}," {\n",[104,216,218,221,225,229,231,235],{"class":106,"line":217},6,[104,219,220],{"class":196},"  const",[104,222,224],{"class":223},"sMm83"," globalStore",[104,226,228],{"class":227},"syPST"," =",[104,230,167],{"class":200},[104,232,234],{"class":233},"sA0eD","()",[104,236,157],{"class":121},[104,238,240],{"class":106,"line":239},7,[104,241,187],{"emptyLinePlaceholder":186},[104,243,245,247,251,253,256,259],{"class":106,"line":244},8,[104,246,220],{"class":196},[104,248,250],{"class":249},"svfkx"," handlePopState",[104,252,228],{"class":227},[104,254,255],{"class":121}," ()",[104,257,258],{"class":196}," =>",[104,260,214],{"class":121},[104,262,264,267,270,273,276,279,282],{"class":106,"line":263},9,[104,265,266],{"class":117},"    if",[104,268,269],{"class":233}," (",[104,271,208],{"class":272},"scCn_",[104,274,275],{"class":121},".",[104,277,278],{"class":125},"value",[104,280,281],{"class":233},") ",[104,283,284],{"class":121},"{\n",[104,286,288],{"class":106,"line":287},10,[104,289,290],{"class":110},"      \u002F\u002F Add history.pushState first to prevent navigation\n",[104,292,294,297,299,302,304,308,310,313,315,318,320,324,326,329,331],{"class":106,"line":293},11,[104,295,296],{"class":272},"      history",[104,298,275],{"class":121},[104,300,301],{"class":200},"pushState",[104,303,204],{"class":233},[104,305,307],{"class":306},"svDm9","null",[104,309,129],{"class":121},[104,311,312],{"class":146}," \"\"",[104,314,129],{"class":121},[104,316,317],{"class":272}," window",[104,319,275],{"class":121},[104,321,323],{"class":322},"sDC5J","location",[104,325,275],{"class":121},[104,327,328],{"class":125},"pathname",[104,330,211],{"class":233},[104,332,157],{"class":121},[104,334,336,338,340,342,344,346,348,350,352,354,356,358,360,362,364,367],{"class":106,"line":335},12,[104,337,296],{"class":272},[104,339,275],{"class":121},[104,341,301],{"class":200},[104,343,204],{"class":233},[104,345,307],{"class":306},[104,347,129],{"class":121},[104,349,312],{"class":146},[104,351,129],{"class":121},[104,353,317],{"class":272},[104,355,275],{"class":121},[104,357,323],{"class":322},[104,359,275],{"class":121},[104,361,328],{"class":125},[104,363,211],{"class":233},[104,365,366],{"class":121},";",[104,368,369],{"class":110}," \u002F\u002F Add twice to ensure it works with double back click\n",[104,371,373],{"class":106,"line":372},13,[104,374,187],{"emptyLinePlaceholder":186},[104,376,378,381,383,386,388,392],{"class":106,"line":377},14,[104,379,380],{"class":272},"      globalStore",[104,382,275],{"class":121},[104,384,385],{"class":125},"isBackBtnPressed",[104,387,228],{"class":227},[104,389,391],{"class":390},"sbyCm"," true",[104,393,157],{"class":121},[104,395,397,400,402,404,406,409],{"class":106,"line":396},15,[104,398,399],{"class":272},"      contentVisibleRef",[104,401,275],{"class":121},[104,403,278],{"class":125},[104,405,228],{"class":227},[104,407,408],{"class":390}," false",[104,410,157],{"class":121},[104,412,414],{"class":106,"line":413},16,[104,415,416],{"class":121},"    }\n",[104,418,420],{"class":106,"line":419},17,[104,421,422],{"class":121},"  };\n",[104,424,426],{"class":106,"line":425},18,[104,427,187],{"emptyLinePlaceholder":186},[104,429,431,434,436,438,440],{"class":106,"line":430},19,[104,432,433],{"class":200},"  onMounted",[104,435,204],{"class":233},[104,437,234],{"class":121},[104,439,258],{"class":196},[104,441,214],{"class":121},[104,443,445],{"class":106,"line":444},20,[104,446,447],{"class":110},"    \u002F\u002F Add initial history state\n",[104,449,451,454,456,458,460,462,464,466,468,470,472,474,476,478,480],{"class":106,"line":450},21,[104,452,453],{"class":272},"    history",[104,455,275],{"class":121},[104,457,301],{"class":200},[104,459,204],{"class":233},[104,461,307],{"class":306},[104,463,129],{"class":121},[104,465,312],{"class":146},[104,467,129],{"class":121},[104,469,317],{"class":272},[104,471,275],{"class":121},[104,473,323],{"class":322},[104,475,275],{"class":121},[104,477,328],{"class":125},[104,479,211],{"class":233},[104,481,157],{"class":121},[104,483,485,488,490,493,495,497,500,502,504,507,509],{"class":106,"line":484},22,[104,486,487],{"class":272},"    window",[104,489,275],{"class":121},[104,491,492],{"class":200},"addEventListener",[104,494,204],{"class":233},[104,496,154],{"class":146},[104,498,499],{"class":150},"popstate",[104,501,154],{"class":146},[104,503,129],{"class":121},[104,505,250],{"class":506},"sWjah",[104,508,211],{"class":233},[104,510,157],{"class":121},[104,512,514,517,519],{"class":106,"line":513},23,[104,515,516],{"class":121},"  }",[104,518,211],{"class":233},[104,520,157],{"class":121},[104,522,524],{"class":106,"line":523},24,[104,525,187],{"emptyLinePlaceholder":186},[104,527,529,532,534,536,538],{"class":106,"line":528},25,[104,530,531],{"class":200},"  onUnmounted",[104,533,204],{"class":233},[104,535,234],{"class":121},[104,537,258],{"class":196},[104,539,214],{"class":121},[104,541,543,545,547,550,552,554,556,558,560,562,564],{"class":106,"line":542},26,[104,544,487],{"class":272},[104,546,275],{"class":121},[104,548,549],{"class":200},"removeEventListener",[104,551,204],{"class":233},[104,553,154],{"class":146},[104,555,499],{"class":150},[104,557,154],{"class":146},[104,559,129],{"class":121},[104,561,250],{"class":506},[104,563,211],{"class":233},[104,565,157],{"class":121},[104,567,569,571,573],{"class":106,"line":568},27,[104,570,516],{"class":121},[104,572,211],{"class":233},[104,574,157],{"class":121},[104,576,578],{"class":106,"line":577},28,[104,579,187],{"emptyLinePlaceholder":186},[104,581,583,586,588,590,592,594,597,599,601],{"class":106,"line":582},29,[104,584,585],{"class":200},"  watch",[104,587,204],{"class":233},[104,589,208],{"class":506},[104,591,129],{"class":121},[104,593,269],{"class":121},[104,595,596],{"class":207},"newValue",[104,598,211],{"class":121},[104,600,258],{"class":196},[104,602,214],{"class":121},[104,604,606,608,610,613,615,617],{"class":106,"line":605},30,[104,607,266],{"class":117},[104,609,269],{"class":233},[104,611,612],{"class":227},"!",[104,614,596],{"class":506},[104,616,281],{"class":233},[104,618,284],{"class":121},[104,620,622,625,627,629,631],{"class":106,"line":621},31,[104,623,624],{"class":200},"      setTimeout",[104,626,204],{"class":233},[104,628,234],{"class":121},[104,630,258],{"class":196},[104,632,214],{"class":121},[104,634,636,639,641,643,645,647],{"class":106,"line":635},32,[104,637,638],{"class":272},"        globalStore",[104,640,275],{"class":121},[104,642,385],{"class":125},[104,644,228],{"class":227},[104,646,408],{"class":390},[104,648,157],{"class":121},[104,650,652,655,659,661],{"class":106,"line":651},33,[104,653,654],{"class":121},"      },",[104,656,658],{"class":657},"sriKn"," 100",[104,660,211],{"class":233},[104,662,157],{"class":121},[104,664,666],{"class":106,"line":665},34,[104,667,416],{"class":121},[104,669,671,673,675],{"class":106,"line":670},35,[104,672,516],{"class":121},[104,674,211],{"class":233},[104,676,157],{"class":121},[104,678,680],{"class":106,"line":679},36,[104,681,187],{"emptyLinePlaceholder":186},[104,683,685,687],{"class":106,"line":684},37,[104,686,585],{"class":200},[104,688,689],{"class":233},"(\n",[104,691,693,696,698,700,702,704],{"class":106,"line":692},38,[104,694,695],{"class":121},"    ()",[104,697,258],{"class":196},[104,699,224],{"class":272},[104,701,275],{"class":121},[104,703,385],{"class":125},[104,705,706],{"class":121},",\n",[104,708,710,713,715,717,719],{"class":106,"line":709},39,[104,711,712],{"class":121},"    (",[104,714,596],{"class":207},[104,716,211],{"class":121},[104,718,258],{"class":196},[104,720,214],{"class":121},[104,722,724,727,729,731,733],{"class":106,"line":723},40,[104,725,726],{"class":117},"      if",[104,728,269],{"class":233},[104,730,596],{"class":506},[104,732,281],{"class":233},[104,734,284],{"class":121},[104,736,738],{"class":106,"line":737},41,[104,739,740],{"class":110},"        \u002F\u002F Ensure route change is prevented when state is true\n",[104,742,744,747,749,751,753,755,757,759,761,763,765,767,769,771,773],{"class":106,"line":743},42,[104,745,746],{"class":272},"        history",[104,748,275],{"class":121},[104,750,301],{"class":200},[104,752,204],{"class":233},[104,754,307],{"class":306},[104,756,129],{"class":121},[104,758,312],{"class":146},[104,760,129],{"class":121},[104,762,317],{"class":272},[104,764,275],{"class":121},[104,766,323],{"class":322},[104,768,275],{"class":121},[104,770,328],{"class":125},[104,772,211],{"class":233},[104,774,157],{"class":121},[104,776,778],{"class":106,"line":777},43,[104,779,780],{"class":121},"      }\n",[104,782,784],{"class":106,"line":783},44,[104,785,786],{"class":121},"    },\n",[104,788,790,793],{"class":106,"line":789},45,[104,791,792],{"class":233},"  )",[104,794,157],{"class":121},[104,796,798],{"class":106,"line":797},46,[104,799,800],{"class":121},"}\n",[104,802,804],{"class":106,"line":803},47,[104,805,187],{"emptyLinePlaceholder":186},[104,807,809],{"class":106,"line":808},48,[104,810,811],{"class":110},"\u002F\u002F router guard\n",[104,813,815,818,820,823,826,828,831,833,835,837,840,842,844],{"class":106,"line":814},49,[104,816,817],{"class":272},"router",[104,819,275],{"class":121},[104,821,822],{"class":200},"beforeEach",[104,824,204],{"class":825},"sM89C",[104,827,204],{"class":121},[104,829,830],{"class":207},"to",[104,832,129],{"class":121},[104,834,143],{"class":207},[104,836,129],{"class":121},[104,838,839],{"class":207}," next",[104,841,211],{"class":121},[104,843,258],{"class":196},[104,845,214],{"class":121},[104,847,849,852,854,857,859,861,863],{"class":106,"line":848},50,[104,850,851],{"class":117},"  if",[104,853,269],{"class":233},[104,855,856],{"class":272},"globals",[104,858,275],{"class":121},[104,860,385],{"class":125},[104,862,281],{"class":233},[104,864,284],{"class":121},[104,866,868,871,873,875,877,879,881],{"class":106,"line":867},51,[104,869,870],{"class":272},"    globals",[104,872,275],{"class":121},[104,874,385],{"class":125},[104,876,228],{"class":227},[104,878,408],{"class":390},[104,880,366],{"class":121},[104,882,883],{"class":110}," \u002F\u002F Reset immediately\n",[104,885,887,890,892,895,897,899],{"class":106,"line":886},52,[104,888,889],{"class":200},"    next",[104,891,204],{"class":233},[104,893,894],{"class":390},"false",[104,896,211],{"class":233},[104,898,366],{"class":121},[104,900,901],{"class":110}," \u002F\u002F Prevent navigation\n",[104,903,905,908],{"class":106,"line":904},53,[104,906,907],{"class":117},"    return",[104,909,157],{"class":121},[104,911,913],{"class":106,"line":912},54,[104,914,915],{"class":121},"  }\n",[104,917,919,922,924],{"class":106,"line":918},55,[104,920,921],{"class":200},"  next",[104,923,234],{"class":233},[104,925,157],{"class":121},[104,927,929,932,934],{"class":106,"line":928},56,[104,930,931],{"class":121},"}",[104,933,211],{"class":825},[104,935,157],{"class":121},[104,937,939],{"class":106,"line":938},57,[104,940,187],{"emptyLinePlaceholder":186},[104,942,944],{"class":106,"line":943},58,[104,945,946],{"class":110},"\u002F\u002F global store\n",[104,948,950,952,955,957,959,962,964,966,969,971,973],{"class":106,"line":949},59,[104,951,193],{"class":117},[104,953,954],{"class":196}," const",[104,956,167],{"class":223},[104,958,228],{"class":227},[104,960,961],{"class":200}," defineStore",[104,963,204],{"class":825},[104,965,154],{"class":146},[104,967,968],{"class":150},"global",[104,970,154],{"class":146},[104,972,129],{"class":121},[104,974,214],{"class":121},[104,976,978,981,985,987,989,991],{"class":106,"line":977},60,[104,979,980],{"class":200},"  state",[104,982,984],{"class":983},"saKOp",":",[104,986,255],{"class":121},[104,988,258],{"class":196},[104,990,269],{"class":825},[104,992,284],{"class":121},[104,994,996,1000,1002,1004],{"class":106,"line":995},61,[104,997,999],{"class":998},"su13H","    isBackBtnPressed",[104,1001,984],{"class":983},[104,1003,408],{"class":390},[104,1005,706],{"class":121},[104,1007,1009,1011,1013],{"class":106,"line":1008},62,[104,1010,516],{"class":121},[104,1012,211],{"class":825},[104,1014,706],{"class":121},[104,1016,1018,1020,1022],{"class":106,"line":1017},63,[104,1019,931],{"class":121},[104,1021,211],{"class":825},[104,1023,157],{"class":121},[15,1025,1027],{"id":1026},"how-it-works","How It Works",[86,1029,1031],{"id":1030},"_1-history-state-management","1. History State Management",[11,1033,1034],{},"The composable uses the History API to manage browser navigation. When mounted, it adds an initial state:",[94,1036,1038],{"className":96,"code":1037,"language":99,"meta":100,"style":100},"onMounted(() => {\n  history.pushState(null, \"\", window.location.pathname);\n  window.addEventListener(\"popstate\", handlePopState);\n});\n",[60,1039,1040,1053,1086,1111],{"__ignoreMap":100},[104,1041,1042,1045,1047,1049,1051],{"class":106,"line":107},[104,1043,1044],{"class":200},"onMounted",[104,1046,204],{"class":825},[104,1048,234],{"class":121},[104,1050,258],{"class":196},[104,1052,214],{"class":121},[104,1054,1055,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084],{"class":106,"line":114},[104,1056,1057],{"class":272},"  history",[104,1059,275],{"class":121},[104,1061,301],{"class":200},[104,1063,204],{"class":233},[104,1065,307],{"class":306},[104,1067,129],{"class":121},[104,1069,312],{"class":146},[104,1071,129],{"class":121},[104,1073,317],{"class":272},[104,1075,275],{"class":121},[104,1077,323],{"class":322},[104,1079,275],{"class":121},[104,1081,328],{"class":125},[104,1083,211],{"class":233},[104,1085,157],{"class":121},[104,1087,1088,1091,1093,1095,1097,1099,1101,1103,1105,1107,1109],{"class":106,"line":160},[104,1089,1090],{"class":272},"  window",[104,1092,275],{"class":121},[104,1094,492],{"class":200},[104,1096,204],{"class":233},[104,1098,154],{"class":146},[104,1100,499],{"class":150},[104,1102,154],{"class":146},[104,1104,129],{"class":121},[104,1106,250],{"class":506},[104,1108,211],{"class":233},[104,1110,157],{"class":121},[104,1112,1113,1115,1117],{"class":106,"line":183},[104,1114,931],{"class":121},[104,1116,211],{"class":825},[104,1118,157],{"class":121},[11,1120,1121],{},"This creates a \"buffer\" state that we can use to detect back button clicks.",[86,1123,1125],{"id":1124},"_2-scroll-position-management","2. Scroll Position Management",[11,1127,1128],{},"We implement smart scroll behavior:",[65,1130,1131,1134],{},[26,1132,1133],{},"Preserve scroll position when closing modals via back button",[26,1135,1136],{},"Allow normal scroll-to-top behavior for regular navigation",[94,1138,1140],{"className":96,"code":1139,"language":99,"meta":100,"style":100},"if (\"scrollRestoration\" in history) {\n  history.scrollRestoration = \"manual\";\n}\n",[60,1141,1142,1167,1186],{"__ignoreMap":100},[104,1143,1144,1147,1149,1151,1154,1156,1160,1163,1165],{"class":106,"line":107},[104,1145,1146],{"class":117},"if",[104,1148,269],{"class":825},[104,1150,154],{"class":146},[104,1152,1153],{"class":150},"scrollRestoration",[104,1155,154],{"class":146},[104,1157,1159],{"class":1158},"sUnt3"," in",[104,1161,1162],{"class":506}," history",[104,1164,281],{"class":825},[104,1166,284],{"class":121},[104,1168,1169,1171,1173,1175,1177,1179,1182,1184],{"class":106,"line":114},[104,1170,1057],{"class":272},[104,1172,275],{"class":121},[104,1174,1153],{"class":125},[104,1176,228],{"class":227},[104,1178,147],{"class":146},[104,1180,1181],{"class":150},"manual",[104,1183,154],{"class":146},[104,1185,157],{"class":121},[104,1187,1188],{"class":106,"line":160},[104,1189,800],{"class":121},[86,1191,1193],{"id":1192},"_3-state-management-with-pinia","3. State Management with Pinia",[11,1195,1196],{},"We use a global store to track back button states:",[94,1198,1200],{"className":96,"code":1199,"language":99,"meta":100,"style":100},"export const useGlobalStore = defineStore(\"global\", {\n  state: () => ({\n    isBackBtnPressed: false,\n  }),\n});\n",[60,1201,1202,1226,1240,1250,1258],{"__ignoreMap":100},[104,1203,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224],{"class":106,"line":107},[104,1205,193],{"class":117},[104,1207,954],{"class":196},[104,1209,167],{"class":223},[104,1211,228],{"class":227},[104,1213,961],{"class":200},[104,1215,204],{"class":825},[104,1217,154],{"class":146},[104,1219,968],{"class":150},[104,1221,154],{"class":146},[104,1223,129],{"class":121},[104,1225,214],{"class":121},[104,1227,1228,1230,1232,1234,1236,1238],{"class":106,"line":114},[104,1229,980],{"class":200},[104,1231,984],{"class":983},[104,1233,255],{"class":121},[104,1235,258],{"class":196},[104,1237,269],{"class":825},[104,1239,284],{"class":121},[104,1241,1242,1244,1246,1248],{"class":106,"line":160},[104,1243,999],{"class":998},[104,1245,984],{"class":983},[104,1247,408],{"class":390},[104,1249,706],{"class":121},[104,1251,1252,1254,1256],{"class":106,"line":183},[104,1253,516],{"class":121},[104,1255,211],{"class":825},[104,1257,706],{"class":121},[104,1259,1260,1262,1264],{"class":106,"line":190},[104,1261,931],{"class":121},[104,1263,211],{"class":825},[104,1265,157],{"class":121},[11,1267,1268],{},"This helps coordinate between the composable and router guards.",[86,1270,1272],{"id":1271},"_4-router-integration","4. Router Integration",[11,1274,1275],{},"The router guard prevents unwanted navigation:",[94,1277,1279],{"className":96,"code":1278,"language":99,"meta":100,"style":100},"router.beforeEach((to, from, next) => {\n  if (globals.isBackBtnPressed) {\n    globals.isBackBtnPressed = false;\n    next(false);\n    return;\n  }\n  next();\n});\n",[60,1280,1281,1309,1325,1339,1351,1357,1361,1369],{"__ignoreMap":100},[104,1282,1283,1285,1287,1289,1291,1293,1295,1297,1299,1301,1303,1305,1307],{"class":106,"line":107},[104,1284,817],{"class":272},[104,1286,275],{"class":121},[104,1288,822],{"class":200},[104,1290,204],{"class":825},[104,1292,204],{"class":121},[104,1294,830],{"class":207},[104,1296,129],{"class":121},[104,1298,143],{"class":207},[104,1300,129],{"class":121},[104,1302,839],{"class":207},[104,1304,211],{"class":121},[104,1306,258],{"class":196},[104,1308,214],{"class":121},[104,1310,1311,1313,1315,1317,1319,1321,1323],{"class":106,"line":114},[104,1312,851],{"class":117},[104,1314,269],{"class":233},[104,1316,856],{"class":272},[104,1318,275],{"class":121},[104,1320,385],{"class":125},[104,1322,281],{"class":233},[104,1324,284],{"class":121},[104,1326,1327,1329,1331,1333,1335,1337],{"class":106,"line":160},[104,1328,870],{"class":272},[104,1330,275],{"class":121},[104,1332,385],{"class":125},[104,1334,228],{"class":227},[104,1336,408],{"class":390},[104,1338,157],{"class":121},[104,1340,1341,1343,1345,1347,1349],{"class":106,"line":183},[104,1342,889],{"class":200},[104,1344,204],{"class":233},[104,1346,894],{"class":390},[104,1348,211],{"class":233},[104,1350,157],{"class":121},[104,1352,1353,1355],{"class":106,"line":190},[104,1354,907],{"class":117},[104,1356,157],{"class":121},[104,1358,1359],{"class":106,"line":217},[104,1360,915],{"class":121},[104,1362,1363,1365,1367],{"class":106,"line":239},[104,1364,921],{"class":200},[104,1366,234],{"class":233},[104,1368,157],{"class":121},[104,1370,1371,1373,1375],{"class":106,"line":244},[104,1372,931],{"class":121},[104,1374,211],{"class":825},[104,1376,157],{"class":121},[15,1378,1380],{"id":1379},"usage-examples","Usage Examples",[86,1382,1384],{"id":1383},"basic-modal-implementation","Basic Modal Implementation",[94,1386,1390],{"className":1387,"code":1388,"filename":1389,"language":151,"meta":100,"style":100},"language-vue shiki shiki-themes material-theme-lighter one-light one-dark-pro","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"showModal = true\">Open Modal\u003C\u002Fbutton>\n    \u003CModal v-if=\"showModal\" v-model=\"showModal\"> Content here \u003C\u002FModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\nimport { useBackButton } from \"@\u002Fcomposables\u002FuseBackButton\";\n\nconst showModal = ref(false);\nuseBackButton(showModal);\n\u003C\u002Fscript>\n","example.vue",[60,1391,1392,1403,1413,1448,1489,1498,1506,1510,1522,1543,1564,1568,1588,1600],{"__ignoreMap":100},[104,1393,1394,1397,1400],{"class":106,"line":107},[104,1395,1396],{"class":121},"\u003C",[104,1398,1399],{"class":998},"template",[104,1401,1402],{"class":121},">\n",[104,1404,1405,1408,1411],{"class":106,"line":114},[104,1406,1407],{"class":121},"  \u003C",[104,1409,1410],{"class":998},"div",[104,1412,1402],{"class":121},[104,1414,1415,1418,1421,1425,1428,1430,1433,1435,1438,1441,1444,1446],{"class":106,"line":160},[104,1416,1417],{"class":121},"    \u003C",[104,1419,1420],{"class":998},"button",[104,1422,1424],{"class":1423},"sGh1W"," @click",[104,1426,1427],{"class":121},"=",[104,1429,154],{"class":146},[104,1431,1432],{"class":150},"showModal = true",[104,1434,154],{"class":146},[104,1436,1437],{"class":121},">",[104,1439,1440],{"class":825},"Open Modal",[104,1442,1443],{"class":121},"\u003C\u002F",[104,1445,1420],{"class":998},[104,1447,1402],{"class":121},[104,1449,1450,1452,1455,1458,1460,1462,1465,1467,1470,1472,1474,1476,1478,1480,1483,1485,1487],{"class":106,"line":183},[104,1451,1417],{"class":121},[104,1453,1454],{"class":998},"Modal",[104,1456,1457],{"class":1423}," v-if",[104,1459,1427],{"class":121},[104,1461,154],{"class":146},[104,1463,1464],{"class":150},"showModal",[104,1466,154],{"class":146},[104,1468,1469],{"class":1423}," v-model",[104,1471,1427],{"class":121},[104,1473,154],{"class":146},[104,1475,1464],{"class":150},[104,1477,154],{"class":146},[104,1479,1437],{"class":121},[104,1481,1482],{"class":825}," Content here ",[104,1484,1443],{"class":121},[104,1486,1454],{"class":998},[104,1488,1402],{"class":121},[104,1490,1491,1494,1496],{"class":106,"line":190},[104,1492,1493],{"class":121},"  \u003C\u002F",[104,1495,1410],{"class":998},[104,1497,1402],{"class":121},[104,1499,1500,1502,1504],{"class":106,"line":217},[104,1501,1443],{"class":121},[104,1503,1399],{"class":998},[104,1505,1402],{"class":121},[104,1507,1508],{"class":106,"line":239},[104,1509,187],{"emptyLinePlaceholder":186},[104,1511,1512,1514,1517,1520],{"class":106,"line":244},[104,1513,1396],{"class":121},[104,1515,1516],{"class":998},"script",[104,1518,1519],{"class":1423}," setup",[104,1521,1402],{"class":121},[104,1523,1524,1526,1528,1531,1533,1535,1537,1539,1541],{"class":106,"line":263},[104,1525,118],{"class":117},[104,1527,122],{"class":121},[104,1529,1530],{"class":125}," ref",[104,1532,140],{"class":121},[104,1534,143],{"class":117},[104,1536,147],{"class":146},[104,1538,151],{"class":150},[104,1540,154],{"class":146},[104,1542,157],{"class":121},[104,1544,1545,1547,1549,1551,1553,1555,1557,1560,1562],{"class":106,"line":287},[104,1546,118],{"class":117},[104,1548,122],{"class":121},[104,1550,201],{"class":125},[104,1552,140],{"class":121},[104,1554,143],{"class":117},[104,1556,147],{"class":146},[104,1558,1559],{"class":150},"@\u002Fcomposables\u002FuseBackButton",[104,1561,154],{"class":146},[104,1563,157],{"class":121},[104,1565,1566],{"class":106,"line":293},[104,1567,187],{"emptyLinePlaceholder":186},[104,1569,1570,1573,1576,1578,1580,1582,1584,1586],{"class":106,"line":335},[104,1571,1572],{"class":196},"const",[104,1574,1575],{"class":223}," showModal",[104,1577,228],{"class":227},[104,1579,1530],{"class":200},[104,1581,204],{"class":825},[104,1583,894],{"class":390},[104,1585,211],{"class":825},[104,1587,157],{"class":121},[104,1589,1590,1592,1594,1596,1598],{"class":106,"line":372},[104,1591,62],{"class":200},[104,1593,204],{"class":825},[104,1595,1464],{"class":506},[104,1597,211],{"class":825},[104,1599,157],{"class":121},[104,1601,1602,1604,1606],{"class":106,"line":377},[104,1603,1443],{"class":121},[104,1605,1516],{"class":998},[104,1607,1402],{"class":121},[86,1609,1611],{"id":1610},"with-complex-dialog","With Complex Dialog",[91,1613,1614],{},[94,1615,1617],{"className":1387,"code":1616,"filename":1389,"language":151,"meta":100,"style":100},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"openDialog\">Open Complex Dialog\u003C\u002Fbutton>\n    \u003CDialog v-model=\"dialogVisible\" :options=\"dialogOptions\">\n      \u003Ctemplate #default>\n        \u003Cform @submit.prevent=\"handleSubmit\">\n          \u003C!-- Form content -->\n        \u003C\u002Fform>\n      \u003C\u002Ftemplate>\n    \u003C\u002FDialog>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\nimport { useBackButton } from \"@\u002Fcomposables\u002FuseBackButton\";\n\nconst dialogVisible = ref(false);\nconst dialogOptions = ref({\n  title: \"Complex Form\",\n  width: \"600px\",\n});\n\nuseBackButton(dialogVisible);\n\u003C\u002Fscript>\n",[60,1618,1619,1627,1635,1663,1695,1710,1732,1737,1746,1755,1764,1772,1780,1784,1794,1814,1834,1838,1857,1872,1888,1904,1912,1916,1928],{"__ignoreMap":100},[104,1620,1621,1623,1625],{"class":106,"line":107},[104,1622,1396],{"class":121},[104,1624,1399],{"class":998},[104,1626,1402],{"class":121},[104,1628,1629,1631,1633],{"class":106,"line":114},[104,1630,1407],{"class":121},[104,1632,1410],{"class":998},[104,1634,1402],{"class":121},[104,1636,1637,1639,1641,1643,1645,1647,1650,1652,1654,1657,1659,1661],{"class":106,"line":160},[104,1638,1417],{"class":121},[104,1640,1420],{"class":998},[104,1642,1424],{"class":1423},[104,1644,1427],{"class":121},[104,1646,154],{"class":146},[104,1648,1649],{"class":150},"openDialog",[104,1651,154],{"class":146},[104,1653,1437],{"class":121},[104,1655,1656],{"class":825},"Open Complex Dialog",[104,1658,1443],{"class":121},[104,1660,1420],{"class":998},[104,1662,1402],{"class":121},[104,1664,1665,1667,1670,1672,1674,1676,1679,1681,1684,1686,1688,1691,1693],{"class":106,"line":183},[104,1666,1417],{"class":121},[104,1668,1669],{"class":998},"Dialog",[104,1671,1469],{"class":1423},[104,1673,1427],{"class":121},[104,1675,154],{"class":146},[104,1677,1678],{"class":150},"dialogVisible",[104,1680,154],{"class":146},[104,1682,1683],{"class":1423}," :options",[104,1685,1427],{"class":121},[104,1687,154],{"class":146},[104,1689,1690],{"class":150},"dialogOptions",[104,1692,154],{"class":146},[104,1694,1402],{"class":121},[104,1696,1697,1700,1702,1705,1708],{"class":106,"line":190},[104,1698,1699],{"class":121},"      \u003C",[104,1701,1399],{"class":998},[104,1703,1704],{"class":121}," #",[104,1706,1707],{"class":1423},"default",[104,1709,1402],{"class":121},[104,1711,1712,1715,1718,1721,1723,1725,1728,1730],{"class":106,"line":217},[104,1713,1714],{"class":121},"        \u003C",[104,1716,1717],{"class":998},"form",[104,1719,1720],{"class":1423}," @submit.prevent",[104,1722,1427],{"class":121},[104,1724,154],{"class":146},[104,1726,1727],{"class":150},"handleSubmit",[104,1729,154],{"class":146},[104,1731,1402],{"class":121},[104,1733,1734],{"class":106,"line":239},[104,1735,1736],{"class":110},"          \u003C!-- Form content -->\n",[104,1738,1739,1742,1744],{"class":106,"line":244},[104,1740,1741],{"class":121},"        \u003C\u002F",[104,1743,1717],{"class":998},[104,1745,1402],{"class":121},[104,1747,1748,1751,1753],{"class":106,"line":263},[104,1749,1750],{"class":121},"      \u003C\u002F",[104,1752,1399],{"class":998},[104,1754,1402],{"class":121},[104,1756,1757,1760,1762],{"class":106,"line":287},[104,1758,1759],{"class":121},"    \u003C\u002F",[104,1761,1669],{"class":998},[104,1763,1402],{"class":121},[104,1765,1766,1768,1770],{"class":106,"line":293},[104,1767,1493],{"class":121},[104,1769,1410],{"class":998},[104,1771,1402],{"class":121},[104,1773,1774,1776,1778],{"class":106,"line":335},[104,1775,1443],{"class":121},[104,1777,1399],{"class":998},[104,1779,1402],{"class":121},[104,1781,1782],{"class":106,"line":372},[104,1783,187],{"emptyLinePlaceholder":186},[104,1785,1786,1788,1790,1792],{"class":106,"line":377},[104,1787,1396],{"class":121},[104,1789,1516],{"class":998},[104,1791,1519],{"class":1423},[104,1793,1402],{"class":121},[104,1795,1796,1798,1800,1802,1804,1806,1808,1810,1812],{"class":106,"line":396},[104,1797,118],{"class":117},[104,1799,122],{"class":121},[104,1801,1530],{"class":125},[104,1803,140],{"class":121},[104,1805,143],{"class":117},[104,1807,147],{"class":146},[104,1809,151],{"class":150},[104,1811,154],{"class":146},[104,1813,157],{"class":121},[104,1815,1816,1818,1820,1822,1824,1826,1828,1830,1832],{"class":106,"line":413},[104,1817,118],{"class":117},[104,1819,122],{"class":121},[104,1821,201],{"class":125},[104,1823,140],{"class":121},[104,1825,143],{"class":117},[104,1827,147],{"class":146},[104,1829,1559],{"class":150},[104,1831,154],{"class":146},[104,1833,157],{"class":121},[104,1835,1836],{"class":106,"line":419},[104,1837,187],{"emptyLinePlaceholder":186},[104,1839,1840,1842,1845,1847,1849,1851,1853,1855],{"class":106,"line":425},[104,1841,1572],{"class":196},[104,1843,1844],{"class":223}," dialogVisible",[104,1846,228],{"class":227},[104,1848,1530],{"class":200},[104,1850,204],{"class":825},[104,1852,894],{"class":390},[104,1854,211],{"class":825},[104,1856,157],{"class":121},[104,1858,1859,1861,1864,1866,1868,1870],{"class":106,"line":430},[104,1860,1572],{"class":196},[104,1862,1863],{"class":223}," dialogOptions",[104,1865,228],{"class":227},[104,1867,1530],{"class":200},[104,1869,204],{"class":825},[104,1871,284],{"class":121},[104,1873,1874,1877,1879,1881,1884,1886],{"class":106,"line":444},[104,1875,1876],{"class":998},"  title",[104,1878,984],{"class":983},[104,1880,147],{"class":146},[104,1882,1883],{"class":150},"Complex Form",[104,1885,154],{"class":146},[104,1887,706],{"class":121},[104,1889,1890,1893,1895,1897,1900,1902],{"class":106,"line":450},[104,1891,1892],{"class":998},"  width",[104,1894,984],{"class":983},[104,1896,147],{"class":146},[104,1898,1899],{"class":150},"600px",[104,1901,154],{"class":146},[104,1903,706],{"class":121},[104,1905,1906,1908,1910],{"class":106,"line":484},[104,1907,931],{"class":121},[104,1909,211],{"class":825},[104,1911,157],{"class":121},[104,1913,1914],{"class":106,"line":513},[104,1915,187],{"emptyLinePlaceholder":186},[104,1917,1918,1920,1922,1924,1926],{"class":106,"line":523},[104,1919,62],{"class":200},[104,1921,204],{"class":825},[104,1923,1678],{"class":506},[104,1925,211],{"class":825},[104,1927,157],{"class":121},[104,1929,1930,1932,1934],{"class":106,"line":528},[104,1931,1443],{"class":121},[104,1933,1516],{"class":998},[104,1935,1402],{"class":121},[15,1937,1939],{"id":1938},"edge-cases-and-solutions","Edge Cases and Solutions",[1941,1942,1943],"caution",{},[11,1944,1945],{},"It is important to handle edge cases such as double click, removing listener events & global state to ensure a smooth user experience.",[86,1947,1949],{"id":1948},"_1-double-back-click-handling","1. Double Back Click Handling",[11,1951,1952],{},"We handle rapid back button clicks by adding two history states:",[94,1954,1956],{"className":96,"code":1955,"language":99,"meta":100,"style":100},"history.pushState(null, \"\", window.location.pathname);\nhistory.pushState(null, \"\", window.location.pathname);\n",[60,1957,1958,1991],{"__ignoreMap":100},[104,1959,1960,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989],{"class":106,"line":107},[104,1961,1962],{"class":272},"history",[104,1964,275],{"class":121},[104,1966,301],{"class":200},[104,1968,204],{"class":825},[104,1970,307],{"class":306},[104,1972,129],{"class":121},[104,1974,312],{"class":146},[104,1976,129],{"class":121},[104,1978,317],{"class":272},[104,1980,275],{"class":121},[104,1982,323],{"class":322},[104,1984,275],{"class":121},[104,1986,328],{"class":125},[104,1988,211],{"class":825},[104,1990,157],{"class":121},[104,1992,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021],{"class":106,"line":114},[104,1994,1962],{"class":272},[104,1996,275],{"class":121},[104,1998,301],{"class":200},[104,2000,204],{"class":825},[104,2002,307],{"class":306},[104,2004,129],{"class":121},[104,2006,312],{"class":146},[104,2008,129],{"class":121},[104,2010,317],{"class":272},[104,2012,275],{"class":121},[104,2014,323],{"class":322},[104,2016,275],{"class":121},[104,2018,328],{"class":125},[104,2020,211],{"class":825},[104,2022,157],{"class":121},[86,2024,2026],{"id":2025},"_2-cleanup","2. Cleanup",[11,2028,2029],{},"Proper cleanup is essential to prevent memory leaks:",[94,2031,2033],{"className":96,"code":2032,"language":99,"meta":100,"style":100},"onUnmounted(() => {\n  if (\"scrollRestoration\" in history) {\n    history.scrollRestoration = \"auto\";\n  }\n  window.removeEventListener(\"popstate\", handlePopState);\n});\n",[60,2034,2035,2048,2068,2087,2091,2115],{"__ignoreMap":100},[104,2036,2037,2040,2042,2044,2046],{"class":106,"line":107},[104,2038,2039],{"class":200},"onUnmounted",[104,2041,204],{"class":825},[104,2043,234],{"class":121},[104,2045,258],{"class":196},[104,2047,214],{"class":121},[104,2049,2050,2052,2054,2056,2058,2060,2062,2064,2066],{"class":106,"line":114},[104,2051,851],{"class":117},[104,2053,269],{"class":233},[104,2055,154],{"class":146},[104,2057,1153],{"class":150},[104,2059,154],{"class":146},[104,2061,1159],{"class":1158},[104,2063,1162],{"class":506},[104,2065,281],{"class":233},[104,2067,284],{"class":121},[104,2069,2070,2072,2074,2076,2078,2080,2083,2085],{"class":106,"line":160},[104,2071,453],{"class":272},[104,2073,275],{"class":121},[104,2075,1153],{"class":125},[104,2077,228],{"class":227},[104,2079,147],{"class":146},[104,2081,2082],{"class":150},"auto",[104,2084,154],{"class":146},[104,2086,157],{"class":121},[104,2088,2089],{"class":106,"line":183},[104,2090,915],{"class":121},[104,2092,2093,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113],{"class":106,"line":190},[104,2094,1090],{"class":272},[104,2096,275],{"class":121},[104,2098,549],{"class":200},[104,2100,204],{"class":233},[104,2102,154],{"class":146},[104,2104,499],{"class":150},[104,2106,154],{"class":146},[104,2108,129],{"class":121},[104,2110,250],{"class":506},[104,2112,211],{"class":233},[104,2114,157],{"class":121},[104,2116,2117,2119,2121],{"class":106,"line":217},[104,2118,931],{"class":121},[104,2120,211],{"class":825},[104,2122,157],{"class":121},[86,2124,2126],{"id":2125},"_3-timing-issues","3. Timing Issues",[11,2128,2129],{},"We use small timeouts to ensure proper state management:",[94,2131,2133],{"className":96,"code":2132,"language":99,"meta":100,"style":100},"setTimeout(() => {\n  globalStore.isBackBtnPressed = false;\n}, 100);\n",[60,2134,2135,2148,2163],{"__ignoreMap":100},[104,2136,2137,2140,2142,2144,2146],{"class":106,"line":107},[104,2138,2139],{"class":200},"setTimeout",[104,2141,204],{"class":825},[104,2143,234],{"class":121},[104,2145,258],{"class":196},[104,2147,214],{"class":121},[104,2149,2150,2153,2155,2157,2159,2161],{"class":106,"line":114},[104,2151,2152],{"class":272},"  globalStore",[104,2154,275],{"class":121},[104,2156,385],{"class":125},[104,2158,228],{"class":227},[104,2160,408],{"class":390},[104,2162,157],{"class":121},[104,2164,2165,2168,2170,2172],{"class":106,"line":160},[104,2166,2167],{"class":121},"},",[104,2169,658],{"class":657},[104,2171,211],{"class":825},[104,2173,157],{"class":121},[15,2175,2177],{"id":2176},"best-practices","Best Practices",[23,2179,2180,2187,2193,2199],{},[26,2181,2182,2186],{},[2183,2184,2185],"strong",{},"Always Use Refs","\nPass reactive refs to the composable for reliable state management.",[26,2188,2189,2192],{},[2183,2190,2191],{},"Router Guard Integration","\nImplement the router guard to ensure consistent navigation behavior.",[26,2194,2195,2198],{},[2183,2196,2197],{},"Clean Unmounting","\nThe composable handles its own cleanup, but ensure parent components handle their state properly.",[26,2200,2201,2204,2205],{},[2183,2202,2203],{},"Testing","\nTest various scenarios:",[65,2206,2207,2210,2213],{},[26,2208,2209],{},"Rapid back button clicks",[26,2211,2212],{},"Modal opening\u002Fclosing sequences",[26,2214,2215],{},"Navigation during modal open states",[15,2217,2219],{"id":2218},"conclusion","Conclusion",[11,2221,2222,2223,2225],{},"The ",[60,2224,62],{}," composable provides a robust solution for handling browser navigation in modern Vue applications. It solves common UX issues while maintaining clean code architecture and providing a seamless user experience.",[11,2227,2228],{},"Whether you're building a simple modal dialog or a complex multi-step form, this composable can help you manage browser navigation effectively while preserving user context and scroll position.",[11,2230,2231],{},"Remember to:",[65,2233,2234,2237,2240,2243],{},[26,2235,2236],{},"Test thoroughly in your specific use case",[26,2238,2239],{},"Consider edge cases specific to your application",[26,2241,2242],{},"Maintain proper state management",[26,2244,2245],{},"Handle cleanup appropriately",[11,2247,2248],{},"With these considerations in mind, you'll have a reliable solution for handling browser navigation in your Vue 3 applications.",[15,2250,2252],{"id":2251},"thank-you","Thank You",[2254,2255,2256],"style",{},"html pre.shiki code .seacL, html code.shiki .seacL{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#A0A1A7;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html pre.shiki code .sQsOY, html code.shiki .sQsOY{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A626A4;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:inherit}html pre.shiki code .sB4Xn, html code.shiki .sB4Xn{--shiki-light:#39ADB5;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .s8dPH, html code.shiki .s8dPH{--shiki-light:#90A4AE;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .sVH1b, html code.shiki .sVH1b{--shiki-light:#39ADB5;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .spZWa, html code.shiki .spZWa{--shiki-light:#91B859;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sJvVP, html code.shiki .sJvVP{--shiki-light:#9C3EDA;--shiki-default:#A626A4;--shiki-dark:#C678DD}html pre.shiki code .spnjr, html code.shiki .spnjr{--shiki-light:#6182B8;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .s5f2p, html code.shiki .s5f2p{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#383A42;--shiki-default-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic}html pre.shiki code .sMm83, html code.shiki .sMm83{--shiki-light:#90A4AE;--shiki-default:#986801;--shiki-dark:#E5C07B}html pre.shiki code .syPST, html code.shiki .syPST{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#56B6C2}html pre.shiki code .sA0eD, html code.shiki .sA0eD{--shiki-light:#E53935;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .svfkx, html code.shiki .svfkx{--shiki-light:#90A4AE;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .scCn_, html code.shiki .scCn_{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#E5C07B}html pre.shiki code .svDm9, html code.shiki .svDm9{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sDC5J, html code.shiki .sDC5J{--shiki-light:#90A4AE;--shiki-default:#E45649;--shiki-dark:#E5C07B}html pre.shiki code .sbyCm, html code.shiki .sbyCm{--shiki-light:#FF5370;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sWjah, html code.shiki .sWjah{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#E06C75}html pre.shiki code .sriKn, html code.shiki .sriKn{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sM89C, html code.shiki .sM89C{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .saKOp, html code.shiki .saKOp{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#ABB2BF}html pre.shiki code .su13H, html code.shiki .su13H{--shiki-light:#E53935;--shiki-default:#E45649;--shiki-dark:#E06C75}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 .sUnt3, html code.shiki .sUnt3{--shiki-light:#39ADB5;--shiki-default:#A626A4;--shiki-dark:#C678DD}html pre.shiki code .sGh1W, html code.shiki .sGh1W{--shiki-light:#9C3EDA;--shiki-default:#986801;--shiki-dark:#D19A66}",{"title":100,"searchDepth":114,"depth":114,"links":2258},[2259,2260,2263,2269,2273,2278,2279,2280],{"id":17,"depth":114,"text":18},{"id":54,"depth":114,"text":55,"children":2261},[2262],{"id":88,"depth":160,"text":89},{"id":1026,"depth":114,"text":1027,"children":2264},[2265,2266,2267,2268],{"id":1030,"depth":160,"text":1031},{"id":1124,"depth":160,"text":1125},{"id":1192,"depth":160,"text":1193},{"id":1271,"depth":160,"text":1272},{"id":1379,"depth":114,"text":1380,"children":2270},[2271,2272],{"id":1383,"depth":160,"text":1384},{"id":1610,"depth":160,"text":1611},{"id":1938,"depth":114,"text":1939,"children":2274},[2275,2276,2277],{"id":1948,"depth":160,"text":1949},{"id":2025,"depth":160,"text":2026},{"id":2125,"depth":160,"text":2126},{"id":2176,"depth":114,"text":2177},{"id":2218,"depth":114,"text":2219},{"id":2251,"depth":114,"text":2252},"2024-12-02",false,"md",{"slug":2285,"difficulty":2286,"featured":2282,"icon":151,"ogImage":2287,"tags":2289,"topic":151},"remote-back-button-js","intermediate",{"alt":2288},"remote back button function",[151,2290,2291],"composable","guide","\u002Farticles\u002Fremote-back-button-js",{"title":5,"description":13},"articles\u002Fremote-back-button-js","c9McQgPfIrLnWtQfO9BV7b7nDG5cwoJisMDonjUVoWc",[2297,2302],{"title":2298,"path":2299,"stem":2300,"description":2301,"children":-1},"Adding Custom Button Variants in Nuxt UI","\u002Farticles\u002Fnuxt-ui-custom-button-variants","articles\u002Fnuxt-ui-custom-button-variants","Learn how to extend Nuxt UI's button component with custom variants like a stunning skew animation effect. We'll explore app.config.ts configuration, CSS pseudo-elements, and compound variants to create unique button styles that match your brand.",{"title":2303,"path":2304,"stem":2305,"description":2306,"children":-1},"From Commit to Release: Automating GitHub Workflows","\u002Farticles\u002Fcommit-to-release","articles\u002Fcommit-to-release","This documentation describes an automated GitHub workflow system that handles pull request labelling and automated releases for both development and production environments. The system uses branch naming conventions to automatically label PRs, generates release notes, and manages versioning.",1778820754460]