[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"content:legacy:page:\u002Fcheatsheets\u002Fvue":3,"content:legacy:navigation":249,"content:legacy:surround:\u002Fcheatsheets\u002Fvue":534},{"id":4,"title":5,"body":6,"description":236,"extension":237,"icon":238,"meta":239,"modifiedAt":240,"navigation":241,"path":242,"publishedAt":243,"seo":244,"sitemap":245,"stem":247,"updatedAt":246,"__hash__":248},"cheatsheets\u002Fcheatsheets\u002Fvue.md","Vue",{"type":7,"value":8,"toc":231},"minimark",[9,14,21,62,66,98,102,105,157,160,189,192,228],[10,11,13],"h2",{"id":12},"installation","Installation",[15,16,17],"p",{},[18,19,20],"em",{},"Requires NPM\u002FYarn for using without CDN",[22,23,24,37],"table",{},[25,26,27],"thead",{},[28,29,30,34],"tr",{},[31,32,33],"th",{},"Command",[31,35,36],{},"Description",[38,39,40,52],"tbody",{},[28,41,42,49],{},[43,44,45],"td",{},[46,47,48],"code",{},"npm install -g @vue\u002Fcli",[43,50,51],{},"Install VueJS through NPM",[28,53,54,59],{},[43,55,56],{},[46,57,58],{},"yarn global add @vue\u002Fcli",[43,60,61],{},"Install VueJS through Yarn",[10,63,65],{"id":64},"creating-a-project","Creating a Project",[22,67,68,76],{},[25,69,70],{},[28,71,72,74],{},[31,73,33],{},[31,75,36],{},[38,77,78,88],{},[28,79,80,85],{},[43,81,82],{},[46,83,84],{},"vue create \u003Cproject-name>",[43,86,87],{},"Creates and initializes the project with chosen features",[28,89,90,95],{},[43,91,92],{},[46,93,94],{},"vue ui",[43,96,97],{},"Opens a GUI in the browser. Recommended if not comfortable with CLI",[10,99,101],{"id":100},"vue-template-syntax","Vue Template Syntax",[15,103,104],{},"The Vue app is broken into 3 main components:",[106,107,108],"ul",{},[109,110,111,115,116],"li",{},[112,113,114],"strong",{},"Template (HTML)",":\n",[117,118,123],"pre",{"className":119,"code":120,"language":121,"meta":122,"style":122},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n    HTML goes here\n\u003C\u002Ftemplate>\n","html","",[46,124,125,141,147],{"__ignoreMap":122},[126,127,130,134,138],"span",{"class":128,"line":129},"line",1,[126,131,133],{"class":132},"sVt8B","\u003C",[126,135,137],{"class":136},"s9eBZ","template",[126,139,140],{"class":132},">\n",[126,142,144],{"class":128,"line":143},2,[126,145,146],{"class":132},"    HTML goes here\n",[126,148,150,153,155],{"class":128,"line":149},3,[126,151,152],{"class":132},"\u003C\u002F",[126,154,137],{"class":136},[126,156,140],{"class":132},[15,158,159],{},"JavaScript:",[117,161,165],{"className":162,"code":163,"language":164,"meta":122,"style":122},"language-js shiki shiki-themes github-light github-dark","\u003Cscript>\n    JavaScript related things and Vue APIs\n\u003C\u002Fscript>\n","js",[46,166,167,176,181],{"__ignoreMap":122},[126,168,169,171,174],{"class":128,"line":129},[126,170,133],{"class":132},[126,172,173],{"class":136},"script",[126,175,140],{"class":132},[126,177,178],{"class":128,"line":143},[126,179,180],{"class":132},"    JavaScript related things and Vue APIs\n",[126,182,183,185,187],{"class":128,"line":149},[126,184,152],{"class":132},[126,186,173],{"class":136},[126,188,140],{"class":132},[15,190,191],{},"Styling (CSS):",[117,193,197],{"className":194,"code":195,"language":196,"meta":122,"style":122},"language-css shiki shiki-themes github-light github-dark","\u003Cstyle>\n    CSS goes here\n\u003C\u002Fstyle>\n```css\n","css",[46,198,199,209,214,222],{"__ignoreMap":122},[126,200,201,203,206],{"class":128,"line":129},[126,202,133],{"class":132},[126,204,205],{"class":136},"style",[126,207,140],{"class":208},"szBVR",[126,210,211],{"class":128,"line":143},[126,212,213],{"class":132},"    CSS goes here\n",[126,215,216,218,220],{"class":128,"line":149},[126,217,152],{"class":132},[126,219,205],{"class":136},[126,221,140],{"class":208},[126,223,225],{"class":128,"line":224},4,[126,226,227],{"class":132},"```css\n",[205,229,230],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":122,"searchDepth":143,"depth":143,"links":232},[233,234,235],{"id":12,"depth":143,"text":13},{"id":64,"depth":143,"text":65},{"id":100,"depth":143,"text":101},"A comprehensive guide to Vue.js framework.","md","material-icon-theme:vue",{},null,true,"\u002Fcheatsheets\u002Fvue","2025-07-27",{"title":5,"description":236},{"loc":242,"lastmod":246},"2025-08-25T11:45:43+07:00","cheatsheets\u002Fvue","u3FqCsrFy8TXtsC4gd4aTfjDNOD0p4MkUiYeaO6jgxs",[250,401,505,526],{"title":251,"icon":252,"path":253,"stem":254,"children":255,"page":266},"Posts","fluent-color:data-bar-vertical-ascending-24","\u002Fposts","posts",[256,267,285,311,321,335,345,355,365,391],{"title":257,"icon":258,"redirect":259,"path":260,"stem":261,"children":262,"page":266},"Database","material-icon-theme:database","\u002Fposts\u002Fdatabase\u002Freplication-strategy","\u002Fposts\u002Fdatabase","posts\u002Fdatabase",[263],{"title":264,"path":259,"stem":265,"icon":240},"Database Replication strategy in large systems","posts\u002Fdatabase\u002Freplication-strategy",false,{"title":268,"icon":269,"redirect":270,"path":271,"stem":272,"children":273,"page":266},"Docker","vscode-icons:file-type-docker2","\u002Fposts\u002Fdocker\u002Fdocker-commands","\u002Fposts\u002Fdocker","posts\u002Fdocker",[274,277,281],{"title":275,"path":270,"stem":276,"icon":240},"Docker commands essentials","posts\u002Fdocker\u002Fdocker-commands",{"title":278,"path":279,"stem":280,"icon":240},"Some useful Dockerfile templates","\u002Fposts\u002Fdocker\u002Fdockerfile-templates","posts\u002Fdocker\u002Fdockerfile-templates",{"title":282,"path":283,"stem":284,"icon":240},"Setup Docker environment on Windows","\u002Fposts\u002Fdocker\u002Fsetup-docker-on-window","posts\u002Fdocker\u002Fsetup-docker-on-window",{"title":286,"icon":287,"redirect":288,"path":289,"stem":290,"children":291,"page":266},"Git & GitHub","material-icon-theme:git","\u002Fposts\u002Fgit\u002Fbrightly-decorate-graph","\u002Fposts\u002Fgit","posts\u002Fgit",[292,295,299,303,307],{"title":293,"path":288,"stem":294,"icon":240},"Brightly decorate your GitHub Graph","posts\u002Fgit\u002Fbrightly-decorate-graph",{"title":296,"path":297,"stem":298,"icon":240},"Download a specific folder on GitHub repository","\u002Fposts\u002Fgit\u002Fdownload-specific-folder","posts\u002Fgit\u002Fdownload-specific-folder",{"title":300,"path":301,"stem":302,"icon":240},"Syncing Git Tags across to other repositories","\u002Fposts\u002Fgit\u002Fsyncing-tags-across-repositories","posts\u002Fgit\u002Fsyncing-tags-across-repositories",{"title":304,"path":305,"stem":306,"icon":240},"Unlocking GitHub Achievement badges","\u002Fposts\u002Fgit\u002Funlocking-achievement-badges","posts\u002Fgit\u002Funlocking-achievement-badges",{"title":308,"path":309,"stem":310,"icon":240},"Essential Git commands every developer should master","\u002Fposts\u002Fgit\u002Fuseful-commands-like-pro","posts\u002Fgit\u002Fuseful-commands-like-pro",{"title":312,"icon":313,"redirect":314,"path":315,"stem":316,"children":317,"page":266},"Golang","material-icon-theme:go","\u002Fposts\u002Fgolang\u002Foptimizing-performance-with-pgo","\u002Fposts\u002Fgolang","posts\u002Fgolang",[318],{"title":319,"path":314,"stem":320,"icon":240},"Optimizing Performance in Go Applications with PGO","posts\u002Fgolang\u002Foptimizing-performance-with-pgo",{"title":322,"icon":323,"redirect":324,"path":325,"stem":326,"children":327,"page":266},"JavaScript","vscode-icons:file-type-js","\u002Fposts\u002Fjavascript\u002F9-lines-of-tips","\u002Fposts\u002Fjavascript","posts\u002Fjavascript",[328,331],{"title":329,"path":324,"stem":330,"icon":240},"9 lines of JavaScript replace 50 lines of code","posts\u002Fjavascript\u002F9-lines-of-tips",{"title":332,"path":333,"stem":334,"icon":240},"Javascript Promises - Specific functions and use cases","\u002Fposts\u002Fjavascript\u002Fpromises-cheatsheet","posts\u002Fjavascript\u002Fpromises-cheatsheet",{"title":336,"icon":337,"redirect":338,"path":339,"stem":340,"children":341,"page":266},"Node","material-icon-theme:nodejs-alt","\u002Fposts\u002Fnodejs\u002Fevent-loop","\u002Fposts\u002Fnodejs","posts\u002Fnodejs",[342],{"title":343,"path":338,"stem":344,"icon":240},"Secret about Event Loop flow in Nodejs","posts\u002Fnodejs\u002Fevent-loop",{"title":346,"icon":347,"redirect":348,"path":349,"stem":350,"children":351,"page":266},"Nuxt","vscode-icons:file-type-nuxt","\u002Fposts\u002Fnuxt\u002Fenable-pwa-in-nuxt","\u002Fposts\u002Fnuxt","posts\u002Fnuxt",[352],{"title":353,"path":348,"stem":354,"icon":240},"Enable PWA and Service Worker in Nuxt","posts\u002Fnuxt\u002Fenable-pwa-in-nuxt",{"title":356,"icon":357,"redirect":358,"path":359,"stem":360,"children":361,"page":266},"Performance","emojione:rocket","\u002Fposts\u002Fperformance\u002Fbackground-image-injection-problem","\u002Fposts\u002Fperformance","posts\u002Fperformance",[362],{"title":363,"path":358,"stem":364,"icon":240},"Background-Image injection problem in UX","posts\u002Fperformance\u002Fbackground-image-injection-problem",{"title":366,"icon":367,"redirect":368,"path":369,"stem":370,"children":371,"page":266},"Tutorial","fluent-color:book-open-lightbulb-24","\u002Fposts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers","\u002Fposts\u002Ftutorial","posts\u002Ftutorial",[372,375,379,383,387],{"title":373,"path":368,"stem":374,"icon":240},"Classification and functionality of the servers","posts\u002Ftutorial\u002Fclassification-and-functionality-of-the-servers",{"title":376,"path":377,"stem":378,"icon":240},"What is the difference between localhost and 127.0.0.1?","\u002Fposts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1","posts\u002Ftutorial\u002Fdifferent-between-localhost-and-127-0-0-1",{"title":380,"path":381,"stem":382,"icon":240},"8 essential network protocols every programmer should know","\u002Fposts\u002Ftutorial\u002Fessential-network-protocols","posts\u002Ftutorial\u002Fessential-network-protocols",{"title":384,"path":385,"stem":386,"icon":240},"Pre rels in header link tag - SEO technique enhancement","\u002Fposts\u002Ftutorial\u002Fpre-rels-in-header-link-tag","posts\u002Ftutorial\u002Fpre-rels-in-header-link-tag",{"title":388,"path":389,"stem":390,"icon":240},"Better code with SOLID principles","\u002Fposts\u002Ftutorial\u002Fwhat-is-solid","posts\u002Ftutorial\u002Fwhat-is-solid",{"title":392,"icon":393,"redirect":394,"path":395,"stem":396,"children":397,"page":266},"UI\u002FUX","devicon:figma","\u002Fposts\u002Fuiux\u002Fcommon-button-mistake","\u002Fposts\u002Fuiux","posts\u002Fuiux",[398],{"title":399,"path":394,"stem":400,"icon":240},"Common Button Mistake in UI\u002FUX","posts\u002Fuiux\u002Fcommon-button-mistake",{"title":402,"icon":403,"path":404,"stem":405,"children":406,"page":266},"Cheatsheets","fluent-color:paw-16","\u002Fcheatsheets","cheatsheets",[407,412,417,420,425,428,433,437,442,447,452,457,462,467,471,475,480,485,489,494,499,500],{"title":408,"path":409,"stem":410,"icon":411},"Bash","\u002Fcheatsheets\u002Fbash","cheatsheets\u002Fbash","material-icon-theme:powershell",{"title":413,"path":414,"stem":415,"icon":416},"CSS","\u002Fcheatsheets\u002Fcss","cheatsheets\u002Fcss","vscode-icons:file-type-css2",{"title":268,"path":418,"stem":419,"icon":269},"\u002Fcheatsheets\u002Fdocker","cheatsheets\u002Fdocker",{"title":421,"path":422,"stem":423,"icon":424},"Git","\u002Fcheatsheets\u002Fgit","cheatsheets\u002Fgit","devicon:git",{"title":312,"path":426,"stem":427,"icon":313},"\u002Fcheatsheets\u002Fgo","cheatsheets\u002Fgo",{"title":429,"path":430,"stem":431,"icon":432},"HTML","\u002Fcheatsheets\u002Fhtml","cheatsheets\u002Fhtml","material-icon-theme:html",{"title":322,"path":434,"stem":435,"icon":436},"\u002Fcheatsheets\u002Fjavascript","cheatsheets\u002Fjavascript","material-icon-theme:javascript",{"title":438,"path":439,"stem":440,"icon":441},"Latex","\u002Fcheatsheets\u002Flatex","cheatsheets\u002Flatex","material-icon-theme:latexmk",{"title":443,"path":444,"stem":445,"icon":446},"Linux","\u002Fcheatsheets\u002Flinux","cheatsheets\u002Flinux","devicon:linux",{"title":448,"path":449,"stem":450,"icon":451},"Markdown","\u002Fcheatsheets\u002Fmarkdown","cheatsheets\u002Fmarkdown","material-icon-theme:markdown",{"title":453,"path":454,"stem":455,"icon":456},"Mongo","\u002Fcheatsheets\u002Fmongo","cheatsheets\u002Fmongo","devicon:mongodb",{"title":458,"path":459,"stem":460,"icon":461},"Nest","\u002Fcheatsheets\u002Fnest","cheatsheets\u002Fnest","material-icon-theme:nest",{"title":463,"path":464,"stem":465,"icon":466},"Next","\u002Fcheatsheets\u002Fnext","cheatsheets\u002Fnext","logos:nextjs-icon",{"title":336,"path":468,"stem":469,"icon":470},"\u002Fcheatsheets\u002Fnode","cheatsheets\u002Fnode","material-icon-theme:nodejs",{"title":346,"path":472,"stem":473,"icon":474},"\u002Fcheatsheets\u002Fnuxt","cheatsheets\u002Fnuxt","material-icon-theme:nuxt",{"title":476,"path":477,"stem":478,"icon":479},"React","\u002Fcheatsheets\u002Freact","cheatsheets\u002Freact","material-icon-theme:react",{"title":481,"path":482,"stem":483,"icon":484},"Redis","\u002Fcheatsheets\u002Fredis","cheatsheets\u002Fredis","vscode-icons:folder-type-redis-opened",{"title":486,"path":487,"stem":488,"icon":258},"SQL","\u002Fcheatsheets\u002Fsql","cheatsheets\u002Fsql",{"title":490,"path":491,"stem":492,"icon":493},"Typescript","\u002Fcheatsheets\u002Ftypescript","cheatsheets\u002Ftypescript","material-icon-theme:typescript",{"title":495,"path":496,"stem":497,"icon":498},"Vercel","\u002Fcheatsheets\u002Fvercel","cheatsheets\u002Fvercel","vscode-icons:file-type-light-vercel",{"title":5,"path":242,"stem":247,"icon":238},{"title":501,"path":502,"stem":503,"icon":504},"Windows","\u002Fcheatsheets\u002Fwindow","cheatsheets\u002Fwindow","material-icon-theme:folder-windows",{"title":506,"icon":507,"path":508,"stem":509,"children":510,"page":266},"Templates","fluent-color:data-pie-24","\u002Ftemplates","templates",[511,514,517,520,523],{"title":312,"path":512,"stem":513,"icon":313},"\u002Ftemplates\u002Fgo","templates\u002Fgo",{"title":463,"path":515,"stem":516,"icon":466},"\u002Ftemplates\u002Fnext","templates\u002Fnext",{"title":346,"path":518,"stem":519,"icon":474},"\u002Ftemplates\u002Fnuxt","templates\u002Fnuxt",{"title":476,"path":521,"stem":522,"icon":479},"\u002Ftemplates\u002Freact","templates\u002Freact",{"title":5,"path":524,"stem":525,"icon":238},"\u002Ftemplates\u002Fvue","templates\u002Fvue",{"title":527,"icon":403,"path":528,"stem":529,"children":530,"page":266},"Interviews","\u002Finterviews","interviews",[531],{"title":429,"path":532,"stem":533,"icon":432},"\u002Finterviews\u002Fhtml","interviews\u002Fhtml",[535,536],{"title":495,"path":496,"stem":497,"children":-1},{"title":501,"path":502,"stem":503,"children":-1}]