[{"data":1,"prerenderedAt":497},["ShallowReactive",2],{"/blog/vue-introduction":3},{"id":4,"title":5,"body":6,"description":485,"extension":486,"meta":487,"navigation":493,"path":494,"seo":495,"stem":496},"content/blog/vue-introduction.md","Vue introduction",{"type":7,"value":8,"toc":480},"minimal",[9,14,22,27,30,32,34,36,39,43,46,69,71,85,87,101,103,117,119,123,126,248,250,324,326,400,402,476],[10,11,13],"h1",{"id":12},"introduction-to-vue-3","Introduction to Vue 3",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"Vue 3 Introduction","/images/vue-logo.png",[23,24,26],"h2",{"id":25},"what-is-vue-3","What is Vue 3?",[15,28,29],{},"Vue.js 3 is a progressive JavaScript framework for building user interfaces on the web. It's\ndesigned to be incrementally adoptable and can easily scale between a library and a full-featured\nframework.",[15,31,29],{},[15,33,29],{},[15,35,29],{},[37,38],"hr",{},[23,40,42],{"id":41},"why-choose-vue-3","Why Choose Vue 3?",[15,44,45],{},"Vue 3 comes with several exciting features that make it an excellent choice for developers:",[47,48,49,57,63],"ul",{},[50,51,52,56],"li",{},[53,54,55],"strong",{},"Composition API:"," This new API provides a set of additive, function-based APIs that allow\nflexible composition of component logic.",[50,58,59,62],{},[53,60,61],{},"Faster rendering:"," Vue 3 features a faster virtual DOM and improved runtime performance.",[50,64,65,68],{},[53,66,67],{},"Improved TypeScript support:"," Vue 3's codebase is written in TypeScript, allowing for better\nTypeScript integration.",[15,70,45],{},[47,72,73,77,81],{},[50,74,75,56],{},[53,76,55],{},[50,78,79,62],{},[53,80,61],{},[50,82,83,68],{},[53,84,67],{},[15,86,45],{},[47,88,89,93,97],{},[50,90,91,56],{},[53,92,55],{},[50,94,95,62],{},[53,96,61],{},[50,98,99,68],{},[53,100,67],{},[15,102,45],{},[47,104,105,109,113],{},[50,106,107,56],{},[53,108,55],{},[50,110,111,62],{},[53,112,61],{},[50,114,115,68],{},[53,116,67],{},[37,118],{},[23,120,122],{"id":121},"getting-started-with-vue-3","Getting Started with Vue 3",[15,124,125],{},"Here's a basic Vue 3 application setup:",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-javascript shiki shiki-themes github-light github-dark monokai","const { createApp } = Vue;\nconst app = createApp({\n  data() {\n    return {\n      message: \"Hello Vue 3!\",\n    };\n  },\n});\napp.mount(\"#app\");\n","javascript","",[134,135,136,163,181,190,199,212,218,224,230],"code",{"__ignoreMap":132},[137,138,141,145,149,153,156,160],"span",{"class":139,"line":140},"line",1,[137,142,144],{"class":143},"saRcr","const",[137,146,148],{"class":147},"sk4Fs"," { ",[137,150,152],{"class":151},"sq7VU","createApp",[137,154,155],{"class":147}," } ",[137,157,159],{"class":158},"sg96D","=",[137,161,162],{"class":147}," Vue;\n",[137,164,166,168,171,174,178],{"class":139,"line":165},2,[137,167,144],{"class":143},[137,169,170],{"class":151}," app",[137,172,173],{"class":158}," =",[137,175,177],{"class":176},"sUVsI"," createApp",[137,179,180],{"class":147},"({\n",[137,182,184,187],{"class":139,"line":183},3,[137,185,186],{"class":176},"  data",[137,188,189],{"class":147},"() {\n",[137,191,193,196],{"class":139,"line":192},4,[137,194,195],{"class":158},"    return",[137,197,198],{"class":147}," {\n",[137,200,202,205,209],{"class":139,"line":201},5,[137,203,204],{"class":147},"      message: ",[137,206,208],{"class":207},"sqm1N","\"Hello Vue 3!\"",[137,210,211],{"class":147},",\n",[137,213,215],{"class":139,"line":214},6,[137,216,217],{"class":147},"    };\n",[137,219,221],{"class":139,"line":220},7,[137,222,223],{"class":147},"  },\n",[137,225,227],{"class":139,"line":226},8,[137,228,229],{"class":147},"});\n",[137,231,233,236,239,242,245],{"class":139,"line":232},9,[137,234,235],{"class":147},"app.",[137,237,238],{"class":176},"mount",[137,240,241],{"class":147},"(",[137,243,244],{"class":207},"\"#app\"",[137,246,247],{"class":147},");\n",[15,249,125],{},[127,251,252],{"className":129,"code":130,"language":131,"meta":132,"style":132},[134,253,254,268,280,286,292,300,304,308,312],{"__ignoreMap":132},[137,255,256,258,260,262,264,266],{"class":139,"line":140},[137,257,144],{"class":143},[137,259,148],{"class":147},[137,261,152],{"class":151},[137,263,155],{"class":147},[137,265,159],{"class":158},[137,267,162],{"class":147},[137,269,270,272,274,276,278],{"class":139,"line":165},[137,271,144],{"class":143},[137,273,170],{"class":151},[137,275,173],{"class":158},[137,277,177],{"class":176},[137,279,180],{"class":147},[137,281,282,284],{"class":139,"line":183},[137,283,186],{"class":176},[137,285,189],{"class":147},[137,287,288,290],{"class":139,"line":192},[137,289,195],{"class":158},[137,291,198],{"class":147},[137,293,294,296,298],{"class":139,"line":201},[137,295,204],{"class":147},[137,297,208],{"class":207},[137,299,211],{"class":147},[137,301,302],{"class":139,"line":214},[137,303,217],{"class":147},[137,305,306],{"class":139,"line":220},[137,307,223],{"class":147},[137,309,310],{"class":139,"line":226},[137,311,229],{"class":147},[137,313,314,316,318,320,322],{"class":139,"line":232},[137,315,235],{"class":147},[137,317,238],{"class":176},[137,319,241],{"class":147},[137,321,244],{"class":207},[137,323,247],{"class":147},[15,325,125],{},[127,327,328],{"className":129,"code":130,"language":131,"meta":132,"style":132},[134,329,330,344,356,362,368,376,380,384,388],{"__ignoreMap":132},[137,331,332,334,336,338,340,342],{"class":139,"line":140},[137,333,144],{"class":143},[137,335,148],{"class":147},[137,337,152],{"class":151},[137,339,155],{"class":147},[137,341,159],{"class":158},[137,343,162],{"class":147},[137,345,346,348,350,352,354],{"class":139,"line":165},[137,347,144],{"class":143},[137,349,170],{"class":151},[137,351,173],{"class":158},[137,353,177],{"class":176},[137,355,180],{"class":147},[137,357,358,360],{"class":139,"line":183},[137,359,186],{"class":176},[137,361,189],{"class":147},[137,363,364,366],{"class":139,"line":192},[137,365,195],{"class":158},[137,367,198],{"class":147},[137,369,370,372,374],{"class":139,"line":201},[137,371,204],{"class":147},[137,373,208],{"class":207},[137,375,211],{"class":147},[137,377,378],{"class":139,"line":214},[137,379,217],{"class":147},[137,381,382],{"class":139,"line":220},[137,383,223],{"class":147},[137,385,386],{"class":139,"line":226},[137,387,229],{"class":147},[137,389,390,392,394,396,398],{"class":139,"line":232},[137,391,235],{"class":147},[137,393,238],{"class":176},[137,395,241],{"class":147},[137,397,244],{"class":207},[137,399,247],{"class":147},[15,401,125],{},[127,403,404],{"className":129,"code":130,"language":131,"meta":132,"style":132},[134,405,406,420,432,438,444,452,456,460,464],{"__ignoreMap":132},[137,407,408,410,412,414,416,418],{"class":139,"line":140},[137,409,144],{"class":143},[137,411,148],{"class":147},[137,413,152],{"class":151},[137,415,155],{"class":147},[137,417,159],{"class":158},[137,419,162],{"class":147},[137,421,422,424,426,428,430],{"class":139,"line":165},[137,423,144],{"class":143},[137,425,170],{"class":151},[137,427,173],{"class":158},[137,429,177],{"class":176},[137,431,180],{"class":147},[137,433,434,436],{"class":139,"line":183},[137,435,186],{"class":176},[137,437,189],{"class":147},[137,439,440,442],{"class":139,"line":192},[137,441,195],{"class":158},[137,443,198],{"class":147},[137,445,446,448,450],{"class":139,"line":201},[137,447,204],{"class":147},[137,449,208],{"class":207},[137,451,211],{"class":147},[137,453,454],{"class":139,"line":214},[137,455,217],{"class":147},[137,457,458],{"class":139,"line":220},[137,459,223],{"class":147},[137,461,462],{"class":139,"line":226},[137,463,229],{"class":147},[137,465,466,468,470,472,474],{"class":139,"line":232},[137,467,235],{"class":147},[137,469,238],{"class":176},[137,471,241],{"class":147},[137,473,244],{"class":207},[137,475,247],{"class":147},[477,478,479],"style",{},"html pre.shiki code .saRcr, html code.shiki .saRcr{--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .sk4Fs, html code.shiki .sk4Fs{--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .sq7VU, html code.shiki .sq7VU{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#F8F8F2}html pre.shiki code .sg96D, html code.shiki .sg96D{--shiki-default:#D73A49;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sUVsI, html code.shiki .sUVsI{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sqm1N, html code.shiki .sqm1N{--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":132,"searchDepth":165,"depth":165,"links":481},[482,483,484],{"id":25,"depth":165,"text":26},{"id":41,"depth":165,"text":42},{"id":121,"depth":165,"text":122},"A beginner's guide to getting started with Vue 3.","md",{"image":21,"date":488,"head":489,"toc":493},"2020-03-03",{"meta":490},[491],{"name":492,"content":21},"og:image",true,"/blog/vue-introduction",{"title":5,"description":485},"blog/vue-introduction",1774730153524]