[{"data":1,"prerenderedAt":403},["ShallowReactive",2],{"snippet-\u002Fsnippets\u002Fmediaquery-hook":3},{"id":4,"title":5,"body":6,"description":393,"draft":394,"extension":395,"lastModified":396,"meta":397,"navigation":47,"path":398,"seo":399,"stem":400,"tags":401,"__hash__":402},"snippets\u002Fsnippets\u002Fmediaquery-hook.md","MediaQuery Change Composition Hook",{"type":7,"value":8,"toc":390},"minimark",[9,292,297,386],[10,11,16],"pre",{"className":12,"code":13,"language":14,"meta":15,"style":15},"language-ts shiki shiki-themes github-dark","import { onMounted, onUnmounted } from \"vue\";\n\nexport const useMediaQueryListener = (\n  mediaQuery: string,\n  callback: (matches: boolean) => void\n) => {\n  function handleMediaQueryListChange(e: MediaQueryListEvent) {\n    callback(e.matches);\n  }\n\n  let mediaQueryList: MediaQueryList;\n\n  onMounted(() => {\n    mediaQueryList = window.matchMedia(mediaQuery);\n    callback(mediaQueryList.matches);\n    mediaQueryList.addEventListener(\"change\", handleMediaQueryListChange);\n  });\n\n  onUnmounted(() => {\n    mediaQueryList?.removeEventListener(\"change\", handleMediaQueryListChange);\n  });\n};\n","ts","",[17,18,19,42,49,68,85,113,123,146,155,161,166,182,187,200,218,226,243,249,254,266,281,286],"code",{"__ignoreMap":15},[20,21,24,28,32,35,39],"span",{"class":22,"line":23},"line",1,[20,25,27],{"class":26},"snl16","import",[20,29,31],{"class":30},"s95oV"," { onMounted, onUnmounted } ",[20,33,34],{"class":26},"from",[20,36,38],{"class":37},"sU2Wk"," \"vue\"",[20,40,41],{"class":30},";\n",[20,43,45],{"class":22,"line":44},2,[20,46,48],{"emptyLinePlaceholder":47},true,"\n",[20,50,52,55,58,62,65],{"class":22,"line":51},3,[20,53,54],{"class":26},"export",[20,56,57],{"class":26}," const",[20,59,61],{"class":60},"svObZ"," useMediaQueryListener",[20,63,64],{"class":26}," =",[20,66,67],{"class":30}," (\n",[20,69,71,75,78,82],{"class":22,"line":70},4,[20,72,74],{"class":73},"s9osk","  mediaQuery",[20,76,77],{"class":26},":",[20,79,81],{"class":80},"sDLfK"," string",[20,83,84],{"class":30},",\n",[20,86,88,91,93,96,99,101,104,107,110],{"class":22,"line":87},5,[20,89,90],{"class":60},"  callback",[20,92,77],{"class":26},[20,94,95],{"class":30}," (",[20,97,98],{"class":73},"matches",[20,100,77],{"class":26},[20,102,103],{"class":80}," boolean",[20,105,106],{"class":30},") ",[20,108,109],{"class":26},"=>",[20,111,112],{"class":80}," void\n",[20,114,116,118,120],{"class":22,"line":115},6,[20,117,106],{"class":30},[20,119,109],{"class":26},[20,121,122],{"class":30}," {\n",[20,124,126,129,132,135,138,140,143],{"class":22,"line":125},7,[20,127,128],{"class":26},"  function",[20,130,131],{"class":60}," handleMediaQueryListChange",[20,133,134],{"class":30},"(",[20,136,137],{"class":73},"e",[20,139,77],{"class":26},[20,141,142],{"class":60}," MediaQueryListEvent",[20,144,145],{"class":30},") {\n",[20,147,149,152],{"class":22,"line":148},8,[20,150,151],{"class":60},"    callback",[20,153,154],{"class":30},"(e.matches);\n",[20,156,158],{"class":22,"line":157},9,[20,159,160],{"class":30},"  }\n",[20,162,164],{"class":22,"line":163},10,[20,165,48],{"emptyLinePlaceholder":47},[20,167,169,172,175,177,180],{"class":22,"line":168},11,[20,170,171],{"class":26},"  let",[20,173,174],{"class":30}," mediaQueryList",[20,176,77],{"class":26},[20,178,179],{"class":60}," MediaQueryList",[20,181,41],{"class":30},[20,183,185],{"class":22,"line":184},12,[20,186,48],{"emptyLinePlaceholder":47},[20,188,190,193,196,198],{"class":22,"line":189},13,[20,191,192],{"class":60},"  onMounted",[20,194,195],{"class":30},"(() ",[20,197,109],{"class":26},[20,199,122],{"class":30},[20,201,203,206,209,212,215],{"class":22,"line":202},14,[20,204,205],{"class":30},"    mediaQueryList ",[20,207,208],{"class":26},"=",[20,210,211],{"class":30}," window.",[20,213,214],{"class":60},"matchMedia",[20,216,217],{"class":30},"(mediaQuery);\n",[20,219,221,223],{"class":22,"line":220},15,[20,222,151],{"class":60},[20,224,225],{"class":30},"(mediaQueryList.matches);\n",[20,227,229,232,235,237,240],{"class":22,"line":228},16,[20,230,231],{"class":30},"    mediaQueryList.",[20,233,234],{"class":60},"addEventListener",[20,236,134],{"class":30},[20,238,239],{"class":37},"\"change\"",[20,241,242],{"class":30},", handleMediaQueryListChange);\n",[20,244,246],{"class":22,"line":245},17,[20,247,248],{"class":30},"  });\n",[20,250,252],{"class":22,"line":251},18,[20,253,48],{"emptyLinePlaceholder":47},[20,255,257,260,262,264],{"class":22,"line":256},19,[20,258,259],{"class":60},"  onUnmounted",[20,261,195],{"class":30},[20,263,109],{"class":26},[20,265,122],{"class":30},[20,267,269,272,275,277,279],{"class":22,"line":268},20,[20,270,271],{"class":30},"    mediaQueryList?.",[20,273,274],{"class":60},"removeEventListener",[20,276,134],{"class":30},[20,278,239],{"class":37},[20,280,242],{"class":30},[20,282,284],{"class":22,"line":283},21,[20,285,248],{"class":30},[20,287,289],{"class":22,"line":288},22,[20,290,291],{"class":30},"};\n",[293,294,296],"h2",{"id":295},"usage","Usage",[10,298,302],{"className":299,"code":300,"language":301,"meta":15,"style":15},"language-vue shiki shiki-themes github-dark","\u003Cscript setup lang=\"ts\">\nimport { useMediaQueryListener } from \"..\";\n\nuseMediaQueryListener(\"(min-width: 1024px)\", (matches) => {\n  \u002F\u002F Do stuff when matches is true\n});\n\u003C\u002Fscript>\n","vue",[17,303,304,327,341,345,366,372,377],{"__ignoreMap":15},[20,305,306,309,313,316,319,321,324],{"class":22,"line":23},[20,307,308],{"class":30},"\u003C",[20,310,312],{"class":311},"s4JwU","script",[20,314,315],{"class":60}," setup",[20,317,318],{"class":60}," lang",[20,320,208],{"class":30},[20,322,323],{"class":37},"\"ts\"",[20,325,326],{"class":30},">\n",[20,328,329,331,334,336,339],{"class":22,"line":44},[20,330,27],{"class":26},[20,332,333],{"class":30}," { useMediaQueryListener } ",[20,335,34],{"class":26},[20,337,338],{"class":37}," \"..\"",[20,340,41],{"class":30},[20,342,343],{"class":22,"line":51},[20,344,48],{"emptyLinePlaceholder":47},[20,346,347,350,352,355,358,360,362,364],{"class":22,"line":70},[20,348,349],{"class":60},"useMediaQueryListener",[20,351,134],{"class":30},[20,353,354],{"class":37},"\"(min-width: 1024px)\"",[20,356,357],{"class":30},", (",[20,359,98],{"class":73},[20,361,106],{"class":30},[20,363,109],{"class":26},[20,365,122],{"class":30},[20,367,368],{"class":22,"line":87},[20,369,371],{"class":370},"sAwPA","  \u002F\u002F Do stuff when matches is true\n",[20,373,374],{"class":22,"line":115},[20,375,376],{"class":30},"});\n",[20,378,379,382,384],{"class":22,"line":125},[20,380,381],{"class":30},"\u003C\u002F",[20,383,312],{"class":311},[20,385,326],{"class":30},[387,388,389],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":15,"searchDepth":44,"depth":44,"links":391},[392],{"id":295,"depth":44,"text":296},"A Vue composition hook that watches a media query and calls back on every change. It sets up matchMedia on mount and drops the listener on unmount, typed in TypeScript.",false,"md","2026-08-29T17:42:32+07:00",{},"\u002Fsnippets\u002Fmediaquery-hook",{"title":5,"description":393},"snippets\u002Fmediaquery-hook","vue, typescript","KQSGd-4pUsEJ_1pPlPLqLe1a1yBZGm3JCt7uGJms0Vo",1788101292507]