[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"term-v\u002Fvue":3,"related-v\u002Fvue":239},{"id":4,"title":5,"acronym":6,"body":7,"category":220,"description":221,"difficulty":222,"extension":223,"letter":224,"meta":225,"navigation":137,"path":226,"related":227,"seo":233,"sitemap":234,"stem":237,"subcategory":6,"__hash__":238},"terms\u002Fterms\u002Fv\u002Fvue.md","Vue",null,{"type":8,"value":9,"toc":214},"minimark",[10,15,19,23,26,30,203,207,210],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home. You write components with templates, reactive data, and logic, and Vue handles keeping everything in sync automatically.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Vue is a progressive JavaScript framework for building user interfaces, created by Evan You. It uses an HTML-template-based component model with a fine-grained reactivity system. Vue 3 introduced the Composition API (composables), script setup syntax, and a Proxy-based reactivity engine.",[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-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { ref } from 'vue';\nconst greeting = ref('Hello, vibe!');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ greeting }}\u003C\u002Fh1>\n  \u003Cinput v-model=\"greeting\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,92,122,132,139,149,170,194],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","script",[41,54,56],{"class":55},"spNyl"," setup",[41,58,59],{"class":47},">\n",[41,61,63,67,70,74,77,80,83,86,89],{"class":43,"line":62},2,[41,64,66],{"class":65},"s7zQu","import",[41,68,69],{"class":47}," {",[41,71,73],{"class":72},"sTEyZ"," ref",[41,75,76],{"class":47}," }",[41,78,79],{"class":65}," from",[41,81,82],{"class":47}," '",[41,84,35],{"class":85},"sfazB",[41,87,88],{"class":47},"'",[41,90,91],{"class":47},";\n",[41,93,95,98,101,104,107,110,112,115,117,120],{"class":43,"line":94},3,[41,96,97],{"class":55},"const",[41,99,100],{"class":72}," greeting ",[41,102,103],{"class":47},"=",[41,105,73],{"class":106},"s2Zo4",[41,108,109],{"class":72},"(",[41,111,88],{"class":47},[41,113,114],{"class":85},"Hello, vibe!",[41,116,88],{"class":47},[41,118,119],{"class":72},")",[41,121,91],{"class":47},[41,123,125,128,130],{"class":43,"line":124},4,[41,126,127],{"class":47},"\u003C\u002F",[41,129,52],{"class":51},[41,131,59],{"class":47},[41,133,135],{"class":43,"line":134},5,[41,136,138],{"emptyLinePlaceholder":137},true,"\n",[41,140,142,144,147],{"class":43,"line":141},6,[41,143,48],{"class":47},[41,145,146],{"class":51},"template",[41,148,59],{"class":47},[41,150,152,155,158,161,164,166,168],{"class":43,"line":151},7,[41,153,154],{"class":47},"  \u003C",[41,156,157],{"class":51},"h1",[41,159,160],{"class":47},">",[41,162,163],{"class":72},"{{ greeting }}",[41,165,127],{"class":47},[41,167,157],{"class":51},[41,169,59],{"class":47},[41,171,173,175,178,181,183,186,189,191],{"class":43,"line":172},8,[41,174,154],{"class":47},[41,176,177],{"class":51},"input",[41,179,180],{"class":55}," v-model",[41,182,103],{"class":47},[41,184,185],{"class":47},"\"",[41,187,188],{"class":85},"greeting",[41,190,185],{"class":47},[41,192,193],{"class":47}," \u002F>\n",[41,195,197,199,201],{"class":43,"line":196},9,[41,198,127],{"class":47},[41,200,146],{"class":51},[41,202,59],{"class":47},[11,204,206],{"id":205},"when-youll-hear-this","When You'll Hear This",[16,208,209],{},"\"We use Vue 3 with the Composition API and Pinia for state.\" \u002F \"Vue's learning curve is gentler than React for HTML\u002FCSS developers.\"",[211,212,213],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":62,"depth":62,"links":215},[216,217,218,219],{"id":13,"depth":62,"text":14},{"id":21,"depth":62,"text":22},{"id":28,"depth":62,"text":29},{"id":205,"depth":62,"text":206},"frontend","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.","beginner","md","v",{},"\u002Fterms\u002Fv\u002Fvue",[228,229,230,231,232],"Nuxt","Composable","Reactive","Directive","Component",{"title":5,"description":221},{"changefreq":235,"priority":236},"weekly",0.7,"terms\u002Fv\u002Fvue","FCEZUJBqCMgBq7KyixpXQrjEeIrmAZn-u5ABHeRldlk",[240,243,247,250,253],{"title":232,"path":241,"acronym":6,"category":220,"difficulty":222,"description":242},"\u002Fterms\u002Fc\u002Fcomponent","A component is a self-contained LEGO brick for your UI.",{"title":229,"path":244,"acronym":6,"category":220,"difficulty":245,"description":246},"\u002Fterms\u002Fc\u002Fcomposable","intermediate","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.",{"title":231,"path":248,"acronym":6,"category":220,"difficulty":245,"description":249},"\u002Fterms\u002Fd\u002Fdirective","Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.",{"title":228,"path":251,"acronym":6,"category":220,"difficulty":245,"description":252},"\u002Fterms\u002Fn\u002Fnuxt","Nuxt is Vue on steroids. It's a meta-framework that adds SSR, SSG, file-based routing, auto-imports, and a full deployment pipeline on top of Vue.",{"title":230,"path":254,"acronym":6,"category":220,"difficulty":245,"description":255},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",1776518323312]