[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"/blog/vue-introduction":3},{"id":4,"title":5,"body":6,"description":146,"extension":147,"meta":148,"navigation":153,"path":154,"publisehdAt":155,"seo":156,"sitemap":157,"stem":158,"toc":153,"__hash__":159},"blogContent/blog/vue-introduction.md","Introduction to Vue 3",{"type":7,"value":8,"toc":141},"minimark",[9,13,21,26,29,32,36,39,62,64,68,71,137],[10,11,5],"h1",{"id":12},"introduction-to-vue-3",[14,15,16],"p",{},[17,18],"img",{"alt":19,"src":20},"Vue 3 Introduction","/images/vue-logo.png",[22,23,25],"h2",{"id":24},"what-is-vue-3","What is Vue 3?",[14,27,28],{},"Vue.js 3 is a progressive JavaScript framework for building user interfaces on the web. It's designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.",[30,31],"hr",{},[22,33,35],{"id":34},"why-choose-vue-3","Why Choose Vue 3?",[14,37,38],{},"Vue 3 comes with several exciting features that make it an excellent choice for developers:",[40,41,42,50,56],"ul",{},[43,44,45,49],"li",{},[46,47,48],"strong",{},"Composition API:"," This new API provides a set of additive, function-based APIs that allow flexible composition of component logic.",[43,51,52,55],{},[46,53,54],{},"Faster rendering:"," Vue 3 features a faster virtual DOM and improved runtime performance.",[43,57,58,61],{},[46,59,60],{},"Improved TypeScript support:"," Vue 3's codebase is written in TypeScript, allowing for better TypeScript integration.",[30,63],{},[22,65,67],{"id":66},"getting-started-with-vue-3","Getting Started with Vue 3",[14,69,70],{},"Here's a basic Vue 3 application setup:",[72,73,78],"pre",{"className":74,"code":75,"language":76,"meta":77,"style":77},"language-javascript shiki shiki-themes min-light min-dark","const { createApp } = Vue\nconst app = createApp({\n  data() {\n    return {\n      message: 'Hello Vue 3!'\n    }\n  }\n})\napp.mount('#app')\n","javascript","",[79,80,81,89,95,101,107,113,119,125,131],"code",{"__ignoreMap":77},[82,83,86],"span",{"class":84,"line":85},"line",1,[82,87,88],{},"const { createApp } = Vue\n",[82,90,92],{"class":84,"line":91},2,[82,93,94],{},"const app = createApp({\n",[82,96,98],{"class":84,"line":97},3,[82,99,100],{},"  data() {\n",[82,102,104],{"class":84,"line":103},4,[82,105,106],{},"    return {\n",[82,108,110],{"class":84,"line":109},5,[82,111,112],{},"      message: 'Hello Vue 3!'\n",[82,114,116],{"class":84,"line":115},6,[82,117,118],{},"    }\n",[82,120,122],{"class":84,"line":121},7,[82,123,124],{},"  }\n",[82,126,128],{"class":84,"line":127},8,[82,129,130],{},"})\n",[82,132,134],{"class":84,"line":133},9,[82,135,136],{},"app.mount('#app')\n",[138,139,140],"style",{},"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":77,"searchDepth":91,"depth":91,"links":142},[143,144,145],{"id":24,"depth":91,"text":25},{"id":34,"depth":91,"text":35},{"id":66,"depth":91,"text":67},"A beginner's guide to getting started with Vue 3.","md",{"image":20,"head":149},{"meta":150},[151],{"name":152,"content":20},"og:image",true,"/blog/vue-introduction","2025-07-30T17:40:00.000Z",{"title":5,"description":146},{"loc":154},"blog/vue-introduction","Lp67zevwvIYgrY6YzVtshDZRlU8I2OaW7ypwLhPv9e4",1756367928160]