[{"data":1,"prerenderedAt":313},["Reactive",2],{"content-query-5w3y6JMsgF":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"image":10,"head":11,"publishedAt":15,"toc":16,"body":17,"_type":308,"_id":309,"_source":310,"_file":311,"_extension":312},"/blog/vue-introduction","blog",false,"","Introduction to Vue 3","A beginner's guide to getting started with Vue 3.","/images/vue-logo.png",{"meta":12},[13],{"name":14,"content":10},"og:image","2024-02-21T10:00:00.000Z",true,{"type":18,"children":19,"toc":303},"root",[20,28,37,44,49,53,59,64,100,103,109,114,297],{"type":21,"tag":22,"props":23,"children":25},"element","h1",{"id":24},"introduction-to-vue-3",[26],{"type":27,"value":8},"text",{"type":21,"tag":29,"props":30,"children":31},"p",{},[32],{"type":21,"tag":33,"props":34,"children":36},"img",{"alt":35,"src":10},"Vue 3 Introduction",[],{"type":21,"tag":38,"props":39,"children":41},"h2",{"id":40},"what-is-vue-3",[42],{"type":27,"value":43},"What is Vue 3?",{"type":21,"tag":29,"props":45,"children":46},{},[47],{"type":27,"value":48},"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.",{"type":21,"tag":50,"props":51,"children":52},"hr",{},[],{"type":21,"tag":38,"props":54,"children":56},{"id":55},"why-choose-vue-3",[57],{"type":27,"value":58},"Why Choose Vue 3?",{"type":21,"tag":29,"props":60,"children":61},{},[62],{"type":27,"value":63},"Vue 3 comes with several exciting features that make it an excellent choice for developers:",{"type":21,"tag":65,"props":66,"children":67},"ul",{},[68,80,90],{"type":21,"tag":69,"props":70,"children":71},"li",{},[72,78],{"type":21,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":27,"value":77},"Composition API:",{"type":27,"value":79}," This new API provides a set of additive, function-based APIs that allow flexible composition of component logic.",{"type":21,"tag":69,"props":81,"children":82},{},[83,88],{"type":21,"tag":73,"props":84,"children":85},{},[86],{"type":27,"value":87},"Faster rendering:",{"type":27,"value":89}," Vue 3 features a faster virtual DOM and improved runtime performance.",{"type":21,"tag":69,"props":91,"children":92},{},[93,98],{"type":21,"tag":73,"props":94,"children":95},{},[96],{"type":27,"value":97},"Improved TypeScript support:",{"type":27,"value":99}," Vue 3's codebase is written in TypeScript, allowing for better TypeScript integration.",{"type":21,"tag":50,"props":101,"children":102},{},[],{"type":21,"tag":38,"props":104,"children":106},{"id":105},"getting-started-with-vue-3",[107],{"type":27,"value":108},"Getting Started with Vue 3",{"type":21,"tag":29,"props":110,"children":111},{},[112],{"type":27,"value":113},"Here's a basic Vue 3 application setup:",{"type":21,"tag":115,"props":116,"children":120},"pre",{"className":117,"code":118,"language":119,"meta":7,"style":7},"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",[121],{"type":21,"tag":122,"props":123,"children":124},"code",{"__ignoreMap":7},[125,164,193,207,221,241,250,259,268],{"type":21,"tag":126,"props":127,"children":130},"span",{"class":128,"line":129},"line",1,[131,137,143,149,154,159],{"type":21,"tag":126,"props":132,"children":134},{"style":133},"--shiki-default:#D32F2F;--shiki-dark:#F97583",[135],{"type":27,"value":136},"const",{"type":21,"tag":126,"props":138,"children":140},{"style":139},"--shiki-default:#24292EFF;--shiki-dark:#B392F0",[141],{"type":27,"value":142}," { ",{"type":21,"tag":126,"props":144,"children":146},{"style":145},"--shiki-default:#1976D2;--shiki-dark:#79B8FF",[147],{"type":27,"value":148},"createApp",{"type":21,"tag":126,"props":150,"children":151},{"style":139},[152],{"type":27,"value":153}," } ",{"type":21,"tag":126,"props":155,"children":156},{"style":133},[157],{"type":27,"value":158},"=",{"type":21,"tag":126,"props":160,"children":161},{"style":139},[162],{"type":27,"value":163}," Vue\n",{"type":21,"tag":126,"props":165,"children":167},{"class":128,"line":166},2,[168,172,177,182,188],{"type":21,"tag":126,"props":169,"children":170},{"style":133},[171],{"type":27,"value":136},{"type":21,"tag":126,"props":173,"children":174},{"style":145},[175],{"type":27,"value":176}," app",{"type":21,"tag":126,"props":178,"children":179},{"style":133},[180],{"type":27,"value":181}," =",{"type":21,"tag":126,"props":183,"children":185},{"style":184},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[186],{"type":27,"value":187}," createApp",{"type":21,"tag":126,"props":189,"children":190},{"style":139},[191],{"type":27,"value":192},"({\n",{"type":21,"tag":126,"props":194,"children":196},{"class":128,"line":195},3,[197,202],{"type":21,"tag":126,"props":198,"children":199},{"style":184},[200],{"type":27,"value":201},"  data",{"type":21,"tag":126,"props":203,"children":204},{"style":139},[205],{"type":27,"value":206},"() {\n",{"type":21,"tag":126,"props":208,"children":210},{"class":128,"line":209},4,[211,216],{"type":21,"tag":126,"props":212,"children":213},{"style":133},[214],{"type":27,"value":215},"    return",{"type":21,"tag":126,"props":217,"children":218},{"style":139},[219],{"type":27,"value":220}," {\n",{"type":21,"tag":126,"props":222,"children":224},{"class":128,"line":223},5,[225,230,235],{"type":21,"tag":126,"props":226,"children":227},{"style":139},[228],{"type":27,"value":229},"      message",{"type":21,"tag":126,"props":231,"children":232},{"style":133},[233],{"type":27,"value":234},":",{"type":21,"tag":126,"props":236,"children":238},{"style":237},"--shiki-default:#22863A;--shiki-dark:#FFAB70",[239],{"type":27,"value":240}," 'Hello Vue 3!'\n",{"type":21,"tag":126,"props":242,"children":244},{"class":128,"line":243},6,[245],{"type":21,"tag":126,"props":246,"children":247},{"style":139},[248],{"type":27,"value":249},"    }\n",{"type":21,"tag":126,"props":251,"children":253},{"class":128,"line":252},7,[254],{"type":21,"tag":126,"props":255,"children":256},{"style":139},[257],{"type":27,"value":258},"  }\n",{"type":21,"tag":126,"props":260,"children":262},{"class":128,"line":261},8,[263],{"type":21,"tag":126,"props":264,"children":265},{"style":139},[266],{"type":27,"value":267},"})\n",{"type":21,"tag":126,"props":269,"children":271},{"class":128,"line":270},9,[272,277,282,287,292],{"type":21,"tag":126,"props":273,"children":274},{"style":145},[275],{"type":27,"value":276},"app",{"type":21,"tag":126,"props":278,"children":279},{"style":184},[280],{"type":27,"value":281},".mount",{"type":21,"tag":126,"props":283,"children":284},{"style":139},[285],{"type":27,"value":286},"(",{"type":21,"tag":126,"props":288,"children":289},{"style":237},[290],{"type":27,"value":291},"'#app'",{"type":21,"tag":126,"props":293,"children":294},{"style":139},[295],{"type":27,"value":296},")\n",{"type":21,"tag":298,"props":299,"children":300},"style",{},[301],{"type":27,"value":302},"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":7,"searchDepth":166,"depth":166,"links":304},[305,306,307],{"id":40,"depth":166,"text":43},{"id":55,"depth":166,"text":58},{"id":105,"depth":166,"text":108},"markdown","content:blog:vue-introduction.md","content","blog/vue-introduction.md","md",1757233038062]