[{"data":1,"prerenderedAt":4627},["ShallowReactive",2],{"about-card":3,"articles-card":15},{"id":4,"title":5,"body":6,"content":6,"description":7,"extension":8,"images":6,"meta":9,"navigation":10,"path":11,"seo":12,"stem":13,"__hash__":14},"about\u002Fabout.yml","About Me",null,"Researcher & Software Engineer dedicated to advancing cybersecurity and AI. Experienced in leading technical projects across FinTech, Healthcare, and EdTech while mentoring the next generation of engineers.","yml",{},true,"\u002Fabout",{"title":5,"description":7},"about","V7cVzuSqcUmDkaz5gPYVaF5R7gxhArgthAcUhll8Idk",[16,2448],{"id":17,"title":18,"author":6,"body":19,"date":2432,"description":25,"draft":2433,"extension":2434,"image":6,"lastmod":2432,"meta":2435,"minRead":6,"navigation":10,"path":2444,"seo":2445,"stem":2446,"__hash__":2447},"articles\u002Farticles\u002Fnuxt-ui-custom-button-variants.md","Adding Custom Button Variants in Nuxt UI",{"type":20,"value":21,"toc":2413},"minimark",[22,26,33,41,46,65,72,76,79,92,96,99,123,126,130,137,472,477,528,538,542,548,812,816,872,876,879,1222,1225,1377,1381,1384,1608,1612,1615,1618,1911,1916,2180,2183,2256,2262,2286,2290,2332,2336,2347,2363,2367,2373,2376,2380,2405,2409],[23,24,25],"p",{},"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.",[23,27,28,32],{},[29,30,31],"strong",{},"Here's what we'll be building"," - try hovering over the buttons:",[34,35,38],"component-frame",{"description":36,"title":37},"A showcase of custom button animations built with Nuxt UI and CSS pseudo-elements.","Skew Button Variants",[39,40],"button-skew-demo",{},[42,43,45],"h2",{"id":44},"the-challenge","The Challenge",[23,47,48,49,53,54,53,57,60,61,64],{},"Nuxt UI provides excellent built-in button variants like ",[50,51,52],"code",{},"solid",", ",[50,55,56],{},"outline",[50,58,59],{},"soft",", and ",[50,62,63],{},"ghost",". But what if you want something more unique? Something that makes your buttons stand out with eye-catching animations?",[23,66,67,68,71],{},"In this tutorial, I'll show you how I created a custom ",[29,69,70],{},"skew"," button variant that features an animated background that sweeps across the button on hover - a signature effect for my portfolio.",[42,73,75],{"id":74},"prerequisites","Prerequisites",[23,77,78],{},"Before we start, make sure you have:",[80,81,82,86,89],"ul",{},[83,84,85],"li",{},"Nuxt project with Nuxt UI v4 installed",[83,87,88],{},"Basic understanding of Tailwind CSS",[83,90,91],{},"Familiarity with CSS pseudo-elements",[42,93,95],{"id":94},"the-approach","The Approach",[23,97,98],{},"Creating a custom button variant in Nuxt UI involves three steps:",[100,101,102,108,117],"ol",{},[83,103,104,107],{},[29,105,106],{},"Define the CSS animation"," in your global stylesheet",[83,109,110,113,114],{},[29,111,112],{},"Register the variant"," in ",[50,115,116],{},"app.config.ts",[83,118,119,122],{},[29,120,121],{},"Add compound variants"," for different color options",[23,124,125],{},"Let's dive in!",[42,127,129],{"id":128},"step-1-the-css-animation","Step 1: The CSS Animation",[23,131,132,133,136],{},"First, we need to create the skew animation using CSS pseudo-elements. Add this to your ",[50,134,135],{},"assets\u002Fcss\u002Fmain.css",":",[138,139,145],"pre",{"className":140,"code":141,"filename":142,"language":143,"meta":144,"style":144},"language-css shiki shiki-themes material-theme-lighter one-light one-dark-pro","@layer base {\n  \u002F* Skew Button Animation *\u002F\n  .btn-skew {\n    position: relative;\n    overflow: hidden;\n    z-index: 0;\n  }\n\n  .btn-skew::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -25px;\n    height: 100%;\n    width: 0%;\n    background-color: var(--ui-primary);\n    transform: skewX(35deg);\n    z-index: -1;\n    transition: width 500ms ease-out;\n  }\n\n  .btn-skew:hover::before {\n    width: 150%;\n  }\n}\n","main.css","css","",[50,146,147,164,171,185,201,214,228,234,240,257,271,283,295,312,328,342,364,385,397,419,424,429,447,461,466],{"__ignoreMap":144},[148,149,152,156,160],"span",{"class":150,"line":151},"line",1,[148,153,155],{"class":154},"sQsOY","@layer",[148,157,159],{"class":158},"sM89C"," base ",[148,161,163],{"class":162},"sB4Xn","{\n",[148,165,167],{"class":150,"line":166},2,[148,168,170],{"class":169},"seacL","  \u002F* Skew Button Animation *\u002F\n",[148,172,174,178,182],{"class":150,"line":173},3,[148,175,177],{"class":176},"svDm9","  .",[148,179,181],{"class":180},"s6wAS","btn-skew",[148,183,184],{"class":162}," {\n",[148,186,188,192,194,198],{"class":150,"line":187},4,[148,189,191],{"class":190},"sGRuu","    position",[148,193,136],{"class":162},[148,195,197],{"class":196},"sngOx"," relative",[148,199,200],{"class":162},";\n",[148,202,204,207,209,212],{"class":150,"line":203},5,[148,205,206],{"class":190},"    overflow",[148,208,136],{"class":162},[148,210,211],{"class":196}," hidden",[148,213,200],{"class":162},[148,215,217,220,222,226],{"class":150,"line":216},6,[148,218,219],{"class":190},"    z-index",[148,221,136],{"class":162},[148,223,225],{"class":224},"sriKn"," 0",[148,227,200],{"class":162},[148,229,231],{"class":150,"line":230},7,[148,232,233],{"class":162},"  }\n",[148,235,237],{"class":150,"line":236},8,[148,238,239],{"emptyLinePlaceholder":10},"\n",[148,241,243,245,247,251,255],{"class":150,"line":242},9,[148,244,177],{"class":176},[148,246,181],{"class":180},[148,248,250],{"class":249},"sst0O","::",[148,252,254],{"class":253},"sSxop","before",[148,256,184],{"class":162},[148,258,260,263,265,269],{"class":150,"line":259},10,[148,261,262],{"class":190},"    content",[148,264,136],{"class":162},[148,266,268],{"class":267},"sVH1b"," \"\"",[148,270,200],{"class":162},[148,272,274,276,278,281],{"class":150,"line":273},11,[148,275,191],{"class":190},[148,277,136],{"class":162},[148,279,280],{"class":196}," absolute",[148,282,200],{"class":162},[148,284,286,289,291,293],{"class":150,"line":285},12,[148,287,288],{"class":190},"    top",[148,290,136],{"class":162},[148,292,225],{"class":224},[148,294,200],{"class":162},[148,296,298,301,303,306,310],{"class":150,"line":297},13,[148,299,300],{"class":190},"    left",[148,302,136],{"class":162},[148,304,305],{"class":224}," -25",[148,307,309],{"class":308},"sLhkd","px",[148,311,200],{"class":162},[148,313,315,318,320,323,326],{"class":150,"line":314},14,[148,316,317],{"class":190},"    height",[148,319,136],{"class":162},[148,321,322],{"class":224}," 100",[148,324,325],{"class":308},"%",[148,327,200],{"class":162},[148,329,331,334,336,338,340],{"class":150,"line":330},15,[148,332,333],{"class":190},"    width",[148,335,136],{"class":162},[148,337,225],{"class":224},[148,339,325],{"class":308},[148,341,200],{"class":162},[148,343,345,348,350,354,357,361],{"class":150,"line":344},16,[148,346,347],{"class":190},"    background-color",[148,349,136],{"class":162},[148,351,353],{"class":352},"sTDPv"," var",[148,355,356],{"class":162},"(",[148,358,360],{"class":359},"s8dPH","--ui-primary",[148,362,363],{"class":162},");\n",[148,365,367,370,372,375,377,380,383],{"class":150,"line":366},17,[148,368,369],{"class":190},"    transform",[148,371,136],{"class":162},[148,373,374],{"class":352}," skewX",[148,376,356],{"class":162},[148,378,379],{"class":224},"35",[148,381,382],{"class":308},"deg",[148,384,363],{"class":162},[148,386,388,390,392,395],{"class":150,"line":387},18,[148,389,219],{"class":190},[148,391,136],{"class":162},[148,393,394],{"class":224}," -1",[148,396,200],{"class":162},[148,398,400,403,405,408,411,414,417],{"class":150,"line":399},19,[148,401,402],{"class":190},"    transition",[148,404,136],{"class":162},[148,406,407],{"class":158}," width ",[148,409,410],{"class":224},"500",[148,412,413],{"class":308},"ms",[148,415,416],{"class":196}," ease-out",[148,418,200],{"class":162},[148,420,422],{"class":150,"line":421},20,[148,423,233],{"class":162},[148,425,427],{"class":150,"line":426},21,[148,428,239],{"emptyLinePlaceholder":10},[148,430,432,434,436,438,441,443,445],{"class":150,"line":431},22,[148,433,177],{"class":176},[148,435,181],{"class":180},[148,437,136],{"class":249},[148,439,440],{"class":253},"hover",[148,442,250],{"class":249},[148,444,254],{"class":253},[148,446,184],{"class":162},[148,448,450,452,454,457,459],{"class":150,"line":449},23,[148,451,333],{"class":190},[148,453,136],{"class":162},[148,455,456],{"class":224}," 150",[148,458,325],{"class":308},[148,460,200],{"class":162},[148,462,464],{"class":150,"line":463},24,[148,465,233],{"class":162},[148,467,469],{"class":150,"line":468},25,[148,470,471],{"class":162},"}\n",[473,474,476],"h3",{"id":475},"how-it-works","How It Works",[100,478,479,491,500,508,520],{},[83,480,481,490],{},[29,482,483,486,487],{},[50,484,485],{},"position: relative"," & ",[50,488,489],{},"overflow: hidden",": Creates a containing box for the pseudo-element and clips any overflow",[83,492,493,499],{},[29,494,495,498],{},[50,496,497],{},"::before"," pseudo-element",": Creates an invisible layer behind the button",[83,501,502,507],{},[29,503,504],{},[50,505,506],{},"transform: skewX(35deg)",": Gives the sliding background its angled edge",[83,509,510,519],{},[29,511,512,515,516],{},[50,513,514],{},"width: 0%"," → ",[50,517,518],{},"width: 150%",": Animates from invisible to fully covering on hover",[83,521,522,527],{},[29,523,524],{},[50,525,526],{},"var(--ui-primary)",": Uses Nuxt UI's theme color variable",[529,530,531],"note",{},[23,532,533,534,537],{},"The ",[50,535,536],{},"z-index: -1"," on the pseudo-element ensures the animated background stays behind the button text.",[42,539,541],{"id":540},"step-2-register-the-variant","Step 2: Register the Variant",[23,543,544,545,547],{},"Now we register our custom variant in ",[50,546,116],{},". This is where Nuxt UI's extensibility shines:",[549,550,551],"code-collapse",{},[138,552,556],{"className":553,"code":554,"filename":116,"language":555,"meta":144,"style":144},"language-typescript shiki shiki-themes material-theme-lighter one-light one-dark-pro","export default defineAppConfig({\n  ui: {\n    colors: {\n      primary: \"red\",\n      neutral: \"zinc\",\n    },\n    button: {\n      variants: {\n        variant: {\n          skew: {\n            base: [\n              \"btn-skew\",\n              \"border border-neutral-300 dark:border-neutral-700\",\n              \"bg-default\",\n              \"transition-all duration-300\",\n              \"hover:border-primary\",\n              \"hover:text-white dark:hover:text-default\",\n              \"disabled:cursor-not-allowed\",\n              \"disabled:opacity-50\",\n            ],\n          },\n        },\n      },\n    },\n  },\n});\n","typescript",[50,557,558,575,586,595,615,631,636,645,654,663,672,682,693,704,715,726,737,748,759,770,777,782,787,792,796,801],{"__ignoreMap":144},[148,559,560,563,567,571,573],{"class":150,"line":151},[148,561,562],{"class":154},"export",[148,564,566],{"class":565},"sH50Z"," default",[148,568,570],{"class":569},"spnjr"," defineAppConfig",[148,572,356],{"class":158},[148,574,163],{"class":162},[148,576,577,581,584],{"class":150,"line":166},[148,578,580],{"class":579},"su13H","  ui",[148,582,136],{"class":583},"saKOp",[148,585,184],{"class":162},[148,587,588,591,593],{"class":150,"line":173},[148,589,590],{"class":579},"    colors",[148,592,136],{"class":583},[148,594,184],{"class":162},[148,596,597,600,602,605,609,612],{"class":150,"line":187},[148,598,599],{"class":579},"      primary",[148,601,136],{"class":583},[148,603,604],{"class":267}," \"",[148,606,608],{"class":607},"spZWa","red",[148,610,611],{"class":267},"\"",[148,613,614],{"class":162},",\n",[148,616,617,620,622,624,627,629],{"class":150,"line":203},[148,618,619],{"class":579},"      neutral",[148,621,136],{"class":583},[148,623,604],{"class":267},[148,625,626],{"class":607},"zinc",[148,628,611],{"class":267},[148,630,614],{"class":162},[148,632,633],{"class":150,"line":216},[148,634,635],{"class":162},"    },\n",[148,637,638,641,643],{"class":150,"line":230},[148,639,640],{"class":579},"    button",[148,642,136],{"class":583},[148,644,184],{"class":162},[148,646,647,650,652],{"class":150,"line":236},[148,648,649],{"class":579},"      variants",[148,651,136],{"class":583},[148,653,184],{"class":162},[148,655,656,659,661],{"class":150,"line":242},[148,657,658],{"class":579},"        variant",[148,660,136],{"class":583},[148,662,184],{"class":162},[148,664,665,668,670],{"class":150,"line":259},[148,666,667],{"class":579},"          skew",[148,669,136],{"class":583},[148,671,184],{"class":162},[148,673,674,677,679],{"class":150,"line":273},[148,675,676],{"class":579},"            base",[148,678,136],{"class":583},[148,680,681],{"class":158}," [\n",[148,683,684,687,689,691],{"class":150,"line":285},[148,685,686],{"class":267},"              \"",[148,688,181],{"class":607},[148,690,611],{"class":267},[148,692,614],{"class":162},[148,694,695,697,700,702],{"class":150,"line":297},[148,696,686],{"class":267},[148,698,699],{"class":607},"border border-neutral-300 dark:border-neutral-700",[148,701,611],{"class":267},[148,703,614],{"class":162},[148,705,706,708,711,713],{"class":150,"line":314},[148,707,686],{"class":267},[148,709,710],{"class":607},"bg-default",[148,712,611],{"class":267},[148,714,614],{"class":162},[148,716,717,719,722,724],{"class":150,"line":330},[148,718,686],{"class":267},[148,720,721],{"class":607},"transition-all duration-300",[148,723,611],{"class":267},[148,725,614],{"class":162},[148,727,728,730,733,735],{"class":150,"line":344},[148,729,686],{"class":267},[148,731,732],{"class":607},"hover:border-primary",[148,734,611],{"class":267},[148,736,614],{"class":162},[148,738,739,741,744,746],{"class":150,"line":366},[148,740,686],{"class":267},[148,742,743],{"class":607},"hover:text-white dark:hover:text-default",[148,745,611],{"class":267},[148,747,614],{"class":162},[148,749,750,752,755,757],{"class":150,"line":387},[148,751,686],{"class":267},[148,753,754],{"class":607},"disabled:cursor-not-allowed",[148,756,611],{"class":267},[148,758,614],{"class":162},[148,760,761,763,766,768],{"class":150,"line":399},[148,762,686],{"class":267},[148,764,765],{"class":607},"disabled:opacity-50",[148,767,611],{"class":267},[148,769,614],{"class":162},[148,771,772,775],{"class":150,"line":421},[148,773,774],{"class":158},"            ]",[148,776,614],{"class":162},[148,778,779],{"class":150,"line":426},[148,780,781],{"class":162},"          },\n",[148,783,784],{"class":150,"line":431},[148,785,786],{"class":162},"        },\n",[148,788,789],{"class":150,"line":449},[148,790,791],{"class":162},"      },\n",[148,793,794],{"class":150,"line":463},[148,795,635],{"class":162},[148,797,798],{"class":150,"line":468},[148,799,800],{"class":162},"  },\n",[148,802,804,807,810],{"class":150,"line":803},26,[148,805,806],{"class":162},"}",[148,808,809],{"class":158},")",[148,811,200],{"class":162},[473,813,815],{"id":814},"breaking-down-the-configuration","Breaking Down the Configuration",[80,817,818,826,834,841,850,857,864],{},[83,819,820,825],{},[29,821,822],{},[50,823,824],{},"variants.variant.skew",": Defines a new variant called \"skew\"",[83,827,828,833],{},[29,829,830],{},[50,831,832],{},"base",": An array of Tailwind classes applied by default",[83,835,836,840],{},[29,837,838],{},[50,839,181],{},": Our custom CSS class with the animation",[83,842,843,849],{},[29,844,845,848],{},[50,846,847],{},"border"," classes",": Creates a visible border",[83,851,852,856],{},[29,853,854],{},[50,855,710],{},": Uses the default background color",[83,858,859,863],{},[29,860,861],{},[50,862,732],{},": Border turns primary color on hover",[83,865,866,871],{},[29,867,868],{},[50,869,870],{},"hover:text-white",": Text turns white on hover (matching the primary background)",[42,873,875],{"id":874},"step-3-add-compound-variants-for-colors","Step 3: Add Compound Variants for Colors",[23,877,878],{},"To support different colors with our skew variant, we use compound variants:",[549,880,881],{},[138,882,884],{"className":553,"code":883,"filename":116,"language":555,"meta":144,"style":144},"export default defineAppConfig({\n  ui: {\n    button: {\n      \u002F\u002F ... variants from above\n      compoundVariants: [\n        {\n          variant: \"skew\",\n          color: \"primary\",\n          class: \"btn-skew\",\n        },\n        {\n          variant: \"skew\",\n          color: \"success\",\n          class: \"btn-skew btn-skew-success hover:border-success\",\n        },\n        {\n          variant: \"skew\",\n          color: \"info\",\n          class: \"btn-skew btn-skew-info hover:border-info\",\n        },\n        {\n          variant: \"skew\",\n          color: \"warning\",\n          class: \"btn-skew btn-skew-warning hover:border-warning\",\n        },\n        {\n          variant: \"skew\",\n          color: \"neutral\",\n          class: \"btn-skew btn-skew-neutral hover:border-neutral\",\n        },\n      ],\n    },\n  },\n});\n",[50,885,886,898,906,914,919,928,933,948,964,979,983,987,1001,1016,1031,1035,1039,1053,1068,1083,1087,1091,1105,1120,1135,1139,1143,1158,1174,1190,1195,1203,1208,1213],{"__ignoreMap":144},[148,887,888,890,892,894,896],{"class":150,"line":151},[148,889,562],{"class":154},[148,891,566],{"class":565},[148,893,570],{"class":569},[148,895,356],{"class":158},[148,897,163],{"class":162},[148,899,900,902,904],{"class":150,"line":166},[148,901,580],{"class":579},[148,903,136],{"class":583},[148,905,184],{"class":162},[148,907,908,910,912],{"class":150,"line":173},[148,909,640],{"class":579},[148,911,136],{"class":583},[148,913,184],{"class":162},[148,915,916],{"class":150,"line":187},[148,917,918],{"class":169},"      \u002F\u002F ... variants from above\n",[148,920,921,924,926],{"class":150,"line":203},[148,922,923],{"class":579},"      compoundVariants",[148,925,136],{"class":583},[148,927,681],{"class":158},[148,929,930],{"class":150,"line":216},[148,931,932],{"class":162},"        {\n",[148,934,935,938,940,942,944,946],{"class":150,"line":230},[148,936,937],{"class":579},"          variant",[148,939,136],{"class":583},[148,941,604],{"class":267},[148,943,70],{"class":607},[148,945,611],{"class":267},[148,947,614],{"class":162},[148,949,950,953,955,957,960,962],{"class":150,"line":236},[148,951,952],{"class":579},"          color",[148,954,136],{"class":583},[148,956,604],{"class":267},[148,958,959],{"class":607},"primary",[148,961,611],{"class":267},[148,963,614],{"class":162},[148,965,966,969,971,973,975,977],{"class":150,"line":242},[148,967,968],{"class":579},"          class",[148,970,136],{"class":583},[148,972,604],{"class":267},[148,974,181],{"class":607},[148,976,611],{"class":267},[148,978,614],{"class":162},[148,980,981],{"class":150,"line":259},[148,982,786],{"class":162},[148,984,985],{"class":150,"line":273},[148,986,932],{"class":162},[148,988,989,991,993,995,997,999],{"class":150,"line":285},[148,990,937],{"class":579},[148,992,136],{"class":583},[148,994,604],{"class":267},[148,996,70],{"class":607},[148,998,611],{"class":267},[148,1000,614],{"class":162},[148,1002,1003,1005,1007,1009,1012,1014],{"class":150,"line":297},[148,1004,952],{"class":579},[148,1006,136],{"class":583},[148,1008,604],{"class":267},[148,1010,1011],{"class":607},"success",[148,1013,611],{"class":267},[148,1015,614],{"class":162},[148,1017,1018,1020,1022,1024,1027,1029],{"class":150,"line":314},[148,1019,968],{"class":579},[148,1021,136],{"class":583},[148,1023,604],{"class":267},[148,1025,1026],{"class":607},"btn-skew btn-skew-success hover:border-success",[148,1028,611],{"class":267},[148,1030,614],{"class":162},[148,1032,1033],{"class":150,"line":330},[148,1034,786],{"class":162},[148,1036,1037],{"class":150,"line":344},[148,1038,932],{"class":162},[148,1040,1041,1043,1045,1047,1049,1051],{"class":150,"line":366},[148,1042,937],{"class":579},[148,1044,136],{"class":583},[148,1046,604],{"class":267},[148,1048,70],{"class":607},[148,1050,611],{"class":267},[148,1052,614],{"class":162},[148,1054,1055,1057,1059,1061,1064,1066],{"class":150,"line":387},[148,1056,952],{"class":579},[148,1058,136],{"class":583},[148,1060,604],{"class":267},[148,1062,1063],{"class":607},"info",[148,1065,611],{"class":267},[148,1067,614],{"class":162},[148,1069,1070,1072,1074,1076,1079,1081],{"class":150,"line":399},[148,1071,968],{"class":579},[148,1073,136],{"class":583},[148,1075,604],{"class":267},[148,1077,1078],{"class":607},"btn-skew btn-skew-info hover:border-info",[148,1080,611],{"class":267},[148,1082,614],{"class":162},[148,1084,1085],{"class":150,"line":421},[148,1086,786],{"class":162},[148,1088,1089],{"class":150,"line":426},[148,1090,932],{"class":162},[148,1092,1093,1095,1097,1099,1101,1103],{"class":150,"line":431},[148,1094,937],{"class":579},[148,1096,136],{"class":583},[148,1098,604],{"class":267},[148,1100,70],{"class":607},[148,1102,611],{"class":267},[148,1104,614],{"class":162},[148,1106,1107,1109,1111,1113,1116,1118],{"class":150,"line":449},[148,1108,952],{"class":579},[148,1110,136],{"class":583},[148,1112,604],{"class":267},[148,1114,1115],{"class":607},"warning",[148,1117,611],{"class":267},[148,1119,614],{"class":162},[148,1121,1122,1124,1126,1128,1131,1133],{"class":150,"line":463},[148,1123,968],{"class":579},[148,1125,136],{"class":583},[148,1127,604],{"class":267},[148,1129,1130],{"class":607},"btn-skew btn-skew-warning hover:border-warning",[148,1132,611],{"class":267},[148,1134,614],{"class":162},[148,1136,1137],{"class":150,"line":468},[148,1138,786],{"class":162},[148,1140,1141],{"class":150,"line":803},[148,1142,932],{"class":162},[148,1144,1146,1148,1150,1152,1154,1156],{"class":150,"line":1145},27,[148,1147,937],{"class":579},[148,1149,136],{"class":583},[148,1151,604],{"class":267},[148,1153,70],{"class":607},[148,1155,611],{"class":267},[148,1157,614],{"class":162},[148,1159,1161,1163,1165,1167,1170,1172],{"class":150,"line":1160},28,[148,1162,952],{"class":579},[148,1164,136],{"class":583},[148,1166,604],{"class":267},[148,1168,1169],{"class":607},"neutral",[148,1171,611],{"class":267},[148,1173,614],{"class":162},[148,1175,1177,1179,1181,1183,1186,1188],{"class":150,"line":1176},29,[148,1178,968],{"class":579},[148,1180,136],{"class":583},[148,1182,604],{"class":267},[148,1184,1185],{"class":607},"btn-skew btn-skew-neutral hover:border-neutral",[148,1187,611],{"class":267},[148,1189,614],{"class":162},[148,1191,1193],{"class":150,"line":1192},30,[148,1194,786],{"class":162},[148,1196,1198,1201],{"class":150,"line":1197},31,[148,1199,1200],{"class":158},"      ]",[148,1202,614],{"class":162},[148,1204,1206],{"class":150,"line":1205},32,[148,1207,635],{"class":162},[148,1209,1211],{"class":150,"line":1210},33,[148,1212,800],{"class":162},[148,1214,1216,1218,1220],{"class":150,"line":1215},34,[148,1217,806],{"class":162},[148,1219,809],{"class":158},[148,1221,200],{"class":162},[23,1223,1224],{},"Now add the corresponding CSS for each color:",[138,1226,1228],{"className":140,"code":1227,"filename":142,"language":143,"meta":144,"style":144},"\u002F* Alternative skew variants with different colors *\u002F\n.btn-skew-success::before {\n  background-color: var(--ui-success);\n}\n\n.btn-skew-info::before {\n  background-color: var(--ui-info);\n}\n\n.btn-skew-warning::before {\n  background-color: var(--ui-warning);\n}\n\n.btn-skew-neutral::before {\n  background-color: var(--ui-bg-inverted);\n}\n",[50,1229,1230,1235,1249,1265,1269,1273,1286,1301,1305,1309,1322,1337,1341,1345,1358,1373],{"__ignoreMap":144},[148,1231,1232],{"class":150,"line":151},[148,1233,1234],{"class":169},"\u002F* Alternative skew variants with different colors *\u002F\n",[148,1236,1237,1240,1243,1245,1247],{"class":150,"line":166},[148,1238,1239],{"class":176},".",[148,1241,1242],{"class":180},"btn-skew-success",[148,1244,250],{"class":249},[148,1246,254],{"class":253},[148,1248,184],{"class":162},[148,1250,1251,1254,1256,1258,1260,1263],{"class":150,"line":173},[148,1252,1253],{"class":190},"  background-color",[148,1255,136],{"class":162},[148,1257,353],{"class":352},[148,1259,356],{"class":162},[148,1261,1262],{"class":359},"--ui-success",[148,1264,363],{"class":162},[148,1266,1267],{"class":150,"line":187},[148,1268,471],{"class":162},[148,1270,1271],{"class":150,"line":203},[148,1272,239],{"emptyLinePlaceholder":10},[148,1274,1275,1277,1280,1282,1284],{"class":150,"line":216},[148,1276,1239],{"class":176},[148,1278,1279],{"class":180},"btn-skew-info",[148,1281,250],{"class":249},[148,1283,254],{"class":253},[148,1285,184],{"class":162},[148,1287,1288,1290,1292,1294,1296,1299],{"class":150,"line":230},[148,1289,1253],{"class":190},[148,1291,136],{"class":162},[148,1293,353],{"class":352},[148,1295,356],{"class":162},[148,1297,1298],{"class":359},"--ui-info",[148,1300,363],{"class":162},[148,1302,1303],{"class":150,"line":236},[148,1304,471],{"class":162},[148,1306,1307],{"class":150,"line":242},[148,1308,239],{"emptyLinePlaceholder":10},[148,1310,1311,1313,1316,1318,1320],{"class":150,"line":259},[148,1312,1239],{"class":176},[148,1314,1315],{"class":180},"btn-skew-warning",[148,1317,250],{"class":249},[148,1319,254],{"class":253},[148,1321,184],{"class":162},[148,1323,1324,1326,1328,1330,1332,1335],{"class":150,"line":273},[148,1325,1253],{"class":190},[148,1327,136],{"class":162},[148,1329,353],{"class":352},[148,1331,356],{"class":162},[148,1333,1334],{"class":359},"--ui-warning",[148,1336,363],{"class":162},[148,1338,1339],{"class":150,"line":285},[148,1340,471],{"class":162},[148,1342,1343],{"class":150,"line":297},[148,1344,239],{"emptyLinePlaceholder":10},[148,1346,1347,1349,1352,1354,1356],{"class":150,"line":314},[148,1348,1239],{"class":176},[148,1350,1351],{"class":180},"btn-skew-neutral",[148,1353,250],{"class":249},[148,1355,254],{"class":253},[148,1357,184],{"class":162},[148,1359,1360,1362,1364,1366,1368,1371],{"class":150,"line":330},[148,1361,1253],{"class":190},[148,1363,136],{"class":162},[148,1365,353],{"class":352},[148,1367,356],{"class":162},[148,1369,1370],{"class":359},"--ui-bg-inverted",[148,1372,363],{"class":162},[148,1374,1375],{"class":150,"line":344},[148,1376,471],{"class":162},[42,1378,1380],{"id":1379},"usage","Usage",[23,1382,1383],{},"Now you can use your custom variant just like any built-in variant:",[138,1385,1390],{"className":1386,"code":1387,"filename":1388,"language":1389,"meta":144,"style":144},"language-vue shiki shiki-themes material-theme-lighter one-light one-dark-pro","\u003Ctemplate>\n  \u003Cdiv class=\"flex gap-4\">\n    \u003C!-- Primary skew button -->\n    \u003CUButton variant=\"skew\" color=\"primary\">\n      Get Started\n    \u003C\u002FUButton>\n\n    \u003C!-- Success skew button -->\n    \u003CUButton variant=\"skew\" color=\"success\">\n      Save Changes\n    \u003C\u002FUButton>\n\n    \u003C!-- With an icon -->\n    \u003CUButton variant=\"skew\" color=\"primary\" icon=\"lucide:download\">\n      Download\n    \u003C\u002FUButton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","example.vue","vue",[50,1391,1392,1403,1427,1432,1464,1469,1478,1482,1487,1515,1520,1528,1532,1537,1577,1582,1590,1599],{"__ignoreMap":144},[148,1393,1394,1397,1400],{"class":150,"line":151},[148,1395,1396],{"class":162},"\u003C",[148,1398,1399],{"class":579},"template",[148,1401,1402],{"class":162},">\n",[148,1404,1405,1408,1411,1415,1418,1420,1423,1425],{"class":150,"line":166},[148,1406,1407],{"class":162},"  \u003C",[148,1409,1410],{"class":579},"div",[148,1412,1414],{"class":1413},"sGh1W"," class",[148,1416,1417],{"class":162},"=",[148,1419,611],{"class":267},[148,1421,1422],{"class":607},"flex gap-4",[148,1424,611],{"class":267},[148,1426,1402],{"class":162},[148,1428,1429],{"class":150,"line":173},[148,1430,1431],{"class":169},"    \u003C!-- Primary skew button -->\n",[148,1433,1434,1437,1440,1443,1445,1447,1449,1451,1454,1456,1458,1460,1462],{"class":150,"line":187},[148,1435,1436],{"class":162},"    \u003C",[148,1438,1439],{"class":579},"UButton",[148,1441,1442],{"class":1413}," variant",[148,1444,1417],{"class":162},[148,1446,611],{"class":267},[148,1448,70],{"class":607},[148,1450,611],{"class":267},[148,1452,1453],{"class":1413}," color",[148,1455,1417],{"class":162},[148,1457,611],{"class":267},[148,1459,959],{"class":607},[148,1461,611],{"class":267},[148,1463,1402],{"class":162},[148,1465,1466],{"class":150,"line":203},[148,1467,1468],{"class":158},"      Get Started\n",[148,1470,1471,1474,1476],{"class":150,"line":216},[148,1472,1473],{"class":162},"    \u003C\u002F",[148,1475,1439],{"class":579},[148,1477,1402],{"class":162},[148,1479,1480],{"class":150,"line":230},[148,1481,239],{"emptyLinePlaceholder":10},[148,1483,1484],{"class":150,"line":236},[148,1485,1486],{"class":169},"    \u003C!-- Success skew button -->\n",[148,1488,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513],{"class":150,"line":242},[148,1490,1436],{"class":162},[148,1492,1439],{"class":579},[148,1494,1442],{"class":1413},[148,1496,1417],{"class":162},[148,1498,611],{"class":267},[148,1500,70],{"class":607},[148,1502,611],{"class":267},[148,1504,1453],{"class":1413},[148,1506,1417],{"class":162},[148,1508,611],{"class":267},[148,1510,1011],{"class":607},[148,1512,611],{"class":267},[148,1514,1402],{"class":162},[148,1516,1517],{"class":150,"line":259},[148,1518,1519],{"class":158},"      Save Changes\n",[148,1521,1522,1524,1526],{"class":150,"line":273},[148,1523,1473],{"class":162},[148,1525,1439],{"class":579},[148,1527,1402],{"class":162},[148,1529,1530],{"class":150,"line":285},[148,1531,239],{"emptyLinePlaceholder":10},[148,1533,1534],{"class":150,"line":297},[148,1535,1536],{"class":169},"    \u003C!-- With an icon -->\n",[148,1538,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1566,1568,1570,1573,1575],{"class":150,"line":314},[148,1540,1436],{"class":162},[148,1542,1439],{"class":579},[148,1544,1442],{"class":1413},[148,1546,1417],{"class":162},[148,1548,611],{"class":267},[148,1550,70],{"class":607},[148,1552,611],{"class":267},[148,1554,1453],{"class":1413},[148,1556,1417],{"class":162},[148,1558,611],{"class":267},[148,1560,959],{"class":607},[148,1562,611],{"class":267},[148,1564,1565],{"class":1413}," icon",[148,1567,1417],{"class":162},[148,1569,611],{"class":267},[148,1571,1572],{"class":607},"lucide:download",[148,1574,611],{"class":267},[148,1576,1402],{"class":162},[148,1578,1579],{"class":150,"line":330},[148,1580,1581],{"class":158},"      Download\n",[148,1583,1584,1586,1588],{"class":150,"line":344},[148,1585,1473],{"class":162},[148,1587,1439],{"class":579},[148,1589,1402],{"class":162},[148,1591,1592,1595,1597],{"class":150,"line":366},[148,1593,1594],{"class":162},"  \u003C\u002F",[148,1596,1410],{"class":579},[148,1598,1402],{"class":162},[148,1600,1601,1604,1606],{"class":150,"line":387},[148,1602,1603],{"class":162},"\u003C\u002F",[148,1605,1399],{"class":579},[148,1607,1402],{"class":162},[42,1609,1611],{"id":1610},"bonus-circular-button-variant","Bonus: Circular Button Variant",[23,1613,1614],{},"For circular buttons like a scroll-to-top button, the skew effect doesn't work well because of the rounded shape. Here's a variant that expands from the center instead.",[23,1616,1617],{},"First, add the CSS:",[549,1619,1620],{},[138,1621,1623],{"className":140,"code":1622,"filename":142,"language":143,"meta":144,"style":144},"\u002F* Circular Button Animation - for rounded-full buttons *\u002F\n.btn-skew-circle {\n  position: relative;\n  overflow: hidden;\n  z-index: 0;\n}\n\n.btn-skew-circle::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0%;\n  height: 0%;\n  background-color: var(--ui-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  z-index: -1;\n  transition: width 300ms ease-out, height 300ms ease-out;\n}\n\n.btn-skew-circle:hover::before {\n  width: 150%;\n  height: 150%;\n}\n",[50,1624,1625,1630,1639,1650,1661,1672,1676,1680,1692,1703,1713,1727,1740,1753,1766,1780,1793,1820,1830,1859,1863,1867,1883,1895,1907],{"__ignoreMap":144},[148,1626,1627],{"class":150,"line":151},[148,1628,1629],{"class":169},"\u002F* Circular Button Animation - for rounded-full buttons *\u002F\n",[148,1631,1632,1634,1637],{"class":150,"line":166},[148,1633,1239],{"class":176},[148,1635,1636],{"class":180},"btn-skew-circle",[148,1638,184],{"class":162},[148,1640,1641,1644,1646,1648],{"class":150,"line":173},[148,1642,1643],{"class":190},"  position",[148,1645,136],{"class":162},[148,1647,197],{"class":196},[148,1649,200],{"class":162},[148,1651,1652,1655,1657,1659],{"class":150,"line":187},[148,1653,1654],{"class":190},"  overflow",[148,1656,136],{"class":162},[148,1658,211],{"class":196},[148,1660,200],{"class":162},[148,1662,1663,1666,1668,1670],{"class":150,"line":203},[148,1664,1665],{"class":190},"  z-index",[148,1667,136],{"class":162},[148,1669,225],{"class":224},[148,1671,200],{"class":162},[148,1673,1674],{"class":150,"line":216},[148,1675,471],{"class":162},[148,1677,1678],{"class":150,"line":230},[148,1679,239],{"emptyLinePlaceholder":10},[148,1681,1682,1684,1686,1688,1690],{"class":150,"line":236},[148,1683,1239],{"class":176},[148,1685,1636],{"class":180},[148,1687,250],{"class":249},[148,1689,254],{"class":253},[148,1691,184],{"class":162},[148,1693,1694,1697,1699,1701],{"class":150,"line":242},[148,1695,1696],{"class":190},"  content",[148,1698,136],{"class":162},[148,1700,268],{"class":267},[148,1702,200],{"class":162},[148,1704,1705,1707,1709,1711],{"class":150,"line":259},[148,1706,1643],{"class":190},[148,1708,136],{"class":162},[148,1710,280],{"class":196},[148,1712,200],{"class":162},[148,1714,1715,1718,1720,1723,1725],{"class":150,"line":273},[148,1716,1717],{"class":190},"  top",[148,1719,136],{"class":162},[148,1721,1722],{"class":224}," 50",[148,1724,325],{"class":308},[148,1726,200],{"class":162},[148,1728,1729,1732,1734,1736,1738],{"class":150,"line":285},[148,1730,1731],{"class":190},"  left",[148,1733,136],{"class":162},[148,1735,1722],{"class":224},[148,1737,325],{"class":308},[148,1739,200],{"class":162},[148,1741,1742,1745,1747,1749,1751],{"class":150,"line":297},[148,1743,1744],{"class":190},"  width",[148,1746,136],{"class":162},[148,1748,225],{"class":224},[148,1750,325],{"class":308},[148,1752,200],{"class":162},[148,1754,1755,1758,1760,1762,1764],{"class":150,"line":314},[148,1756,1757],{"class":190},"  height",[148,1759,136],{"class":162},[148,1761,225],{"class":224},[148,1763,325],{"class":308},[148,1765,200],{"class":162},[148,1767,1768,1770,1772,1774,1776,1778],{"class":150,"line":330},[148,1769,1253],{"class":190},[148,1771,136],{"class":162},[148,1773,353],{"class":352},[148,1775,356],{"class":162},[148,1777,360],{"class":359},[148,1779,363],{"class":162},[148,1781,1782,1785,1787,1789,1791],{"class":150,"line":344},[148,1783,1784],{"class":190},"  border-radius",[148,1786,136],{"class":162},[148,1788,1722],{"class":224},[148,1790,325],{"class":308},[148,1792,200],{"class":162},[148,1794,1795,1798,1800,1803,1805,1808,1810,1813,1816,1818],{"class":150,"line":366},[148,1796,1797],{"class":190},"  transform",[148,1799,136],{"class":162},[148,1801,1802],{"class":352}," translate",[148,1804,356],{"class":162},[148,1806,1807],{"class":224},"-50",[148,1809,325],{"class":308},[148,1811,1812],{"class":162},",",[148,1814,1815],{"class":224}," -50",[148,1817,325],{"class":308},[148,1819,363],{"class":162},[148,1821,1822,1824,1826,1828],{"class":150,"line":387},[148,1823,1665],{"class":190},[148,1825,136],{"class":162},[148,1827,394],{"class":224},[148,1829,200],{"class":162},[148,1831,1832,1835,1837,1839,1842,1844,1846,1848,1851,1853,1855,1857],{"class":150,"line":399},[148,1833,1834],{"class":190},"  transition",[148,1836,136],{"class":162},[148,1838,407],{"class":158},[148,1840,1841],{"class":224},"300",[148,1843,413],{"class":308},[148,1845,416],{"class":196},[148,1847,1812],{"class":162},[148,1849,1850],{"class":158}," height ",[148,1852,1841],{"class":224},[148,1854,413],{"class":308},[148,1856,416],{"class":196},[148,1858,200],{"class":162},[148,1860,1861],{"class":150,"line":421},[148,1862,471],{"class":162},[148,1864,1865],{"class":150,"line":426},[148,1866,239],{"emptyLinePlaceholder":10},[148,1868,1869,1871,1873,1875,1877,1879,1881],{"class":150,"line":431},[148,1870,1239],{"class":176},[148,1872,1636],{"class":180},[148,1874,136],{"class":249},[148,1876,440],{"class":253},[148,1878,250],{"class":249},[148,1880,254],{"class":253},[148,1882,184],{"class":162},[148,1884,1885,1887,1889,1891,1893],{"class":150,"line":449},[148,1886,1744],{"class":190},[148,1888,136],{"class":162},[148,1890,456],{"class":224},[148,1892,325],{"class":308},[148,1894,200],{"class":162},[148,1896,1897,1899,1901,1903,1905],{"class":150,"line":463},[148,1898,1757],{"class":190},[148,1900,136],{"class":162},[148,1902,456],{"class":224},[148,1904,325],{"class":308},[148,1906,200],{"class":162},[148,1908,1909],{"class":150,"line":468},[148,1910,471],{"class":162},[23,1912,1913,1914,136],{},"Then register it as a variant in ",[50,1915,116],{},[138,1917,1919],{"className":553,"code":1918,"filename":116,"language":555,"meta":144,"style":144},"button: {\n  variants: {\n    variant: {\n      skew: { \u002F* ... *\u002F },\n      \"skew-circle\": {\n        base: [\n          \"btn-skew-circle\",\n          \"rounded-full\",\n          \"border border-neutral-300 dark:border-neutral-700\",\n          \"bg-default\",\n          \"transition-all duration-300\",\n          \"hover:border-primary\",\n          \"hover:text-white dark:hover:text-default\",\n          \"disabled:cursor-not-allowed\",\n          \"disabled:opacity-50\",\n        ],\n      },\n    },\n  },\n  compoundVariants: [\n    \u002F\u002F ... other variants\n    {\n      variant: \"skew-circle\",\n      color: \"primary\",\n      class: \"btn-skew-circle\",\n    },\n  ],\n}\n",[50,1920,1921,1931,1940,1949,1965,1981,1990,2001,2012,2022,2032,2042,2052,2062,2072,2082,2089,2093,2097,2101,2110,2115,2120,2135,2150,2165,2169,2176],{"__ignoreMap":144},[148,1922,1923,1927,1929],{"class":150,"line":151},[148,1924,1926],{"class":1925},"sPgms","button",[148,1928,136],{"class":162},[148,1930,184],{"class":162},[148,1932,1933,1936,1938],{"class":150,"line":166},[148,1934,1935],{"class":1925},"  variants",[148,1937,136],{"class":162},[148,1939,184],{"class":162},[148,1941,1942,1945,1947],{"class":150,"line":173},[148,1943,1944],{"class":1925},"    variant",[148,1946,136],{"class":162},[148,1948,184],{"class":162},[148,1950,1951,1954,1956,1959,1962],{"class":150,"line":187},[148,1952,1953],{"class":1925},"      skew",[148,1955,136],{"class":162},[148,1957,1958],{"class":162}," {",[148,1960,1961],{"class":169}," \u002F* ... *\u002F",[148,1963,1964],{"class":162}," },\n",[148,1966,1967,1970,1973,1975,1979],{"class":150,"line":203},[148,1968,1969],{"class":267},"      \"",[148,1971,1972],{"class":607},"skew-circle",[148,1974,611],{"class":267},[148,1976,1978],{"class":1977},"sA0eD",": ",[148,1980,163],{"class":162},[148,1982,1983,1986,1988],{"class":150,"line":216},[148,1984,1985],{"class":579},"        base",[148,1987,136],{"class":583},[148,1989,681],{"class":1977},[148,1991,1992,1995,1997,1999],{"class":150,"line":230},[148,1993,1994],{"class":267},"          \"",[148,1996,1636],{"class":607},[148,1998,611],{"class":267},[148,2000,614],{"class":162},[148,2002,2003,2005,2008,2010],{"class":150,"line":236},[148,2004,1994],{"class":267},[148,2006,2007],{"class":607},"rounded-full",[148,2009,611],{"class":267},[148,2011,614],{"class":162},[148,2013,2014,2016,2018,2020],{"class":150,"line":242},[148,2015,1994],{"class":267},[148,2017,699],{"class":607},[148,2019,611],{"class":267},[148,2021,614],{"class":162},[148,2023,2024,2026,2028,2030],{"class":150,"line":259},[148,2025,1994],{"class":267},[148,2027,710],{"class":607},[148,2029,611],{"class":267},[148,2031,614],{"class":162},[148,2033,2034,2036,2038,2040],{"class":150,"line":273},[148,2035,1994],{"class":267},[148,2037,721],{"class":607},[148,2039,611],{"class":267},[148,2041,614],{"class":162},[148,2043,2044,2046,2048,2050],{"class":150,"line":285},[148,2045,1994],{"class":267},[148,2047,732],{"class":607},[148,2049,611],{"class":267},[148,2051,614],{"class":162},[148,2053,2054,2056,2058,2060],{"class":150,"line":297},[148,2055,1994],{"class":267},[148,2057,743],{"class":607},[148,2059,611],{"class":267},[148,2061,614],{"class":162},[148,2063,2064,2066,2068,2070],{"class":150,"line":314},[148,2065,1994],{"class":267},[148,2067,754],{"class":607},[148,2069,611],{"class":267},[148,2071,614],{"class":162},[148,2073,2074,2076,2078,2080],{"class":150,"line":330},[148,2075,1994],{"class":267},[148,2077,765],{"class":607},[148,2079,611],{"class":267},[148,2081,614],{"class":162},[148,2083,2084,2087],{"class":150,"line":344},[148,2085,2086],{"class":1977},"        ]",[148,2088,614],{"class":162},[148,2090,2091],{"class":150,"line":366},[148,2092,791],{"class":162},[148,2094,2095],{"class":150,"line":387},[148,2096,635],{"class":162},[148,2098,2099],{"class":150,"line":399},[148,2100,800],{"class":162},[148,2102,2103,2106,2108],{"class":150,"line":421},[148,2104,2105],{"class":1925},"  compoundVariants",[148,2107,136],{"class":162},[148,2109,681],{"class":1977},[148,2111,2112],{"class":150,"line":426},[148,2113,2114],{"class":169},"    \u002F\u002F ... other variants\n",[148,2116,2117],{"class":150,"line":431},[148,2118,2119],{"class":162},"    {\n",[148,2121,2122,2125,2127,2129,2131,2133],{"class":150,"line":449},[148,2123,2124],{"class":579},"      variant",[148,2126,136],{"class":583},[148,2128,604],{"class":267},[148,2130,1972],{"class":607},[148,2132,611],{"class":267},[148,2134,614],{"class":162},[148,2136,2137,2140,2142,2144,2146,2148],{"class":150,"line":463},[148,2138,2139],{"class":579},"      color",[148,2141,136],{"class":583},[148,2143,604],{"class":267},[148,2145,959],{"class":607},[148,2147,611],{"class":267},[148,2149,614],{"class":162},[148,2151,2152,2155,2157,2159,2161,2163],{"class":150,"line":468},[148,2153,2154],{"class":579},"      class",[148,2156,136],{"class":583},[148,2158,604],{"class":267},[148,2160,1636],{"class":607},[148,2162,611],{"class":267},[148,2164,614],{"class":162},[148,2166,2167],{"class":150,"line":803},[148,2168,635],{"class":162},[148,2170,2171,2174],{"class":150,"line":1145},[148,2172,2173],{"class":1977},"  ]",[148,2175,614],{"class":162},[148,2177,2178],{"class":150,"line":1160},[148,2179,471],{"class":162},[23,2181,2182],{},"Now you can use it cleanly without adding extra classes:",[138,2184,2187],{"className":1386,"code":2185,"filename":2186,"language":1389,"meta":144,"style":144},"\u003CUButton\n  icon=\"lucide:arrow-up\"\n  variant=\"skew-circle\"\n  color=\"primary\"\n  aria-label=\"Scroll to top\"\n\u002F>\n","ScrollToTop.vue",[50,2188,2189,2196,2211,2224,2237,2251],{"__ignoreMap":144},[148,2190,2191,2193],{"class":150,"line":151},[148,2192,1396],{"class":162},[148,2194,2195],{"class":579},"UButton\n",[148,2197,2198,2201,2203,2205,2208],{"class":150,"line":166},[148,2199,2200],{"class":1413},"  icon",[148,2202,1417],{"class":162},[148,2204,611],{"class":267},[148,2206,2207],{"class":607},"lucide:arrow-up",[148,2209,2210],{"class":267},"\"\n",[148,2212,2213,2216,2218,2220,2222],{"class":150,"line":173},[148,2214,2215],{"class":1413},"  variant",[148,2217,1417],{"class":162},[148,2219,611],{"class":267},[148,2221,1972],{"class":607},[148,2223,2210],{"class":267},[148,2225,2226,2229,2231,2233,2235],{"class":150,"line":187},[148,2227,2228],{"class":1413},"  color",[148,2230,1417],{"class":162},[148,2232,611],{"class":267},[148,2234,959],{"class":607},[148,2236,2210],{"class":267},[148,2238,2239,2242,2244,2246,2249],{"class":150,"line":203},[148,2240,2241],{"class":1413},"  aria-label",[148,2243,1417],{"class":162},[148,2245,611],{"class":267},[148,2247,2248],{"class":607},"Scroll to top",[148,2250,2210],{"class":267},[148,2252,2253],{"class":150,"line":216},[148,2254,2255],{"class":158},"\u002F>\n",[23,2257,2258,2259,2261],{},"The key difference is that ",[50,2260,1972],{}," uses:",[80,2263,2264,2272,2280],{},[83,2265,2266,2271],{},[29,2267,2268],{},[50,2269,2270],{},"border-radius: 50%"," on the pseudo-element for a circular fill",[83,2273,2274,2279],{},[29,2275,2276],{},[50,2277,2278],{},"transform: translate(-50%, -50%)"," to center the animation",[83,2281,2282,2285],{},[29,2283,2284],{},"Both width and height"," animate together for uniform expansion",[42,2287,2289],{"id":2288},"key-takeaways","Key Takeaways",[100,2291,2292,2301,2307,2313,2322],{},[83,2293,2294,2297,2298,2300],{},[29,2295,2296],{},"CSS Variables",": Use Nuxt UI's CSS variables like ",[50,2299,526],{}," for consistent theming",[83,2302,2303,2306],{},[29,2304,2305],{},"Compound Variants",": Allow you to combine variant + color for specific styling",[83,2308,2309,2312],{},[29,2310,2311],{},"Pseudo-elements",": Perfect for creating animated backgrounds without extra DOM elements",[83,2314,2315,2321],{},[29,2316,2317,2320],{},[50,2318,2319],{},"z-index"," layering",": Keep animations behind content using negative z-index",[83,2323,2324,2327,2328,2331],{},[29,2325,2326],{},"Transition timing",": The ",[50,2329,2330],{},"500ms ease-out"," creates a smooth, premium feel",[42,2333,2335],{"id":2334},"common-pitfalls","Common Pitfalls",[1115,2337,2338],{},[23,2339,2340,2343,2344,2346],{},[29,2341,2342],{},"Overflow Hidden",": Always set ",[50,2345,489],{}," on the button to clip the animated pseudo-element.",[2348,2349,2350],"caution",{},[23,2351,2352,2355,2356,2358,2359,2362],{},[29,2353,2354],{},"Z-Index Context",": Make sure your pseudo-element has ",[50,2357,536],{}," and the parent has ",[50,2360,2361],{},"z-index: 0"," to create a proper stacking context.",[42,2364,2366],{"id":2365},"conclusion","Conclusion",[23,2368,2369,2370,2372],{},"Nuxt UI's configuration system makes it incredibly easy to extend the component library with custom variants. By combining CSS pseudo-elements with the ",[50,2371,116],{}," configuration, you can create unique, branded button styles that work seamlessly with Nuxt UI's theming system.",[23,2374,2375],{},"The skew effect adds a touch of premium interactivity to any button, making your UI feel more polished and engaging. Try experimenting with different animations, timing functions, and transform properties to create your own signature effects!",[42,2377,2379],{"id":2378},"resources","Resources",[80,2381,2382,2391,2398],{},[83,2383,2384],{},[2385,2386,2390],"a",{"href":2387,"rel":2388},"https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents",[2389],"nofollow","Nuxt UI Documentation",[83,2392,2393],{},[2385,2394,2397],{"href":2395,"rel":2396},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F::before",[2389],"CSS Pseudo-elements",[83,2399,2400],{},[2385,2401,2404],{"href":2402,"rel":2403},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform",[2389],"CSS Transforms",[42,2406,2408],{"id":2407},"thank-you","Thank You",[2410,2411,2412],"style",{},"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 .sM89C, html code.shiki .sM89C{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sB4Xn, html code.shiki .sB4Xn{--shiki-light:#39ADB5;--shiki-default:#383A42;--shiki-dark:#ABB2BF}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 .svDm9, html code.shiki .svDm9{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .s6wAS, html code.shiki .s6wAS{--shiki-light:#E2931D;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sGRuu, html code.shiki .sGRuu{--shiki-light:#8796B0;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sngOx, html code.shiki .sngOx{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#D19A66}html pre.shiki code .sriKn, html code.shiki .sriKn{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sst0O, html code.shiki .sst0O{--shiki-light:#39ADB5;--shiki-default:#986801;--shiki-dark:#56B6C2}html pre.shiki code .sSxop, html code.shiki .sSxop{--shiki-light:#9C3EDA;--shiki-default:#986801;--shiki-dark:#56B6C2}html pre.shiki code .sVH1b, html code.shiki .sVH1b{--shiki-light:#39ADB5;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sLhkd, html code.shiki .sLhkd{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#E06C75}html pre.shiki code .sTDPv, html code.shiki .sTDPv{--shiki-light:#6182B8;--shiki-default:#0184BC;--shiki-dark:#56B6C2}html pre.shiki code .s8dPH, html code.shiki .s8dPH{--shiki-light:#90A4AE;--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 .sH50Z, html code.shiki .sH50Z{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#E45649;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:inherit}html pre.shiki code .spnjr, html code.shiki .spnjr{--shiki-light:#6182B8;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .su13H, html code.shiki .su13H{--shiki-light:#E53935;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .saKOp, html code.shiki .saKOp{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#ABB2BF}html pre.shiki code .spZWa, html code.shiki .spZWa{--shiki-light:#91B859;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sGh1W, html code.shiki .sGh1W{--shiki-light:#9C3EDA;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sPgms, html code.shiki .sPgms{--shiki-light:#E2931D;--shiki-default:#383A42;--shiki-dark:#E06C75}html pre.shiki code .sA0eD, html code.shiki .sA0eD{--shiki-light:#E53935;--shiki-default:#383A42;--shiki-dark:#ABB2BF}",{"title":144,"searchDepth":166,"depth":166,"links":2414},[2415,2416,2417,2418,2421,2424,2425,2426,2427,2428,2429,2430,2431],{"id":44,"depth":166,"text":45},{"id":74,"depth":166,"text":75},{"id":94,"depth":166,"text":95},{"id":128,"depth":166,"text":129,"children":2419},[2420],{"id":475,"depth":173,"text":476},{"id":540,"depth":166,"text":541,"children":2422},[2423],{"id":814,"depth":173,"text":815},{"id":874,"depth":166,"text":875},{"id":1379,"depth":166,"text":1380},{"id":1610,"depth":166,"text":1611},{"id":2288,"depth":166,"text":2289},{"id":2334,"depth":166,"text":2335},{"id":2365,"depth":166,"text":2366},{"id":2378,"depth":166,"text":2379},{"id":2407,"depth":166,"text":2408},"2026-01-17",false,"md",{"slug":2436,"difficulty":2437,"featured":10,"icon":2438,"ogImage":2439,"tags":2441,"topic":2438},"nuxt-ui-custom-button-variants","intermediate","nuxt",{"alt":2440},"Custom button variants in Nuxt UI",[2438,2442,143,2443],"nuxt-ui","guide","\u002Farticles\u002Fnuxt-ui-custom-button-variants",{"title":18,"description":25},"articles\u002Fnuxt-ui-custom-button-variants","7Nfqzz-tDpTzanfcGL90dM2FgDZbg3OtcgotntAfaHo",{"id":2449,"title":2450,"author":6,"body":2451,"date":4616,"description":2455,"draft":2433,"extension":2434,"image":6,"lastmod":4616,"meta":4617,"minRead":6,"navigation":10,"path":4623,"seo":4624,"stem":4625,"__hash__":4626},"articles\u002Farticles\u002Fremote-back-button-js.md","How to Handle Browser Back Button Navigation Events in Vue 3",{"type":20,"value":2452,"toc":4592},[2453,2456,2458,2461,2472,2475,2486,2489,2493,2500,2517,2520,2524,3384,3386,3390,3393,3477,3480,3484,3487,3495,3548,3552,3555,3624,3627,3631,3634,3735,3739,3743,3953,3957,4279,4283,4288,4292,4295,4365,4369,4372,4465,4469,4472,4516,4520,4557,4559,4564,4567,4570,4584,4587,4589],[23,2454,2455],{},"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.",[42,2457,45],{"id":44},[23,2459,2460],{},"Have you ever encountered these scenarios?",[100,2462,2463,2466,2469],{},[83,2464,2465],{},"User opens a modal dialog",[83,2467,2468],{},"User clicks the browser's back button",[83,2470,2471],{},"Instead of closing the modal, the whole application navigates back",[23,2473,2474],{},"Or maybe:",[100,2476,2477,2480,2483],{},[83,2478,2479],{},"User opens a modal",[83,2481,2482],{},"Modal closes when back button is pressed (good!)",[83,2484,2485],{},"But the page unexpectedly scrolls to the top (bad!)",[23,2487,2488],{},"These are common issues that can frustrate users and make your application feel unprofessional. Let's solve them with a robust solution.",[42,2490,2492],{"id":2491},"introducing-usebackbutton-composable","Introducing useBackButton Composable",[23,2494,2495,2496,2499],{},"Our ",[50,2497,2498],{},"useBackButton"," composable is designed to:",[80,2501,2502,2505,2508,2511,2514],{},[83,2503,2504],{},"Intercept back button clicks",[83,2506,2507],{},"Close modals\u002Fdialogs instead of navigating",[83,2509,2510],{},"Preserve scroll position when appropriate",[83,2512,2513],{},"Handle edge cases like double-clicks",[83,2515,2516],{},"Maintain a clean browser history",[23,2518,2519],{},"Here's how we build it:",[473,2521,2523],{"id":2522},"the-core-implementation","The Core Implementation",[549,2525,2526],{},[138,2527,2532],{"className":2528,"code":2529,"filename":2530,"language":2531,"meta":144,"style":144},"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",[50,2533,2534,2539,2573,2595,2599,2620,2640,2644,2662,2683,2688,2727,2763,2767,2785,2801,2806,2811,2815,2828,2833,2866,2894,2903,2907,2920,2945,2953,2957,2979,2994,3007,3022,3033,3037,3046,3051,3059,3075,3089,3103,3109,3143,3149,3154,3162,3167,3172,3178,3211,3230,3249,3267,3275,3280,3290,3299,3304,3310,3338,3354,3366,3375],{"__ignoreMap":144},[148,2535,2536],{"class":150,"line":151},[148,2537,2538],{"class":169},"\u002F\u002F composables\u002FuseBackButton.js\n",[148,2540,2541,2544,2546,2549,2551,2554,2556,2559,2562,2565,2567,2569,2571],{"class":150,"line":166},[148,2542,2543],{"class":154},"import",[148,2545,1958],{"class":162},[148,2547,2548],{"class":359}," watch",[148,2550,1812],{"class":162},[148,2552,2553],{"class":359}," onMounted",[148,2555,1812],{"class":162},[148,2557,2558],{"class":359}," onUnmounted",[148,2560,2561],{"class":162}," }",[148,2563,2564],{"class":154}," from",[148,2566,604],{"class":267},[148,2568,1389],{"class":607},[148,2570,611],{"class":267},[148,2572,200],{"class":162},[148,2574,2575,2577,2579,2582,2584,2586,2588,2591,2593],{"class":150,"line":173},[148,2576,2543],{"class":154},[148,2578,1958],{"class":162},[148,2580,2581],{"class":359}," useGlobalStore",[148,2583,2561],{"class":162},[148,2585,2564],{"class":154},[148,2587,604],{"class":267},[148,2589,2590],{"class":607},"@\u002Fstores\u002Fglobal",[148,2592,611],{"class":267},[148,2594,200],{"class":162},[148,2596,2597],{"class":150,"line":187},[148,2598,239],{"emptyLinePlaceholder":10},[148,2600,2601,2603,2607,2610,2612,2616,2618],{"class":150,"line":203},[148,2602,562],{"class":154},[148,2604,2606],{"class":2605},"sJvVP"," function",[148,2608,2609],{"class":569}," useBackButton",[148,2611,356],{"class":162},[148,2613,2615],{"class":2614},"s5f2p","contentVisibleRef",[148,2617,809],{"class":162},[148,2619,184],{"class":162},[148,2621,2622,2625,2629,2633,2635,2638],{"class":150,"line":216},[148,2623,2624],{"class":2605},"  const",[148,2626,2628],{"class":2627},"sMm83"," globalStore",[148,2630,2632],{"class":2631},"syPST"," =",[148,2634,2581],{"class":569},[148,2636,2637],{"class":1977},"()",[148,2639,200],{"class":162},[148,2641,2642],{"class":150,"line":230},[148,2643,239],{"emptyLinePlaceholder":10},[148,2645,2646,2648,2652,2654,2657,2660],{"class":150,"line":236},[148,2647,2624],{"class":2605},[148,2649,2651],{"class":2650},"svfkx"," handlePopState",[148,2653,2632],{"class":2631},[148,2655,2656],{"class":162}," ()",[148,2658,2659],{"class":2605}," =>",[148,2661,184],{"class":162},[148,2663,2664,2667,2670,2673,2675,2678,2681],{"class":150,"line":242},[148,2665,2666],{"class":154},"    if",[148,2668,2669],{"class":1977}," (",[148,2671,2615],{"class":2672},"scCn_",[148,2674,1239],{"class":162},[148,2676,2677],{"class":359},"value",[148,2679,2680],{"class":1977},") ",[148,2682,163],{"class":162},[148,2684,2685],{"class":150,"line":259},[148,2686,2687],{"class":169},"      \u002F\u002F Add history.pushState first to prevent navigation\n",[148,2689,2690,2693,2695,2698,2700,2703,2705,2707,2709,2712,2714,2718,2720,2723,2725],{"class":150,"line":273},[148,2691,2692],{"class":2672},"      history",[148,2694,1239],{"class":162},[148,2696,2697],{"class":569},"pushState",[148,2699,356],{"class":1977},[148,2701,2702],{"class":176},"null",[148,2704,1812],{"class":162},[148,2706,268],{"class":267},[148,2708,1812],{"class":162},[148,2710,2711],{"class":2672}," window",[148,2713,1239],{"class":162},[148,2715,2717],{"class":2716},"sDC5J","location",[148,2719,1239],{"class":162},[148,2721,2722],{"class":359},"pathname",[148,2724,809],{"class":1977},[148,2726,200],{"class":162},[148,2728,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757,2760],{"class":150,"line":285},[148,2730,2692],{"class":2672},[148,2732,1239],{"class":162},[148,2734,2697],{"class":569},[148,2736,356],{"class":1977},[148,2738,2702],{"class":176},[148,2740,1812],{"class":162},[148,2742,268],{"class":267},[148,2744,1812],{"class":162},[148,2746,2711],{"class":2672},[148,2748,1239],{"class":162},[148,2750,2717],{"class":2716},[148,2752,1239],{"class":162},[148,2754,2722],{"class":359},[148,2756,809],{"class":1977},[148,2758,2759],{"class":162},";",[148,2761,2762],{"class":169}," \u002F\u002F Add twice to ensure it works with double back click\n",[148,2764,2765],{"class":150,"line":297},[148,2766,239],{"emptyLinePlaceholder":10},[148,2768,2769,2772,2774,2777,2779,2783],{"class":150,"line":314},[148,2770,2771],{"class":2672},"      globalStore",[148,2773,1239],{"class":162},[148,2775,2776],{"class":359},"isBackBtnPressed",[148,2778,2632],{"class":2631},[148,2780,2782],{"class":2781},"sbyCm"," true",[148,2784,200],{"class":162},[148,2786,2787,2790,2792,2794,2796,2799],{"class":150,"line":330},[148,2788,2789],{"class":2672},"      contentVisibleRef",[148,2791,1239],{"class":162},[148,2793,2677],{"class":359},[148,2795,2632],{"class":2631},[148,2797,2798],{"class":2781}," false",[148,2800,200],{"class":162},[148,2802,2803],{"class":150,"line":344},[148,2804,2805],{"class":162},"    }\n",[148,2807,2808],{"class":150,"line":366},[148,2809,2810],{"class":162},"  };\n",[148,2812,2813],{"class":150,"line":387},[148,2814,239],{"emptyLinePlaceholder":10},[148,2816,2817,2820,2822,2824,2826],{"class":150,"line":399},[148,2818,2819],{"class":569},"  onMounted",[148,2821,356],{"class":1977},[148,2823,2637],{"class":162},[148,2825,2659],{"class":2605},[148,2827,184],{"class":162},[148,2829,2830],{"class":150,"line":421},[148,2831,2832],{"class":169},"    \u002F\u002F Add initial history state\n",[148,2834,2835,2838,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858,2860,2862,2864],{"class":150,"line":426},[148,2836,2837],{"class":2672},"    history",[148,2839,1239],{"class":162},[148,2841,2697],{"class":569},[148,2843,356],{"class":1977},[148,2845,2702],{"class":176},[148,2847,1812],{"class":162},[148,2849,268],{"class":267},[148,2851,1812],{"class":162},[148,2853,2711],{"class":2672},[148,2855,1239],{"class":162},[148,2857,2717],{"class":2716},[148,2859,1239],{"class":162},[148,2861,2722],{"class":359},[148,2863,809],{"class":1977},[148,2865,200],{"class":162},[148,2867,2868,2871,2873,2876,2878,2880,2883,2885,2887,2890,2892],{"class":150,"line":431},[148,2869,2870],{"class":2672},"    window",[148,2872,1239],{"class":162},[148,2874,2875],{"class":569},"addEventListener",[148,2877,356],{"class":1977},[148,2879,611],{"class":267},[148,2881,2882],{"class":607},"popstate",[148,2884,611],{"class":267},[148,2886,1812],{"class":162},[148,2888,2651],{"class":2889},"sWjah",[148,2891,809],{"class":1977},[148,2893,200],{"class":162},[148,2895,2896,2899,2901],{"class":150,"line":449},[148,2897,2898],{"class":162},"  }",[148,2900,809],{"class":1977},[148,2902,200],{"class":162},[148,2904,2905],{"class":150,"line":463},[148,2906,239],{"emptyLinePlaceholder":10},[148,2908,2909,2912,2914,2916,2918],{"class":150,"line":468},[148,2910,2911],{"class":569},"  onUnmounted",[148,2913,356],{"class":1977},[148,2915,2637],{"class":162},[148,2917,2659],{"class":2605},[148,2919,184],{"class":162},[148,2921,2922,2924,2926,2929,2931,2933,2935,2937,2939,2941,2943],{"class":150,"line":803},[148,2923,2870],{"class":2672},[148,2925,1239],{"class":162},[148,2927,2928],{"class":569},"removeEventListener",[148,2930,356],{"class":1977},[148,2932,611],{"class":267},[148,2934,2882],{"class":607},[148,2936,611],{"class":267},[148,2938,1812],{"class":162},[148,2940,2651],{"class":2889},[148,2942,809],{"class":1977},[148,2944,200],{"class":162},[148,2946,2947,2949,2951],{"class":150,"line":1145},[148,2948,2898],{"class":162},[148,2950,809],{"class":1977},[148,2952,200],{"class":162},[148,2954,2955],{"class":150,"line":1160},[148,2956,239],{"emptyLinePlaceholder":10},[148,2958,2959,2962,2964,2966,2968,2970,2973,2975,2977],{"class":150,"line":1176},[148,2960,2961],{"class":569},"  watch",[148,2963,356],{"class":1977},[148,2965,2615],{"class":2889},[148,2967,1812],{"class":162},[148,2969,2669],{"class":162},[148,2971,2972],{"class":2614},"newValue",[148,2974,809],{"class":162},[148,2976,2659],{"class":2605},[148,2978,184],{"class":162},[148,2980,2981,2983,2985,2988,2990,2992],{"class":150,"line":1192},[148,2982,2666],{"class":154},[148,2984,2669],{"class":1977},[148,2986,2987],{"class":2631},"!",[148,2989,2972],{"class":2889},[148,2991,2680],{"class":1977},[148,2993,163],{"class":162},[148,2995,2996,2999,3001,3003,3005],{"class":150,"line":1197},[148,2997,2998],{"class":569},"      setTimeout",[148,3000,356],{"class":1977},[148,3002,2637],{"class":162},[148,3004,2659],{"class":2605},[148,3006,184],{"class":162},[148,3008,3009,3012,3014,3016,3018,3020],{"class":150,"line":1205},[148,3010,3011],{"class":2672},"        globalStore",[148,3013,1239],{"class":162},[148,3015,2776],{"class":359},[148,3017,2632],{"class":2631},[148,3019,2798],{"class":2781},[148,3021,200],{"class":162},[148,3023,3024,3027,3029,3031],{"class":150,"line":1210},[148,3025,3026],{"class":162},"      },",[148,3028,322],{"class":224},[148,3030,809],{"class":1977},[148,3032,200],{"class":162},[148,3034,3035],{"class":150,"line":1215},[148,3036,2805],{"class":162},[148,3038,3040,3042,3044],{"class":150,"line":3039},35,[148,3041,2898],{"class":162},[148,3043,809],{"class":1977},[148,3045,200],{"class":162},[148,3047,3049],{"class":150,"line":3048},36,[148,3050,239],{"emptyLinePlaceholder":10},[148,3052,3054,3056],{"class":150,"line":3053},37,[148,3055,2961],{"class":569},[148,3057,3058],{"class":1977},"(\n",[148,3060,3062,3065,3067,3069,3071,3073],{"class":150,"line":3061},38,[148,3063,3064],{"class":162},"    ()",[148,3066,2659],{"class":2605},[148,3068,2628],{"class":2672},[148,3070,1239],{"class":162},[148,3072,2776],{"class":359},[148,3074,614],{"class":162},[148,3076,3078,3081,3083,3085,3087],{"class":150,"line":3077},39,[148,3079,3080],{"class":162},"    (",[148,3082,2972],{"class":2614},[148,3084,809],{"class":162},[148,3086,2659],{"class":2605},[148,3088,184],{"class":162},[148,3090,3092,3095,3097,3099,3101],{"class":150,"line":3091},40,[148,3093,3094],{"class":154},"      if",[148,3096,2669],{"class":1977},[148,3098,2972],{"class":2889},[148,3100,2680],{"class":1977},[148,3102,163],{"class":162},[148,3104,3106],{"class":150,"line":3105},41,[148,3107,3108],{"class":169},"        \u002F\u002F Ensure route change is prevented when state is true\n",[148,3110,3112,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137,3139,3141],{"class":150,"line":3111},42,[148,3113,3114],{"class":2672},"        history",[148,3116,1239],{"class":162},[148,3118,2697],{"class":569},[148,3120,356],{"class":1977},[148,3122,2702],{"class":176},[148,3124,1812],{"class":162},[148,3126,268],{"class":267},[148,3128,1812],{"class":162},[148,3130,2711],{"class":2672},[148,3132,1239],{"class":162},[148,3134,2717],{"class":2716},[148,3136,1239],{"class":162},[148,3138,2722],{"class":359},[148,3140,809],{"class":1977},[148,3142,200],{"class":162},[148,3144,3146],{"class":150,"line":3145},43,[148,3147,3148],{"class":162},"      }\n",[148,3150,3152],{"class":150,"line":3151},44,[148,3153,635],{"class":162},[148,3155,3157,3160],{"class":150,"line":3156},45,[148,3158,3159],{"class":1977},"  )",[148,3161,200],{"class":162},[148,3163,3165],{"class":150,"line":3164},46,[148,3166,471],{"class":162},[148,3168,3170],{"class":150,"line":3169},47,[148,3171,239],{"emptyLinePlaceholder":10},[148,3173,3175],{"class":150,"line":3174},48,[148,3176,3177],{"class":169},"\u002F\u002F router guard\n",[148,3179,3181,3184,3186,3189,3191,3193,3196,3198,3200,3202,3205,3207,3209],{"class":150,"line":3180},49,[148,3182,3183],{"class":2672},"router",[148,3185,1239],{"class":162},[148,3187,3188],{"class":569},"beforeEach",[148,3190,356],{"class":158},[148,3192,356],{"class":162},[148,3194,3195],{"class":2614},"to",[148,3197,1812],{"class":162},[148,3199,2564],{"class":2614},[148,3201,1812],{"class":162},[148,3203,3204],{"class":2614}," next",[148,3206,809],{"class":162},[148,3208,2659],{"class":2605},[148,3210,184],{"class":162},[148,3212,3214,3217,3219,3222,3224,3226,3228],{"class":150,"line":3213},50,[148,3215,3216],{"class":154},"  if",[148,3218,2669],{"class":1977},[148,3220,3221],{"class":2672},"globals",[148,3223,1239],{"class":162},[148,3225,2776],{"class":359},[148,3227,2680],{"class":1977},[148,3229,163],{"class":162},[148,3231,3233,3236,3238,3240,3242,3244,3246],{"class":150,"line":3232},51,[148,3234,3235],{"class":2672},"    globals",[148,3237,1239],{"class":162},[148,3239,2776],{"class":359},[148,3241,2632],{"class":2631},[148,3243,2798],{"class":2781},[148,3245,2759],{"class":162},[148,3247,3248],{"class":169}," \u002F\u002F Reset immediately\n",[148,3250,3252,3255,3257,3260,3262,3264],{"class":150,"line":3251},52,[148,3253,3254],{"class":569},"    next",[148,3256,356],{"class":1977},[148,3258,3259],{"class":2781},"false",[148,3261,809],{"class":1977},[148,3263,2759],{"class":162},[148,3265,3266],{"class":169}," \u002F\u002F Prevent navigation\n",[148,3268,3270,3273],{"class":150,"line":3269},53,[148,3271,3272],{"class":154},"    return",[148,3274,200],{"class":162},[148,3276,3278],{"class":150,"line":3277},54,[148,3279,233],{"class":162},[148,3281,3283,3286,3288],{"class":150,"line":3282},55,[148,3284,3285],{"class":569},"  next",[148,3287,2637],{"class":1977},[148,3289,200],{"class":162},[148,3291,3293,3295,3297],{"class":150,"line":3292},56,[148,3294,806],{"class":162},[148,3296,809],{"class":158},[148,3298,200],{"class":162},[148,3300,3302],{"class":150,"line":3301},57,[148,3303,239],{"emptyLinePlaceholder":10},[148,3305,3307],{"class":150,"line":3306},58,[148,3308,3309],{"class":169},"\u002F\u002F global store\n",[148,3311,3313,3315,3318,3320,3322,3325,3327,3329,3332,3334,3336],{"class":150,"line":3312},59,[148,3314,562],{"class":154},[148,3316,3317],{"class":2605}," const",[148,3319,2581],{"class":2627},[148,3321,2632],{"class":2631},[148,3323,3324],{"class":569}," defineStore",[148,3326,356],{"class":158},[148,3328,611],{"class":267},[148,3330,3331],{"class":607},"global",[148,3333,611],{"class":267},[148,3335,1812],{"class":162},[148,3337,184],{"class":162},[148,3339,3341,3344,3346,3348,3350,3352],{"class":150,"line":3340},60,[148,3342,3343],{"class":569},"  state",[148,3345,136],{"class":583},[148,3347,2656],{"class":162},[148,3349,2659],{"class":2605},[148,3351,2669],{"class":158},[148,3353,163],{"class":162},[148,3355,3357,3360,3362,3364],{"class":150,"line":3356},61,[148,3358,3359],{"class":579},"    isBackBtnPressed",[148,3361,136],{"class":583},[148,3363,2798],{"class":2781},[148,3365,614],{"class":162},[148,3367,3369,3371,3373],{"class":150,"line":3368},62,[148,3370,2898],{"class":162},[148,3372,809],{"class":158},[148,3374,614],{"class":162},[148,3376,3378,3380,3382],{"class":150,"line":3377},63,[148,3379,806],{"class":162},[148,3381,809],{"class":158},[148,3383,200],{"class":162},[42,3385,476],{"id":475},[473,3387,3389],{"id":3388},"_1-history-state-management","1. History State Management",[23,3391,3392],{},"The composable uses the History API to manage browser navigation. When mounted, it adds an initial state:",[138,3394,3396],{"className":2528,"code":3395,"language":2531,"meta":144,"style":144},"onMounted(() => {\n  history.pushState(null, \"\", window.location.pathname);\n  window.addEventListener(\"popstate\", handlePopState);\n});\n",[50,3397,3398,3411,3444,3469],{"__ignoreMap":144},[148,3399,3400,3403,3405,3407,3409],{"class":150,"line":151},[148,3401,3402],{"class":569},"onMounted",[148,3404,356],{"class":158},[148,3406,2637],{"class":162},[148,3408,2659],{"class":2605},[148,3410,184],{"class":162},[148,3412,3413,3416,3418,3420,3422,3424,3426,3428,3430,3432,3434,3436,3438,3440,3442],{"class":150,"line":166},[148,3414,3415],{"class":2672},"  history",[148,3417,1239],{"class":162},[148,3419,2697],{"class":569},[148,3421,356],{"class":1977},[148,3423,2702],{"class":176},[148,3425,1812],{"class":162},[148,3427,268],{"class":267},[148,3429,1812],{"class":162},[148,3431,2711],{"class":2672},[148,3433,1239],{"class":162},[148,3435,2717],{"class":2716},[148,3437,1239],{"class":162},[148,3439,2722],{"class":359},[148,3441,809],{"class":1977},[148,3443,200],{"class":162},[148,3445,3446,3449,3451,3453,3455,3457,3459,3461,3463,3465,3467],{"class":150,"line":173},[148,3447,3448],{"class":2672},"  window",[148,3450,1239],{"class":162},[148,3452,2875],{"class":569},[148,3454,356],{"class":1977},[148,3456,611],{"class":267},[148,3458,2882],{"class":607},[148,3460,611],{"class":267},[148,3462,1812],{"class":162},[148,3464,2651],{"class":2889},[148,3466,809],{"class":1977},[148,3468,200],{"class":162},[148,3470,3471,3473,3475],{"class":150,"line":187},[148,3472,806],{"class":162},[148,3474,809],{"class":158},[148,3476,200],{"class":162},[23,3478,3479],{},"This creates a \"buffer\" state that we can use to detect back button clicks.",[473,3481,3483],{"id":3482},"_2-scroll-position-management","2. Scroll Position Management",[23,3485,3486],{},"We implement smart scroll behavior:",[80,3488,3489,3492],{},[83,3490,3491],{},"Preserve scroll position when closing modals via back button",[83,3493,3494],{},"Allow normal scroll-to-top behavior for regular navigation",[138,3496,3498],{"className":2528,"code":3497,"language":2531,"meta":144,"style":144},"if (\"scrollRestoration\" in history) {\n  history.scrollRestoration = \"manual\";\n}\n",[50,3499,3500,3525,3544],{"__ignoreMap":144},[148,3501,3502,3505,3507,3509,3512,3514,3518,3521,3523],{"class":150,"line":151},[148,3503,3504],{"class":154},"if",[148,3506,2669],{"class":158},[148,3508,611],{"class":267},[148,3510,3511],{"class":607},"scrollRestoration",[148,3513,611],{"class":267},[148,3515,3517],{"class":3516},"sUnt3"," in",[148,3519,3520],{"class":2889}," history",[148,3522,2680],{"class":158},[148,3524,163],{"class":162},[148,3526,3527,3529,3531,3533,3535,3537,3540,3542],{"class":150,"line":166},[148,3528,3415],{"class":2672},[148,3530,1239],{"class":162},[148,3532,3511],{"class":359},[148,3534,2632],{"class":2631},[148,3536,604],{"class":267},[148,3538,3539],{"class":607},"manual",[148,3541,611],{"class":267},[148,3543,200],{"class":162},[148,3545,3546],{"class":150,"line":173},[148,3547,471],{"class":162},[473,3549,3551],{"id":3550},"_3-state-management-with-pinia","3. State Management with Pinia",[23,3553,3554],{},"We use a global store to track back button states:",[138,3556,3558],{"className":2528,"code":3557,"language":2531,"meta":144,"style":144},"export const useGlobalStore = defineStore(\"global\", {\n  state: () => ({\n    isBackBtnPressed: false,\n  }),\n});\n",[50,3559,3560,3584,3598,3608,3616],{"__ignoreMap":144},[148,3561,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580,3582],{"class":150,"line":151},[148,3563,562],{"class":154},[148,3565,3317],{"class":2605},[148,3567,2581],{"class":2627},[148,3569,2632],{"class":2631},[148,3571,3324],{"class":569},[148,3573,356],{"class":158},[148,3575,611],{"class":267},[148,3577,3331],{"class":607},[148,3579,611],{"class":267},[148,3581,1812],{"class":162},[148,3583,184],{"class":162},[148,3585,3586,3588,3590,3592,3594,3596],{"class":150,"line":166},[148,3587,3343],{"class":569},[148,3589,136],{"class":583},[148,3591,2656],{"class":162},[148,3593,2659],{"class":2605},[148,3595,2669],{"class":158},[148,3597,163],{"class":162},[148,3599,3600,3602,3604,3606],{"class":150,"line":173},[148,3601,3359],{"class":579},[148,3603,136],{"class":583},[148,3605,2798],{"class":2781},[148,3607,614],{"class":162},[148,3609,3610,3612,3614],{"class":150,"line":187},[148,3611,2898],{"class":162},[148,3613,809],{"class":158},[148,3615,614],{"class":162},[148,3617,3618,3620,3622],{"class":150,"line":203},[148,3619,806],{"class":162},[148,3621,809],{"class":158},[148,3623,200],{"class":162},[23,3625,3626],{},"This helps coordinate between the composable and router guards.",[473,3628,3630],{"id":3629},"_4-router-integration","4. Router Integration",[23,3632,3633],{},"The router guard prevents unwanted navigation:",[138,3635,3637],{"className":2528,"code":3636,"language":2531,"meta":144,"style":144},"router.beforeEach((to, from, next) => {\n  if (globals.isBackBtnPressed) {\n    globals.isBackBtnPressed = false;\n    next(false);\n    return;\n  }\n  next();\n});\n",[50,3638,3639,3667,3683,3697,3709,3715,3719,3727],{"__ignoreMap":144},[148,3640,3641,3643,3645,3647,3649,3651,3653,3655,3657,3659,3661,3663,3665],{"class":150,"line":151},[148,3642,3183],{"class":2672},[148,3644,1239],{"class":162},[148,3646,3188],{"class":569},[148,3648,356],{"class":158},[148,3650,356],{"class":162},[148,3652,3195],{"class":2614},[148,3654,1812],{"class":162},[148,3656,2564],{"class":2614},[148,3658,1812],{"class":162},[148,3660,3204],{"class":2614},[148,3662,809],{"class":162},[148,3664,2659],{"class":2605},[148,3666,184],{"class":162},[148,3668,3669,3671,3673,3675,3677,3679,3681],{"class":150,"line":166},[148,3670,3216],{"class":154},[148,3672,2669],{"class":1977},[148,3674,3221],{"class":2672},[148,3676,1239],{"class":162},[148,3678,2776],{"class":359},[148,3680,2680],{"class":1977},[148,3682,163],{"class":162},[148,3684,3685,3687,3689,3691,3693,3695],{"class":150,"line":173},[148,3686,3235],{"class":2672},[148,3688,1239],{"class":162},[148,3690,2776],{"class":359},[148,3692,2632],{"class":2631},[148,3694,2798],{"class":2781},[148,3696,200],{"class":162},[148,3698,3699,3701,3703,3705,3707],{"class":150,"line":187},[148,3700,3254],{"class":569},[148,3702,356],{"class":1977},[148,3704,3259],{"class":2781},[148,3706,809],{"class":1977},[148,3708,200],{"class":162},[148,3710,3711,3713],{"class":150,"line":203},[148,3712,3272],{"class":154},[148,3714,200],{"class":162},[148,3716,3717],{"class":150,"line":216},[148,3718,233],{"class":162},[148,3720,3721,3723,3725],{"class":150,"line":230},[148,3722,3285],{"class":569},[148,3724,2637],{"class":1977},[148,3726,200],{"class":162},[148,3728,3729,3731,3733],{"class":150,"line":236},[148,3730,806],{"class":162},[148,3732,809],{"class":158},[148,3734,200],{"class":162},[42,3736,3738],{"id":3737},"usage-examples","Usage Examples",[473,3740,3742],{"id":3741},"basic-modal-implementation","Basic Modal Implementation",[138,3744,3746],{"className":1386,"code":3745,"filename":1388,"language":1389,"meta":144,"style":144},"\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",[50,3747,3748,3756,3764,3794,3835,3843,3851,3855,3867,3888,3909,3913,3933,3945],{"__ignoreMap":144},[148,3749,3750,3752,3754],{"class":150,"line":151},[148,3751,1396],{"class":162},[148,3753,1399],{"class":579},[148,3755,1402],{"class":162},[148,3757,3758,3760,3762],{"class":150,"line":166},[148,3759,1407],{"class":162},[148,3761,1410],{"class":579},[148,3763,1402],{"class":162},[148,3765,3766,3768,3770,3773,3775,3777,3780,3782,3785,3788,3790,3792],{"class":150,"line":173},[148,3767,1436],{"class":162},[148,3769,1926],{"class":579},[148,3771,3772],{"class":1413}," @click",[148,3774,1417],{"class":162},[148,3776,611],{"class":267},[148,3778,3779],{"class":607},"showModal = true",[148,3781,611],{"class":267},[148,3783,3784],{"class":162},">",[148,3786,3787],{"class":158},"Open Modal",[148,3789,1603],{"class":162},[148,3791,1926],{"class":579},[148,3793,1402],{"class":162},[148,3795,3796,3798,3801,3804,3806,3808,3811,3813,3816,3818,3820,3822,3824,3826,3829,3831,3833],{"class":150,"line":187},[148,3797,1436],{"class":162},[148,3799,3800],{"class":579},"Modal",[148,3802,3803],{"class":1413}," v-if",[148,3805,1417],{"class":162},[148,3807,611],{"class":267},[148,3809,3810],{"class":607},"showModal",[148,3812,611],{"class":267},[148,3814,3815],{"class":1413}," v-model",[148,3817,1417],{"class":162},[148,3819,611],{"class":267},[148,3821,3810],{"class":607},[148,3823,611],{"class":267},[148,3825,3784],{"class":162},[148,3827,3828],{"class":158}," Content here ",[148,3830,1603],{"class":162},[148,3832,3800],{"class":579},[148,3834,1402],{"class":162},[148,3836,3837,3839,3841],{"class":150,"line":203},[148,3838,1594],{"class":162},[148,3840,1410],{"class":579},[148,3842,1402],{"class":162},[148,3844,3845,3847,3849],{"class":150,"line":216},[148,3846,1603],{"class":162},[148,3848,1399],{"class":579},[148,3850,1402],{"class":162},[148,3852,3853],{"class":150,"line":230},[148,3854,239],{"emptyLinePlaceholder":10},[148,3856,3857,3859,3862,3865],{"class":150,"line":236},[148,3858,1396],{"class":162},[148,3860,3861],{"class":579},"script",[148,3863,3864],{"class":1413}," setup",[148,3866,1402],{"class":162},[148,3868,3869,3871,3873,3876,3878,3880,3882,3884,3886],{"class":150,"line":242},[148,3870,2543],{"class":154},[148,3872,1958],{"class":162},[148,3874,3875],{"class":359}," ref",[148,3877,2561],{"class":162},[148,3879,2564],{"class":154},[148,3881,604],{"class":267},[148,3883,1389],{"class":607},[148,3885,611],{"class":267},[148,3887,200],{"class":162},[148,3889,3890,3892,3894,3896,3898,3900,3902,3905,3907],{"class":150,"line":259},[148,3891,2543],{"class":154},[148,3893,1958],{"class":162},[148,3895,2609],{"class":359},[148,3897,2561],{"class":162},[148,3899,2564],{"class":154},[148,3901,604],{"class":267},[148,3903,3904],{"class":607},"@\u002Fcomposables\u002FuseBackButton",[148,3906,611],{"class":267},[148,3908,200],{"class":162},[148,3910,3911],{"class":150,"line":273},[148,3912,239],{"emptyLinePlaceholder":10},[148,3914,3915,3918,3921,3923,3925,3927,3929,3931],{"class":150,"line":285},[148,3916,3917],{"class":2605},"const",[148,3919,3920],{"class":2627}," showModal",[148,3922,2632],{"class":2631},[148,3924,3875],{"class":569},[148,3926,356],{"class":158},[148,3928,3259],{"class":2781},[148,3930,809],{"class":158},[148,3932,200],{"class":162},[148,3934,3935,3937,3939,3941,3943],{"class":150,"line":297},[148,3936,2498],{"class":569},[148,3938,356],{"class":158},[148,3940,3810],{"class":2889},[148,3942,809],{"class":158},[148,3944,200],{"class":162},[148,3946,3947,3949,3951],{"class":150,"line":314},[148,3948,1603],{"class":162},[148,3950,3861],{"class":579},[148,3952,1402],{"class":162},[473,3954,3956],{"id":3955},"with-complex-dialog","With Complex Dialog",[549,3958,3959],{},[138,3960,3962],{"className":1386,"code":3961,"filename":1388,"language":1389,"meta":144,"style":144},"\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",[50,3963,3964,3972,3980,4008,4040,4055,4077,4082,4091,4100,4108,4116,4124,4128,4138,4158,4178,4182,4201,4216,4232,4247,4255,4259,4271],{"__ignoreMap":144},[148,3965,3966,3968,3970],{"class":150,"line":151},[148,3967,1396],{"class":162},[148,3969,1399],{"class":579},[148,3971,1402],{"class":162},[148,3973,3974,3976,3978],{"class":150,"line":166},[148,3975,1407],{"class":162},[148,3977,1410],{"class":579},[148,3979,1402],{"class":162},[148,3981,3982,3984,3986,3988,3990,3992,3995,3997,3999,4002,4004,4006],{"class":150,"line":173},[148,3983,1436],{"class":162},[148,3985,1926],{"class":579},[148,3987,3772],{"class":1413},[148,3989,1417],{"class":162},[148,3991,611],{"class":267},[148,3993,3994],{"class":607},"openDialog",[148,3996,611],{"class":267},[148,3998,3784],{"class":162},[148,4000,4001],{"class":158},"Open Complex Dialog",[148,4003,1603],{"class":162},[148,4005,1926],{"class":579},[148,4007,1402],{"class":162},[148,4009,4010,4012,4015,4017,4019,4021,4024,4026,4029,4031,4033,4036,4038],{"class":150,"line":187},[148,4011,1436],{"class":162},[148,4013,4014],{"class":579},"Dialog",[148,4016,3815],{"class":1413},[148,4018,1417],{"class":162},[148,4020,611],{"class":267},[148,4022,4023],{"class":607},"dialogVisible",[148,4025,611],{"class":267},[148,4027,4028],{"class":1413}," :options",[148,4030,1417],{"class":162},[148,4032,611],{"class":267},[148,4034,4035],{"class":607},"dialogOptions",[148,4037,611],{"class":267},[148,4039,1402],{"class":162},[148,4041,4042,4045,4047,4050,4053],{"class":150,"line":203},[148,4043,4044],{"class":162},"      \u003C",[148,4046,1399],{"class":579},[148,4048,4049],{"class":162}," #",[148,4051,4052],{"class":1413},"default",[148,4054,1402],{"class":162},[148,4056,4057,4060,4063,4066,4068,4070,4073,4075],{"class":150,"line":216},[148,4058,4059],{"class":162},"        \u003C",[148,4061,4062],{"class":579},"form",[148,4064,4065],{"class":1413}," @submit.prevent",[148,4067,1417],{"class":162},[148,4069,611],{"class":267},[148,4071,4072],{"class":607},"handleSubmit",[148,4074,611],{"class":267},[148,4076,1402],{"class":162},[148,4078,4079],{"class":150,"line":230},[148,4080,4081],{"class":169},"          \u003C!-- Form content -->\n",[148,4083,4084,4087,4089],{"class":150,"line":236},[148,4085,4086],{"class":162},"        \u003C\u002F",[148,4088,4062],{"class":579},[148,4090,1402],{"class":162},[148,4092,4093,4096,4098],{"class":150,"line":242},[148,4094,4095],{"class":162},"      \u003C\u002F",[148,4097,1399],{"class":579},[148,4099,1402],{"class":162},[148,4101,4102,4104,4106],{"class":150,"line":259},[148,4103,1473],{"class":162},[148,4105,4014],{"class":579},[148,4107,1402],{"class":162},[148,4109,4110,4112,4114],{"class":150,"line":273},[148,4111,1594],{"class":162},[148,4113,1410],{"class":579},[148,4115,1402],{"class":162},[148,4117,4118,4120,4122],{"class":150,"line":285},[148,4119,1603],{"class":162},[148,4121,1399],{"class":579},[148,4123,1402],{"class":162},[148,4125,4126],{"class":150,"line":297},[148,4127,239],{"emptyLinePlaceholder":10},[148,4129,4130,4132,4134,4136],{"class":150,"line":314},[148,4131,1396],{"class":162},[148,4133,3861],{"class":579},[148,4135,3864],{"class":1413},[148,4137,1402],{"class":162},[148,4139,4140,4142,4144,4146,4148,4150,4152,4154,4156],{"class":150,"line":330},[148,4141,2543],{"class":154},[148,4143,1958],{"class":162},[148,4145,3875],{"class":359},[148,4147,2561],{"class":162},[148,4149,2564],{"class":154},[148,4151,604],{"class":267},[148,4153,1389],{"class":607},[148,4155,611],{"class":267},[148,4157,200],{"class":162},[148,4159,4160,4162,4164,4166,4168,4170,4172,4174,4176],{"class":150,"line":344},[148,4161,2543],{"class":154},[148,4163,1958],{"class":162},[148,4165,2609],{"class":359},[148,4167,2561],{"class":162},[148,4169,2564],{"class":154},[148,4171,604],{"class":267},[148,4173,3904],{"class":607},[148,4175,611],{"class":267},[148,4177,200],{"class":162},[148,4179,4180],{"class":150,"line":366},[148,4181,239],{"emptyLinePlaceholder":10},[148,4183,4184,4186,4189,4191,4193,4195,4197,4199],{"class":150,"line":387},[148,4185,3917],{"class":2605},[148,4187,4188],{"class":2627}," dialogVisible",[148,4190,2632],{"class":2631},[148,4192,3875],{"class":569},[148,4194,356],{"class":158},[148,4196,3259],{"class":2781},[148,4198,809],{"class":158},[148,4200,200],{"class":162},[148,4202,4203,4205,4208,4210,4212,4214],{"class":150,"line":399},[148,4204,3917],{"class":2605},[148,4206,4207],{"class":2627}," dialogOptions",[148,4209,2632],{"class":2631},[148,4211,3875],{"class":569},[148,4213,356],{"class":158},[148,4215,163],{"class":162},[148,4217,4218,4221,4223,4225,4228,4230],{"class":150,"line":421},[148,4219,4220],{"class":579},"  title",[148,4222,136],{"class":583},[148,4224,604],{"class":267},[148,4226,4227],{"class":607},"Complex Form",[148,4229,611],{"class":267},[148,4231,614],{"class":162},[148,4233,4234,4236,4238,4240,4243,4245],{"class":150,"line":426},[148,4235,1744],{"class":579},[148,4237,136],{"class":583},[148,4239,604],{"class":267},[148,4241,4242],{"class":607},"600px",[148,4244,611],{"class":267},[148,4246,614],{"class":162},[148,4248,4249,4251,4253],{"class":150,"line":431},[148,4250,806],{"class":162},[148,4252,809],{"class":158},[148,4254,200],{"class":162},[148,4256,4257],{"class":150,"line":449},[148,4258,239],{"emptyLinePlaceholder":10},[148,4260,4261,4263,4265,4267,4269],{"class":150,"line":463},[148,4262,2498],{"class":569},[148,4264,356],{"class":158},[148,4266,4023],{"class":2889},[148,4268,809],{"class":158},[148,4270,200],{"class":162},[148,4272,4273,4275,4277],{"class":150,"line":468},[148,4274,1603],{"class":162},[148,4276,3861],{"class":579},[148,4278,1402],{"class":162},[42,4280,4282],{"id":4281},"edge-cases-and-solutions","Edge Cases and Solutions",[2348,4284,4285],{},[23,4286,4287],{},"It is important to handle edge cases such as double click, removing listener events & global state to ensure a smooth user experience.",[473,4289,4291],{"id":4290},"_1-double-back-click-handling","1. Double Back Click Handling",[23,4293,4294],{},"We handle rapid back button clicks by adding two history states:",[138,4296,4298],{"className":2528,"code":4297,"language":2531,"meta":144,"style":144},"history.pushState(null, \"\", window.location.pathname);\nhistory.pushState(null, \"\", window.location.pathname);\n",[50,4299,4300,4333],{"__ignoreMap":144},[148,4301,4302,4305,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331],{"class":150,"line":151},[148,4303,4304],{"class":2672},"history",[148,4306,1239],{"class":162},[148,4308,2697],{"class":569},[148,4310,356],{"class":158},[148,4312,2702],{"class":176},[148,4314,1812],{"class":162},[148,4316,268],{"class":267},[148,4318,1812],{"class":162},[148,4320,2711],{"class":2672},[148,4322,1239],{"class":162},[148,4324,2717],{"class":2716},[148,4326,1239],{"class":162},[148,4328,2722],{"class":359},[148,4330,809],{"class":158},[148,4332,200],{"class":162},[148,4334,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4363],{"class":150,"line":166},[148,4336,4304],{"class":2672},[148,4338,1239],{"class":162},[148,4340,2697],{"class":569},[148,4342,356],{"class":158},[148,4344,2702],{"class":176},[148,4346,1812],{"class":162},[148,4348,268],{"class":267},[148,4350,1812],{"class":162},[148,4352,2711],{"class":2672},[148,4354,1239],{"class":162},[148,4356,2717],{"class":2716},[148,4358,1239],{"class":162},[148,4360,2722],{"class":359},[148,4362,809],{"class":158},[148,4364,200],{"class":162},[473,4366,4368],{"id":4367},"_2-cleanup","2. Cleanup",[23,4370,4371],{},"Proper cleanup is essential to prevent memory leaks:",[138,4373,4375],{"className":2528,"code":4374,"language":2531,"meta":144,"style":144},"onUnmounted(() => {\n  if (\"scrollRestoration\" in history) {\n    history.scrollRestoration = \"auto\";\n  }\n  window.removeEventListener(\"popstate\", handlePopState);\n});\n",[50,4376,4377,4390,4410,4429,4433,4457],{"__ignoreMap":144},[148,4378,4379,4382,4384,4386,4388],{"class":150,"line":151},[148,4380,4381],{"class":569},"onUnmounted",[148,4383,356],{"class":158},[148,4385,2637],{"class":162},[148,4387,2659],{"class":2605},[148,4389,184],{"class":162},[148,4391,4392,4394,4396,4398,4400,4402,4404,4406,4408],{"class":150,"line":166},[148,4393,3216],{"class":154},[148,4395,2669],{"class":1977},[148,4397,611],{"class":267},[148,4399,3511],{"class":607},[148,4401,611],{"class":267},[148,4403,3517],{"class":3516},[148,4405,3520],{"class":2889},[148,4407,2680],{"class":1977},[148,4409,163],{"class":162},[148,4411,4412,4414,4416,4418,4420,4422,4425,4427],{"class":150,"line":173},[148,4413,2837],{"class":2672},[148,4415,1239],{"class":162},[148,4417,3511],{"class":359},[148,4419,2632],{"class":2631},[148,4421,604],{"class":267},[148,4423,4424],{"class":607},"auto",[148,4426,611],{"class":267},[148,4428,200],{"class":162},[148,4430,4431],{"class":150,"line":187},[148,4432,233],{"class":162},[148,4434,4435,4437,4439,4441,4443,4445,4447,4449,4451,4453,4455],{"class":150,"line":203},[148,4436,3448],{"class":2672},[148,4438,1239],{"class":162},[148,4440,2928],{"class":569},[148,4442,356],{"class":1977},[148,4444,611],{"class":267},[148,4446,2882],{"class":607},[148,4448,611],{"class":267},[148,4450,1812],{"class":162},[148,4452,2651],{"class":2889},[148,4454,809],{"class":1977},[148,4456,200],{"class":162},[148,4458,4459,4461,4463],{"class":150,"line":216},[148,4460,806],{"class":162},[148,4462,809],{"class":158},[148,4464,200],{"class":162},[473,4466,4468],{"id":4467},"_3-timing-issues","3. Timing Issues",[23,4470,4471],{},"We use small timeouts to ensure proper state management:",[138,4473,4475],{"className":2528,"code":4474,"language":2531,"meta":144,"style":144},"setTimeout(() => {\n  globalStore.isBackBtnPressed = false;\n}, 100);\n",[50,4476,4477,4490,4505],{"__ignoreMap":144},[148,4478,4479,4482,4484,4486,4488],{"class":150,"line":151},[148,4480,4481],{"class":569},"setTimeout",[148,4483,356],{"class":158},[148,4485,2637],{"class":162},[148,4487,2659],{"class":2605},[148,4489,184],{"class":162},[148,4491,4492,4495,4497,4499,4501,4503],{"class":150,"line":166},[148,4493,4494],{"class":2672},"  globalStore",[148,4496,1239],{"class":162},[148,4498,2776],{"class":359},[148,4500,2632],{"class":2631},[148,4502,2798],{"class":2781},[148,4504,200],{"class":162},[148,4506,4507,4510,4512,4514],{"class":150,"line":173},[148,4508,4509],{"class":162},"},",[148,4511,322],{"class":224},[148,4513,809],{"class":158},[148,4515,200],{"class":162},[42,4517,4519],{"id":4518},"best-practices","Best Practices",[100,4521,4522,4528,4534,4540],{},[83,4523,4524,4527],{},[29,4525,4526],{},"Always Use Refs","\nPass reactive refs to the composable for reliable state management.",[83,4529,4530,4533],{},[29,4531,4532],{},"Router Guard Integration","\nImplement the router guard to ensure consistent navigation behavior.",[83,4535,4536,4539],{},[29,4537,4538],{},"Clean Unmounting","\nThe composable handles its own cleanup, but ensure parent components handle their state properly.",[83,4541,4542,4545,4546],{},[29,4543,4544],{},"Testing","\nTest various scenarios:",[80,4547,4548,4551,4554],{},[83,4549,4550],{},"Rapid back button clicks",[83,4552,4553],{},"Modal opening\u002Fclosing sequences",[83,4555,4556],{},"Navigation during modal open states",[42,4558,2366],{"id":2365},[23,4560,533,4561,4563],{},[50,4562,2498],{}," 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.",[23,4565,4566],{},"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.",[23,4568,4569],{},"Remember to:",[80,4571,4572,4575,4578,4581],{},[83,4573,4574],{},"Test thoroughly in your specific use case",[83,4576,4577],{},"Consider edge cases specific to your application",[83,4579,4580],{},"Maintain proper state management",[83,4582,4583],{},"Handle cleanup appropriately",[23,4585,4586],{},"With these considerations in mind, you'll have a reliable solution for handling browser navigation in your Vue 3 applications.",[42,4588,2408],{"id":2407},[2410,4590,4591],{},"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":144,"searchDepth":166,"depth":166,"links":4593},[4594,4595,4598,4604,4608,4613,4614,4615],{"id":44,"depth":166,"text":45},{"id":2491,"depth":166,"text":2492,"children":4596},[4597],{"id":2522,"depth":173,"text":2523},{"id":475,"depth":166,"text":476,"children":4599},[4600,4601,4602,4603],{"id":3388,"depth":173,"text":3389},{"id":3482,"depth":173,"text":3483},{"id":3550,"depth":173,"text":3551},{"id":3629,"depth":173,"text":3630},{"id":3737,"depth":166,"text":3738,"children":4605},[4606,4607],{"id":3741,"depth":173,"text":3742},{"id":3955,"depth":173,"text":3956},{"id":4281,"depth":166,"text":4282,"children":4609},[4610,4611,4612],{"id":4290,"depth":173,"text":4291},{"id":4367,"depth":173,"text":4368},{"id":4467,"depth":173,"text":4468},{"id":4518,"depth":166,"text":4519},{"id":2365,"depth":166,"text":2366},{"id":2407,"depth":166,"text":2408},"2024-12-02",{"slug":4618,"difficulty":2437,"featured":2433,"icon":1389,"ogImage":4619,"tags":4621,"topic":1389},"remote-back-button-js",{"alt":4620},"remote back button function",[1389,4622,2443],"composable","\u002Farticles\u002Fremote-back-button-js",{"title":2450,"description":2455},"articles\u002Fremote-back-button-js","c9McQgPfIrLnWtQfO9BV7b7nDG5cwoJisMDonjUVoWc",1778820753374]