[{"data":1,"prerenderedAt":342},["ShallowReactive",2],{"term-c\u002Fcomposable":3,"related-c\u002Fcomposable":325},{"id":4,"title":5,"acronym":6,"body":7,"category":306,"description":307,"difficulty":308,"extension":309,"letter":310,"meta":311,"navigation":88,"path":312,"related":313,"seo":319,"sitemap":320,"stem":323,"subcategory":6,"__hash__":324},"terms\u002Fterms\u002Fc\u002Fcomposable.md","Composable",null,{"type":8,"value":9,"toc":300},"minimark",[10,15,19,23,26,30,289,293,296],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together. Instead of copying the same fetch logic into 10 components, you write one useFetch composable and share it everywhere. Work smarter, not harder.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Composables are functions in Vue's Composition API that encapsulate and reuse stateful logic. They leverage Vue's reactivity system (ref, computed, watch) and lifecycle hooks. By convention they start with 'use'. Equivalent to React's custom hooks.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F composables\u002FuseFetch.js\nimport { ref } from 'vue';\n\nexport function useFetch(url) {\n  const data = ref(null);\n  const loading = ref(true);\n\n  fetch(url)\n    .then(r => r.json())\n    .then(d => { data.value = d; loading.value = false; });\n\n  return { data, loading };\n}\n","javascript","",[38,39,40,49,83,90,117,141,163,168,181,210,260,265,283],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F composables\u002FuseFetch.js\n",[41,50,52,56,60,64,67,70,73,77,80],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," ref",[41,65,66],{"class":58}," }",[41,68,69],{"class":54}," from",[41,71,72],{"class":58}," '",[41,74,76],{"class":75},"sfazB","vue",[41,78,79],{"class":58},"'",[41,81,82],{"class":58},";\n",[41,84,86],{"class":43,"line":85},3,[41,87,89],{"emptyLinePlaceholder":88},true,"\n",[41,91,93,96,100,104,107,111,114],{"class":43,"line":92},4,[41,94,95],{"class":54},"export",[41,97,99],{"class":98},"spNyl"," function",[41,101,103],{"class":102},"s2Zo4"," useFetch",[41,105,106],{"class":58},"(",[41,108,110],{"class":109},"sHdIc","url",[41,112,113],{"class":58},")",[41,115,116],{"class":58}," {\n",[41,118,120,123,126,129,131,134,137,139],{"class":43,"line":119},5,[41,121,122],{"class":98},"  const",[41,124,125],{"class":62}," data",[41,127,128],{"class":58}," =",[41,130,63],{"class":102},[41,132,106],{"class":133},"swJcz",[41,135,136],{"class":58},"null",[41,138,113],{"class":133},[41,140,82],{"class":58},[41,142,144,146,149,151,153,155,159,161],{"class":43,"line":143},6,[41,145,122],{"class":98},[41,147,148],{"class":62}," loading",[41,150,128],{"class":58},[41,152,63],{"class":102},[41,154,106],{"class":133},[41,156,158],{"class":157},"sfNiH","true",[41,160,113],{"class":133},[41,162,82],{"class":58},[41,164,166],{"class":43,"line":165},7,[41,167,89],{"emptyLinePlaceholder":88},[41,169,171,174,176,178],{"class":43,"line":170},8,[41,172,173],{"class":102},"  fetch",[41,175,106],{"class":133},[41,177,110],{"class":62},[41,179,180],{"class":133},")\n",[41,182,184,187,190,192,195,198,201,204,207],{"class":43,"line":183},9,[41,185,186],{"class":58},"    .",[41,188,189],{"class":102},"then",[41,191,106],{"class":133},[41,193,194],{"class":109},"r",[41,196,197],{"class":98}," =>",[41,199,200],{"class":62}," r",[41,202,203],{"class":58},".",[41,205,206],{"class":102},"json",[41,208,209],{"class":133},"())\n",[41,211,213,215,217,219,222,224,226,228,230,233,235,238,241,243,245,247,249,252,254,256,258],{"class":43,"line":212},10,[41,214,186],{"class":58},[41,216,189],{"class":102},[41,218,106],{"class":133},[41,220,221],{"class":109},"d",[41,223,197],{"class":98},[41,225,59],{"class":58},[41,227,125],{"class":62},[41,229,203],{"class":58},[41,231,232],{"class":62},"value",[41,234,128],{"class":58},[41,236,237],{"class":62}," d",[41,239,240],{"class":58},";",[41,242,148],{"class":62},[41,244,203],{"class":58},[41,246,232],{"class":62},[41,248,128],{"class":58},[41,250,251],{"class":157}," false",[41,253,240],{"class":58},[41,255,66],{"class":58},[41,257,113],{"class":133},[41,259,82],{"class":58},[41,261,263],{"class":43,"line":262},11,[41,264,89],{"emptyLinePlaceholder":88},[41,266,268,271,273,275,278,280],{"class":43,"line":267},12,[41,269,270],{"class":54},"  return",[41,272,59],{"class":58},[41,274,125],{"class":62},[41,276,277],{"class":58},",",[41,279,148],{"class":62},[41,281,282],{"class":58}," };\n",[41,284,286],{"class":43,"line":285},13,[41,287,288],{"class":58},"}\n",[11,290,292],{"id":291},"when-youll-hear-this","When You'll Hear This",[16,294,295],{},"\"Extract the auth logic into a useAuth composable.\" \u002F \"Composables are the Composition API equivalent of mixins but without the naming collision hell.\"",[297,298,299],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .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);}",{"title":36,"searchDepth":51,"depth":51,"links":301},[302,303,304,305],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":291,"depth":51,"text":292},"frontend","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.","intermediate","md","c",{},"\u002Fterms\u002Fc\u002Fcomposable",[314,315,316,317,318],"Hook","Vue","Reactive","Reactivity","State",{"title":5,"description":307},{"changefreq":321,"priority":322},"weekly",0.7,"terms\u002Fc\u002Fcomposable","mZycJ5yTgzz-6jOT3zmYR7G8uPJ7_nHm6pfHB51tYw0",[326,329,332,335,339],{"title":314,"path":327,"acronym":6,"category":306,"difficulty":308,"description":328},"\u002Fterms\u002Fh\u002Fhook","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.",{"title":316,"path":330,"acronym":6,"category":306,"difficulty":308,"description":331},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",{"title":317,"path":333,"acronym":6,"category":306,"difficulty":308,"description":334},"\u002Fterms\u002Fr\u002Freactivity","Reactivity is the system that makes your UI automatically keep up with your data.",{"title":318,"path":336,"acronym":6,"category":306,"difficulty":337,"description":338},"\u002Fterms\u002Fs\u002Fstate","beginner","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",{"title":315,"path":340,"acronym":6,"category":306,"difficulty":337,"description":341},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518268065]