[{"data":1,"prerenderedAt":2143},["Reactive",2],{"content-query-Fyt3oF8Lk7":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"createdAt":10,"updatedAt":10,"thumbnail":11,"thumbnailMobile":12,"social":13,"author":14,"tags":16,"readingTime":20,"body":25,"_type":2138,"_id":2139,"_source":2140,"_file":2141,"_extension":2142},"/blog/vue","blog",false,"","What's new about vue.3","Vue is a progressive javascript framework for UIs (user interfaces), the most starred in Github, and it is commonly...","2021-09-28T03:01:50.854Z","/thumb/vue.webp","/thumb/vue mobile.webp","/thumb/vue.jpg",{"name":15},"Zakaria",[17,18,19],"coding tips","vue tips","web dev",{"text":21,"minutes":22,"time":23,"words":24},"5 min read",4.495,269700,899,{"type":26,"children":27,"toc":2130},"root",[28,36,41,46,53,58,222,227,232,252,257,441,446,451,457,462,467,476,481,526,532,537,542,767,772,1015,1020,1307,1313,1318,1323,1587,1592,1758,1764,1769,2091,2096,2102,2125],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","Vue is a progressive javascript framework for UIs (user interfaces), the most starred in Github, and it is commonly used in frontend development next to React and Angular.",{"type":29,"tag":30,"props":37,"children":38},{},[39],{"type":34,"value":40},"In september 2020, a new major release came out: VUE 3.0.",{"type":29,"tag":30,"props":42,"children":43},{},[44],{"type":34,"value":45},"Let take a look at the new features:",{"type":29,"tag":47,"props":48,"children":50},"h2",{"id":49},"_1-composition-api",[51],{"type":34,"value":52},"1- Composition API",{"type":29,"tag":30,"props":54,"children":55},{},[56],{"type":34,"value":57},"If you're familiar with Vue 2 you'll be quite used to what is called the options API which looks like this :",{"type":29,"tag":59,"props":60,"children":64},"pre",{"className":61,"code":62,"language":63,"meta":7,"style":7},"language-javascript shiki shiki-themes material-theme","// Example of a search + sorting component\nexport {\n  data():{\n    return {\n      // Data for searching\n      // Data for sorting\n    }\n  },\n  methods: {\n      // function for search\n      // function for sorting\n  }\n}\n","javascript",[65],{"type":29,"tag":66,"props":67,"children":68},"code",{"__ignoreMap":7},[69,81,97,113,126,135,144,153,167,186,195,204,213],{"type":29,"tag":70,"props":71,"children":74},"span",{"class":72,"line":73},"line",1,[75],{"type":29,"tag":70,"props":76,"children":78},{"style":77},"--shiki-default:#546E7A;--shiki-default-font-style:italic",[79],{"type":34,"value":80},"// Example of a search + sorting component\n",{"type":29,"tag":70,"props":82,"children":84},{"class":72,"line":83},2,[85,91],{"type":29,"tag":70,"props":86,"children":88},{"style":87},"--shiki-default:#89DDFF;--shiki-default-font-style:italic",[89],{"type":34,"value":90},"export",{"type":29,"tag":70,"props":92,"children":94},{"style":93},"--shiki-default:#89DDFF",[95],{"type":34,"value":96}," {\n",{"type":29,"tag":70,"props":98,"children":100},{"class":72,"line":99},3,[101,107],{"type":29,"tag":70,"props":102,"children":104},{"style":103},"--shiki-default:#EEFFFF",[105],{"type":34,"value":106},"  data",{"type":29,"tag":70,"props":108,"children":110},{"style":109},"--shiki-default:#F07178",[111],{"type":34,"value":112},"():{\n",{"type":29,"tag":70,"props":114,"children":116},{"class":72,"line":115},4,[117,122],{"type":29,"tag":70,"props":118,"children":119},{"style":103},[120],{"type":34,"value":121},"    return",{"type":29,"tag":70,"props":123,"children":124},{"style":109},[125],{"type":34,"value":96},{"type":29,"tag":70,"props":127,"children":129},{"class":72,"line":128},5,[130],{"type":29,"tag":70,"props":131,"children":132},{"style":77},[133],{"type":34,"value":134},"      // Data for searching\n",{"type":29,"tag":70,"props":136,"children":138},{"class":72,"line":137},6,[139],{"type":29,"tag":70,"props":140,"children":141},{"style":77},[142],{"type":34,"value":143},"      // Data for sorting\n",{"type":29,"tag":70,"props":145,"children":147},{"class":72,"line":146},7,[148],{"type":29,"tag":70,"props":149,"children":150},{"style":93},[151],{"type":34,"value":152},"    }\n",{"type":29,"tag":70,"props":154,"children":156},{"class":72,"line":155},8,[157,162],{"type":29,"tag":70,"props":158,"children":159},{"style":103},[160],{"type":34,"value":161},"  }",{"type":29,"tag":70,"props":163,"children":164},{"style":93},[165],{"type":34,"value":166},",\n",{"type":29,"tag":70,"props":168,"children":170},{"class":72,"line":169},9,[171,177,182],{"type":29,"tag":70,"props":172,"children":174},{"style":173},"--shiki-default:#FFCB6B",[175],{"type":34,"value":176},"  methods",{"type":29,"tag":70,"props":178,"children":179},{"style":93},[180],{"type":34,"value":181},":",{"type":29,"tag":70,"props":183,"children":184},{"style":93},[185],{"type":34,"value":96},{"type":29,"tag":70,"props":187,"children":189},{"class":72,"line":188},10,[190],{"type":29,"tag":70,"props":191,"children":192},{"style":77},[193],{"type":34,"value":194},"      // function for search\n",{"type":29,"tag":70,"props":196,"children":198},{"class":72,"line":197},11,[199],{"type":29,"tag":70,"props":200,"children":201},{"style":77},[202],{"type":34,"value":203},"      // function for sorting\n",{"type":29,"tag":70,"props":205,"children":207},{"class":72,"line":206},12,[208],{"type":29,"tag":70,"props":209,"children":210},{"style":93},[211],{"type":34,"value":212},"  }\n",{"type":29,"tag":70,"props":214,"children":216},{"class":72,"line":215},13,[217],{"type":29,"tag":70,"props":218,"children":219},{"style":103},[220],{"type":34,"value":221},"}\n",{"type":29,"tag":30,"props":223,"children":224},{},[225],{"type":34,"value":226},"Now all of your data, your computed properties, your watches, your methods and so on are containing their own options within the Vue object.",{"type":29,"tag":30,"props":228,"children":229},{},[230],{"type":34,"value":231},"And while this is feels nice and intuitive, VUE 2 have 3 main problems:",{"type":29,"tag":233,"props":234,"children":235},"ul",{},[236,242,247],{"type":29,"tag":237,"props":238,"children":239},"li",{},[240],{"type":34,"value":241},"First is as your components grow and get bigger, they become less readable and therefore less maintainable.",{"type":29,"tag":237,"props":243,"children":244},{},[245],{"type":34,"value":246},"Second is that as you reuse pieces of code across components, each of these code reuse patterns in Vue 2 has its drawbacks.",{"type":29,"tag":237,"props":248,"children":249},{},[250],{"type":34,"value":251},"Third is that you Vue 2 has limited typescript support, there's ways to write it with typescript but they're not completely optimal.",{"type":29,"tag":30,"props":253,"children":254},{},[255],{"type":34,"value":256},"So instead of organizing our features by component options (and there is quite a few in Vue), we can do something like this:",{"type":29,"tag":59,"props":258,"children":260},{"className":61,"code":259,"language":63,"meta":7,"style":7},"// Example of a search + sorting component\nexport {\n  setup():{\n      // Setup method\n      return {...useSearch(),...useSorting()}\n    }\n  },\n  function useSearch(){\n      // composition function for search\n  },\n  function useSorting(){\n      // composition function for sorting\n  }\n}\n",[261],{"type":29,"tag":66,"props":262,"children":263},{"__ignoreMap":7},[264,271,282,294,302,348,355,366,386,394,402,418,426,433],{"type":29,"tag":70,"props":265,"children":266},{"class":72,"line":73},[267],{"type":29,"tag":70,"props":268,"children":269},{"style":77},[270],{"type":34,"value":80},{"type":29,"tag":70,"props":272,"children":273},{"class":72,"line":83},[274,278],{"type":29,"tag":70,"props":275,"children":276},{"style":87},[277],{"type":34,"value":90},{"type":29,"tag":70,"props":279,"children":280},{"style":93},[281],{"type":34,"value":96},{"type":29,"tag":70,"props":283,"children":284},{"class":72,"line":99},[285,290],{"type":29,"tag":70,"props":286,"children":287},{"style":103},[288],{"type":34,"value":289},"  setup",{"type":29,"tag":70,"props":291,"children":292},{"style":109},[293],{"type":34,"value":112},{"type":29,"tag":70,"props":295,"children":296},{"class":72,"line":115},[297],{"type":29,"tag":70,"props":298,"children":299},{"style":77},[300],{"type":34,"value":301},"      // Setup method\n",{"type":29,"tag":70,"props":303,"children":304},{"class":72,"line":128},[305,310,315,320,325,330,335,340,344],{"type":29,"tag":70,"props":306,"children":307},{"style":103},[308],{"type":34,"value":309},"      return",{"type":29,"tag":70,"props":311,"children":312},{"style":109},[313],{"type":34,"value":314}," {...",{"type":29,"tag":70,"props":316,"children":317},{"style":103},[318],{"type":34,"value":319},"useSearch",{"type":29,"tag":70,"props":321,"children":322},{"style":109},[323],{"type":34,"value":324},"()",{"type":29,"tag":70,"props":326,"children":327},{"style":93},[328],{"type":34,"value":329},",",{"type":29,"tag":70,"props":331,"children":332},{"style":109},[333],{"type":34,"value":334},"...",{"type":29,"tag":70,"props":336,"children":337},{"style":103},[338],{"type":34,"value":339},"useSorting",{"type":29,"tag":70,"props":341,"children":342},{"style":109},[343],{"type":34,"value":324},{"type":29,"tag":70,"props":345,"children":346},{"style":93},[347],{"type":34,"value":221},{"type":29,"tag":70,"props":349,"children":350},{"class":72,"line":137},[351],{"type":29,"tag":70,"props":352,"children":353},{"style":103},[354],{"type":34,"value":152},{"type":29,"tag":70,"props":356,"children":357},{"class":72,"line":146},[358,362],{"type":29,"tag":70,"props":359,"children":360},{"style":103},[361],{"type":34,"value":161},{"type":29,"tag":70,"props":363,"children":364},{"style":93},[365],{"type":34,"value":166},{"type":29,"tag":70,"props":367,"children":368},{"class":72,"line":155},[369,375,381],{"type":29,"tag":70,"props":370,"children":372},{"style":371},"--shiki-default:#C792EA",[373],{"type":34,"value":374},"  function",{"type":29,"tag":70,"props":376,"children":378},{"style":377},"--shiki-default:#82AAFF",[379],{"type":34,"value":380}," useSearch",{"type":29,"tag":70,"props":382,"children":383},{"style":93},[384],{"type":34,"value":385},"(){\n",{"type":29,"tag":70,"props":387,"children":388},{"class":72,"line":169},[389],{"type":29,"tag":70,"props":390,"children":391},{"style":77},[392],{"type":34,"value":393},"      // composition function for search\n",{"type":29,"tag":70,"props":395,"children":396},{"class":72,"line":188},[397],{"type":29,"tag":70,"props":398,"children":399},{"style":93},[400],{"type":34,"value":401},"  },\n",{"type":29,"tag":70,"props":403,"children":404},{"class":72,"line":197},[405,409,414],{"type":29,"tag":70,"props":406,"children":407},{"style":371},[408],{"type":34,"value":374},{"type":29,"tag":70,"props":410,"children":411},{"style":377},[412],{"type":34,"value":413}," useSorting",{"type":29,"tag":70,"props":415,"children":416},{"style":93},[417],{"type":34,"value":385},{"type":29,"tag":70,"props":419,"children":420},{"class":72,"line":206},[421],{"type":29,"tag":70,"props":422,"children":423},{"style":77},[424],{"type":34,"value":425},"      // composition function for sorting\n",{"type":29,"tag":70,"props":427,"children":428},{"class":72,"line":215},[429],{"type":29,"tag":70,"props":430,"children":431},{"style":93},[432],{"type":34,"value":212},{"type":29,"tag":70,"props":434,"children":436},{"class":72,"line":435},14,[437],{"type":29,"tag":70,"props":438,"children":439},{"style":103},[440],{"type":34,"value":221},{"type":29,"tag":30,"props":442,"children":443},{},[444],{"type":34,"value":445},"Now our code is organized by logical concerns, therefore more readable and maintainable.",{"type":29,"tag":30,"props":447,"children":448},{},[449],{"type":34,"value":450},"Vue 3 makes it possible by introducing the setup function and the composition functions (which we will dive into their syntax later in another article).",{"type":29,"tag":47,"props":452,"children":454},{"id":453},"_2-faster-and-smaller",[455],{"type":34,"value":456},"2- Faster and smaller",{"type":29,"tag":30,"props":458,"children":459},{},[460],{"type":34,"value":461},"Vue team have rewritten the entire framework to be faster and smaller than Vue 2. So let's go over some specific ways that the team have been able to implement it.",{"type":29,"tag":30,"props":463,"children":464},{},[465],{"type":34,"value":466},"They utilized a method called tree shaking and it basically removes dead code when compiling, so that when you compile your project for production, you will be leaved with the slimmest version of your app possible. Smaller project size means faster page load for your users.",{"type":29,"tag":468,"props":469,"children":475},"img",{"load":470,"src":471,"alt":472,"className":473},"lazy","/blog/vue compiler.png","vue compiler picture",[474],"draw",[],{"type":29,"tag":30,"props":477,"children":478},{},[479],{"type":34,"value":480},"Also vue has made its rendering faster is by implementing what it's called: a compiler informed virtual DOM.",{"type":29,"tag":30,"props":482,"children":483},{},[484,486,492,494,499,501,506,508,513,515,524],{"type":34,"value":485},"Now Vue is ",{"type":29,"tag":487,"props":488,"children":489},"strong",{},[490],{"type":34,"value":491},"41% lighter",{"type":34,"value":493},", has ",{"type":29,"tag":487,"props":495,"children":496},{},[497],{"type":34,"value":498},"55% faster",{"type":34,"value":500}," renders and ",{"type":29,"tag":487,"props":502,"children":503},{},[504],{"type":34,"value":505},"133% faster updates",{"type":34,"value":507}," and consumes up to ",{"type":29,"tag":487,"props":509,"children":510},{},[511],{"type":34,"value":512},"54% less",{"type":34,"value":514}," memory. For full statistics visit this ",{"type":29,"tag":516,"props":517,"children":521},"a",{"href":518,"rel":519},"https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing",[520],"nofollow",[522],{"type":34,"value":523},"link",{"type":34,"value":525},".",{"type":29,"tag":47,"props":527,"children":529},{"id":528},"_3-teleport",[530],{"type":34,"value":531},"3- Teleport",{"type":29,"tag":30,"props":533,"children":534},{},[535],{"type":34,"value":536},"In simple terms, teleport allows us to render components wherever we want within a page. Most of the time a component should be rendered naturally wherever its place is in the template, but specific features make more sense to be rendered outside of where it logically sitting in our code.",{"type":29,"tag":30,"props":538,"children":539},{},[540],{"type":34,"value":541},"To show an example of this, let's look at a common feature of web applications today the modal.",{"type":29,"tag":59,"props":543,"children":547},{"className":544,"code":545,"language":546,"meta":7,"style":7},"language-html shiki shiki-themes material-theme","\u003C!-- App.vue -->\n\u003Ctemplate>\n  \u003Cbody>\n    \u003Cdiv class=\"relative\">\n      \u003Ch3> Vue 3 Modal \u003C/h3>\n      \u003Cdiv>\n         \u003Cmodal-button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/body>\n\u003C/template>\n","html",[548],{"type":29,"tag":66,"props":549,"children":550},{"__ignoreMap":7},[551,559,577,594,636,672,687,704,720,736,752],{"type":29,"tag":70,"props":552,"children":553},{"class":72,"line":73},[554],{"type":29,"tag":70,"props":555,"children":556},{"style":77},[557],{"type":34,"value":558},"\u003C!-- App.vue -->\n",{"type":29,"tag":70,"props":560,"children":561},{"class":72,"line":83},[562,567,572],{"type":29,"tag":70,"props":563,"children":564},{"style":93},[565],{"type":34,"value":566},"\u003C",{"type":29,"tag":70,"props":568,"children":569},{"style":109},[570],{"type":34,"value":571},"template",{"type":29,"tag":70,"props":573,"children":574},{"style":93},[575],{"type":34,"value":576},">\n",{"type":29,"tag":70,"props":578,"children":579},{"class":72,"line":99},[580,585,590],{"type":29,"tag":70,"props":581,"children":582},{"style":93},[583],{"type":34,"value":584},"  \u003C",{"type":29,"tag":70,"props":586,"children":587},{"style":109},[588],{"type":34,"value":589},"body",{"type":29,"tag":70,"props":591,"children":592},{"style":93},[593],{"type":34,"value":576},{"type":29,"tag":70,"props":595,"children":596},{"class":72,"line":115},[597,602,607,612,617,622,628,632],{"type":29,"tag":70,"props":598,"children":599},{"style":93},[600],{"type":34,"value":601},"    \u003C",{"type":29,"tag":70,"props":603,"children":604},{"style":109},[605],{"type":34,"value":606},"div",{"type":29,"tag":70,"props":608,"children":609},{"style":371},[610],{"type":34,"value":611}," class",{"type":29,"tag":70,"props":613,"children":614},{"style":93},[615],{"type":34,"value":616},"=",{"type":29,"tag":70,"props":618,"children":619},{"style":93},[620],{"type":34,"value":621},"\"",{"type":29,"tag":70,"props":623,"children":625},{"style":624},"--shiki-default:#C3E88D",[626],{"type":34,"value":627},"relative",{"type":29,"tag":70,"props":629,"children":630},{"style":93},[631],{"type":34,"value":621},{"type":29,"tag":70,"props":633,"children":634},{"style":93},[635],{"type":34,"value":576},{"type":29,"tag":70,"props":637,"children":638},{"class":72,"line":128},[639,644,649,654,659,664,668],{"type":29,"tag":70,"props":640,"children":641},{"style":93},[642],{"type":34,"value":643},"      \u003C",{"type":29,"tag":70,"props":645,"children":646},{"style":109},[647],{"type":34,"value":648},"h3",{"type":29,"tag":70,"props":650,"children":651},{"style":93},[652],{"type":34,"value":653},">",{"type":29,"tag":70,"props":655,"children":656},{"style":103},[657],{"type":34,"value":658}," Vue 3 Modal ",{"type":29,"tag":70,"props":660,"children":661},{"style":93},[662],{"type":34,"value":663},"\u003C/",{"type":29,"tag":70,"props":665,"children":666},{"style":109},[667],{"type":34,"value":648},{"type":29,"tag":70,"props":669,"children":670},{"style":93},[671],{"type":34,"value":576},{"type":29,"tag":70,"props":673,"children":674},{"class":72,"line":137},[675,679,683],{"type":29,"tag":70,"props":676,"children":677},{"style":93},[678],{"type":34,"value":643},{"type":29,"tag":70,"props":680,"children":681},{"style":109},[682],{"type":34,"value":606},{"type":29,"tag":70,"props":684,"children":685},{"style":93},[686],{"type":34,"value":576},{"type":29,"tag":70,"props":688,"children":689},{"class":72,"line":146},[690,695,700],{"type":29,"tag":70,"props":691,"children":692},{"style":93},[693],{"type":34,"value":694},"         \u003C",{"type":29,"tag":70,"props":696,"children":697},{"style":109},[698],{"type":34,"value":699},"modal-button",{"type":29,"tag":70,"props":701,"children":702},{"style":93},[703],{"type":34,"value":576},{"type":29,"tag":70,"props":705,"children":706},{"class":72,"line":155},[707,712,716],{"type":29,"tag":70,"props":708,"children":709},{"style":93},[710],{"type":34,"value":711},"      \u003C/",{"type":29,"tag":70,"props":713,"children":714},{"style":109},[715],{"type":34,"value":606},{"type":29,"tag":70,"props":717,"children":718},{"style":93},[719],{"type":34,"value":576},{"type":29,"tag":70,"props":721,"children":722},{"class":72,"line":169},[723,728,732],{"type":29,"tag":70,"props":724,"children":725},{"style":93},[726],{"type":34,"value":727},"    \u003C/",{"type":29,"tag":70,"props":729,"children":730},{"style":109},[731],{"type":34,"value":606},{"type":29,"tag":70,"props":733,"children":734},{"style":93},[735],{"type":34,"value":576},{"type":29,"tag":70,"props":737,"children":738},{"class":72,"line":188},[739,744,748],{"type":29,"tag":70,"props":740,"children":741},{"style":93},[742],{"type":34,"value":743},"  \u003C/",{"type":29,"tag":70,"props":745,"children":746},{"style":109},[747],{"type":34,"value":589},{"type":29,"tag":70,"props":749,"children":750},{"style":93},[751],{"type":34,"value":576},{"type":29,"tag":70,"props":753,"children":754},{"class":72,"line":197},[755,759,763],{"type":29,"tag":70,"props":756,"children":757},{"style":93},[758],{"type":34,"value":663},{"type":29,"tag":70,"props":760,"children":761},{"style":109},[762],{"type":34,"value":571},{"type":29,"tag":70,"props":764,"children":765},{"style":93},[766],{"type":34,"value":576},{"type":29,"tag":30,"props":768,"children":769},{},[770],{"type":34,"value":771},"In this example the modal button component would allow us to click a button and open a modal on the page, but the problem with this is that the modal generated in the component is now nested deeply within the application, while it would make most sense to sit right at the top as a direct child of the body.",{"type":29,"tag":59,"props":773,"children":775},{"className":544,"code":774,"language":546,"meta":7,"style":7},"\u003C!-- modalButton.vue -->\n\u003Ctemplate>\n  \u003Cbutton @click=\"modalOpen = true\">Open modal\u003C/button>\n  \u003Cdiv v-if=\"modalOpen\">\n    \u003Cdiv>\n      I am a modal !\n      \u003Cbutton @click=\"modalOpen = false\">Close\u003C/button>\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n",[776],{"type":29,"tag":66,"props":777,"children":778},{"__ignoreMap":7},[779,787,802,857,894,909,917,970,985,1000],{"type":29,"tag":70,"props":780,"children":781},{"class":72,"line":73},[782],{"type":29,"tag":70,"props":783,"children":784},{"style":77},[785],{"type":34,"value":786},"\u003C!-- modalButton.vue -->\n",{"type":29,"tag":70,"props":788,"children":789},{"class":72,"line":83},[790,794,798],{"type":29,"tag":70,"props":791,"children":792},{"style":93},[793],{"type":34,"value":566},{"type":29,"tag":70,"props":795,"children":796},{"style":109},[797],{"type":34,"value":571},{"type":29,"tag":70,"props":799,"children":800},{"style":93},[801],{"type":34,"value":576},{"type":29,"tag":70,"props":803,"children":804},{"class":72,"line":99},[805,809,814,819,823,827,832,836,840,845,849,853],{"type":29,"tag":70,"props":806,"children":807},{"style":93},[808],{"type":34,"value":584},{"type":29,"tag":70,"props":810,"children":811},{"style":109},[812],{"type":34,"value":813},"button",{"type":29,"tag":70,"props":815,"children":816},{"style":371},[817],{"type":34,"value":818}," @click",{"type":29,"tag":70,"props":820,"children":821},{"style":93},[822],{"type":34,"value":616},{"type":29,"tag":70,"props":824,"children":825},{"style":93},[826],{"type":34,"value":621},{"type":29,"tag":70,"props":828,"children":829},{"style":624},[830],{"type":34,"value":831},"modalOpen = true",{"type":29,"tag":70,"props":833,"children":834},{"style":93},[835],{"type":34,"value":621},{"type":29,"tag":70,"props":837,"children":838},{"style":93},[839],{"type":34,"value":653},{"type":29,"tag":70,"props":841,"children":842},{"style":103},[843],{"type":34,"value":844},"Open modal",{"type":29,"tag":70,"props":846,"children":847},{"style":93},[848],{"type":34,"value":663},{"type":29,"tag":70,"props":850,"children":851},{"style":109},[852],{"type":34,"value":813},{"type":29,"tag":70,"props":854,"children":855},{"style":93},[856],{"type":34,"value":576},{"type":29,"tag":70,"props":858,"children":859},{"class":72,"line":115},[860,864,868,873,877,881,886,890],{"type":29,"tag":70,"props":861,"children":862},{"style":93},[863],{"type":34,"value":584},{"type":29,"tag":70,"props":865,"children":866},{"style":109},[867],{"type":34,"value":606},{"type":29,"tag":70,"props":869,"children":870},{"style":371},[871],{"type":34,"value":872}," v-if",{"type":29,"tag":70,"props":874,"children":875},{"style":93},[876],{"type":34,"value":616},{"type":29,"tag":70,"props":878,"children":879},{"style":93},[880],{"type":34,"value":621},{"type":29,"tag":70,"props":882,"children":883},{"style":624},[884],{"type":34,"value":885},"modalOpen",{"type":29,"tag":70,"props":887,"children":888},{"style":93},[889],{"type":34,"value":621},{"type":29,"tag":70,"props":891,"children":892},{"style":93},[893],{"type":34,"value":576},{"type":29,"tag":70,"props":895,"children":896},{"class":72,"line":128},[897,901,905],{"type":29,"tag":70,"props":898,"children":899},{"style":93},[900],{"type":34,"value":601},{"type":29,"tag":70,"props":902,"children":903},{"style":109},[904],{"type":34,"value":606},{"type":29,"tag":70,"props":906,"children":907},{"style":93},[908],{"type":34,"value":576},{"type":29,"tag":70,"props":910,"children":911},{"class":72,"line":137},[912],{"type":29,"tag":70,"props":913,"children":914},{"style":103},[915],{"type":34,"value":916},"      I am a modal !\n",{"type":29,"tag":70,"props":918,"children":919},{"class":72,"line":146},[920,924,928,932,936,940,945,949,953,958,962,966],{"type":29,"tag":70,"props":921,"children":922},{"style":93},[923],{"type":34,"value":643},{"type":29,"tag":70,"props":925,"children":926},{"style":109},[927],{"type":34,"value":813},{"type":29,"tag":70,"props":929,"children":930},{"style":371},[931],{"type":34,"value":818},{"type":29,"tag":70,"props":933,"children":934},{"style":93},[935],{"type":34,"value":616},{"type":29,"tag":70,"props":937,"children":938},{"style":93},[939],{"type":34,"value":621},{"type":29,"tag":70,"props":941,"children":942},{"style":624},[943],{"type":34,"value":944},"modalOpen = false",{"type":29,"tag":70,"props":946,"children":947},{"style":93},[948],{"type":34,"value":621},{"type":29,"tag":70,"props":950,"children":951},{"style":93},[952],{"type":34,"value":653},{"type":29,"tag":70,"props":954,"children":955},{"style":103},[956],{"type":34,"value":957},"Close",{"type":29,"tag":70,"props":959,"children":960},{"style":93},[961],{"type":34,"value":663},{"type":29,"tag":70,"props":963,"children":964},{"style":109},[965],{"type":34,"value":813},{"type":29,"tag":70,"props":967,"children":968},{"style":93},[969],{"type":34,"value":576},{"type":29,"tag":70,"props":971,"children":972},{"class":72,"line":155},[973,977,981],{"type":29,"tag":70,"props":974,"children":975},{"style":93},[976],{"type":34,"value":727},{"type":29,"tag":70,"props":978,"children":979},{"style":109},[980],{"type":34,"value":606},{"type":29,"tag":70,"props":982,"children":983},{"style":93},[984],{"type":34,"value":576},{"type":29,"tag":70,"props":986,"children":987},{"class":72,"line":169},[988,992,996],{"type":29,"tag":70,"props":989,"children":990},{"style":93},[991],{"type":34,"value":743},{"type":29,"tag":70,"props":993,"children":994},{"style":109},[995],{"type":34,"value":606},{"type":29,"tag":70,"props":997,"children":998},{"style":93},[999],{"type":34,"value":576},{"type":29,"tag":70,"props":1001,"children":1002},{"class":72,"line":188},[1003,1007,1011],{"type":29,"tag":70,"props":1004,"children":1005},{"style":93},[1006],{"type":34,"value":663},{"type":29,"tag":70,"props":1008,"children":1009},{"style":109},[1010],{"type":34,"value":571},{"type":29,"tag":70,"props":1012,"children":1013},{"style":93},[1014],{"type":34,"value":576},{"type":29,"tag":30,"props":1016,"children":1017},{},[1018],{"type":34,"value":1019},"Teleport allows us to solve this problem easily by wrapping a modal in a teleport tag and then telling it where to render. It's as simple as that, now our modal will be rendered on the page as a child of the body, allowing it to be placed above the rest of the application on the page.",{"type":29,"tag":59,"props":1021,"children":1023},{"className":544,"code":1022,"language":546,"meta":7,"style":7},"\u003C!-- modalButton.vue -->\n\u003Ctemplate>\n  \u003Cbutton @click=\"modalOpen = true\">Open modal\u003C/button>\n  \u003Cteleport to=\"body\">\n    \u003Cdiv v-if=\"modalOpen\">\n      \u003Cdiv>\n        I am a modal !\n        \u003Cbutton @click=\"modalOpen = false\">Close\u003C/button>\n      \u003C/div>\n    \u003C/div>\n  \u003C/teleport>\n\u003C/template>\n",[1024],{"type":29,"tag":66,"props":1025,"children":1026},{"__ignoreMap":7},[1027,1034,1049,1100,1137,1172,1187,1195,1247,1262,1277,1292],{"type":29,"tag":70,"props":1028,"children":1029},{"class":72,"line":73},[1030],{"type":29,"tag":70,"props":1031,"children":1032},{"style":77},[1033],{"type":34,"value":786},{"type":29,"tag":70,"props":1035,"children":1036},{"class":72,"line":83},[1037,1041,1045],{"type":29,"tag":70,"props":1038,"children":1039},{"style":93},[1040],{"type":34,"value":566},{"type":29,"tag":70,"props":1042,"children":1043},{"style":109},[1044],{"type":34,"value":571},{"type":29,"tag":70,"props":1046,"children":1047},{"style":93},[1048],{"type":34,"value":576},{"type":29,"tag":70,"props":1050,"children":1051},{"class":72,"line":99},[1052,1056,1060,1064,1068,1072,1076,1080,1084,1088,1092,1096],{"type":29,"tag":70,"props":1053,"children":1054},{"style":93},[1055],{"type":34,"value":584},{"type":29,"tag":70,"props":1057,"children":1058},{"style":109},[1059],{"type":34,"value":813},{"type":29,"tag":70,"props":1061,"children":1062},{"style":371},[1063],{"type":34,"value":818},{"type":29,"tag":70,"props":1065,"children":1066},{"style":93},[1067],{"type":34,"value":616},{"type":29,"tag":70,"props":1069,"children":1070},{"style":93},[1071],{"type":34,"value":621},{"type":29,"tag":70,"props":1073,"children":1074},{"style":624},[1075],{"type":34,"value":831},{"type":29,"tag":70,"props":1077,"children":1078},{"style":93},[1079],{"type":34,"value":621},{"type":29,"tag":70,"props":1081,"children":1082},{"style":93},[1083],{"type":34,"value":653},{"type":29,"tag":70,"props":1085,"children":1086},{"style":103},[1087],{"type":34,"value":844},{"type":29,"tag":70,"props":1089,"children":1090},{"style":93},[1091],{"type":34,"value":663},{"type":29,"tag":70,"props":1093,"children":1094},{"style":109},[1095],{"type":34,"value":813},{"type":29,"tag":70,"props":1097,"children":1098},{"style":93},[1099],{"type":34,"value":576},{"type":29,"tag":70,"props":1101,"children":1102},{"class":72,"line":115},[1103,1107,1112,1117,1121,1125,1129,1133],{"type":29,"tag":70,"props":1104,"children":1105},{"style":93},[1106],{"type":34,"value":584},{"type":29,"tag":70,"props":1108,"children":1109},{"style":109},[1110],{"type":34,"value":1111},"teleport",{"type":29,"tag":70,"props":1113,"children":1114},{"style":371},[1115],{"type":34,"value":1116}," to",{"type":29,"tag":70,"props":1118,"children":1119},{"style":93},[1120],{"type":34,"value":616},{"type":29,"tag":70,"props":1122,"children":1123},{"style":93},[1124],{"type":34,"value":621},{"type":29,"tag":70,"props":1126,"children":1127},{"style":624},[1128],{"type":34,"value":589},{"type":29,"tag":70,"props":1130,"children":1131},{"style":93},[1132],{"type":34,"value":621},{"type":29,"tag":70,"props":1134,"children":1135},{"style":93},[1136],{"type":34,"value":576},{"type":29,"tag":70,"props":1138,"children":1139},{"class":72,"line":128},[1140,1144,1148,1152,1156,1160,1164,1168],{"type":29,"tag":70,"props":1141,"children":1142},{"style":93},[1143],{"type":34,"value":601},{"type":29,"tag":70,"props":1145,"children":1146},{"style":109},[1147],{"type":34,"value":606},{"type":29,"tag":70,"props":1149,"children":1150},{"style":371},[1151],{"type":34,"value":872},{"type":29,"tag":70,"props":1153,"children":1154},{"style":93},[1155],{"type":34,"value":616},{"type":29,"tag":70,"props":1157,"children":1158},{"style":93},[1159],{"type":34,"value":621},{"type":29,"tag":70,"props":1161,"children":1162},{"style":624},[1163],{"type":34,"value":885},{"type":29,"tag":70,"props":1165,"children":1166},{"style":93},[1167],{"type":34,"value":621},{"type":29,"tag":70,"props":1169,"children":1170},{"style":93},[1171],{"type":34,"value":576},{"type":29,"tag":70,"props":1173,"children":1174},{"class":72,"line":137},[1175,1179,1183],{"type":29,"tag":70,"props":1176,"children":1177},{"style":93},[1178],{"type":34,"value":643},{"type":29,"tag":70,"props":1180,"children":1181},{"style":109},[1182],{"type":34,"value":606},{"type":29,"tag":70,"props":1184,"children":1185},{"style":93},[1186],{"type":34,"value":576},{"type":29,"tag":70,"props":1188,"children":1189},{"class":72,"line":146},[1190],{"type":29,"tag":70,"props":1191,"children":1192},{"style":103},[1193],{"type":34,"value":1194},"        I am a modal !\n",{"type":29,"tag":70,"props":1196,"children":1197},{"class":72,"line":155},[1198,1203,1207,1211,1215,1219,1223,1227,1231,1235,1239,1243],{"type":29,"tag":70,"props":1199,"children":1200},{"style":93},[1201],{"type":34,"value":1202},"        \u003C",{"type":29,"tag":70,"props":1204,"children":1205},{"style":109},[1206],{"type":34,"value":813},{"type":29,"tag":70,"props":1208,"children":1209},{"style":371},[1210],{"type":34,"value":818},{"type":29,"tag":70,"props":1212,"children":1213},{"style":93},[1214],{"type":34,"value":616},{"type":29,"tag":70,"props":1216,"children":1217},{"style":93},[1218],{"type":34,"value":621},{"type":29,"tag":70,"props":1220,"children":1221},{"style":624},[1222],{"type":34,"value":944},{"type":29,"tag":70,"props":1224,"children":1225},{"style":93},[1226],{"type":34,"value":621},{"type":29,"tag":70,"props":1228,"children":1229},{"style":93},[1230],{"type":34,"value":653},{"type":29,"tag":70,"props":1232,"children":1233},{"style":103},[1234],{"type":34,"value":957},{"type":29,"tag":70,"props":1236,"children":1237},{"style":93},[1238],{"type":34,"value":663},{"type":29,"tag":70,"props":1240,"children":1241},{"style":109},[1242],{"type":34,"value":813},{"type":29,"tag":70,"props":1244,"children":1245},{"style":93},[1246],{"type":34,"value":576},{"type":29,"tag":70,"props":1248,"children":1249},{"class":72,"line":169},[1250,1254,1258],{"type":29,"tag":70,"props":1251,"children":1252},{"style":93},[1253],{"type":34,"value":711},{"type":29,"tag":70,"props":1255,"children":1256},{"style":109},[1257],{"type":34,"value":606},{"type":29,"tag":70,"props":1259,"children":1260},{"style":93},[1261],{"type":34,"value":576},{"type":29,"tag":70,"props":1263,"children":1264},{"class":72,"line":188},[1265,1269,1273],{"type":29,"tag":70,"props":1266,"children":1267},{"style":93},[1268],{"type":34,"value":727},{"type":29,"tag":70,"props":1270,"children":1271},{"style":109},[1272],{"type":34,"value":606},{"type":29,"tag":70,"props":1274,"children":1275},{"style":93},[1276],{"type":34,"value":576},{"type":29,"tag":70,"props":1278,"children":1279},{"class":72,"line":197},[1280,1284,1288],{"type":29,"tag":70,"props":1281,"children":1282},{"style":93},[1283],{"type":34,"value":743},{"type":29,"tag":70,"props":1285,"children":1286},{"style":109},[1287],{"type":34,"value":1111},{"type":29,"tag":70,"props":1289,"children":1290},{"style":93},[1291],{"type":34,"value":576},{"type":29,"tag":70,"props":1293,"children":1294},{"class":72,"line":206},[1295,1299,1303],{"type":29,"tag":70,"props":1296,"children":1297},{"style":93},[1298],{"type":34,"value":663},{"type":29,"tag":70,"props":1300,"children":1301},{"style":109},[1302],{"type":34,"value":571},{"type":29,"tag":70,"props":1304,"children":1305},{"style":93},[1306],{"type":34,"value":576},{"type":29,"tag":47,"props":1308,"children":1310},{"id":1309},"_4-script-setup-experimental",[1311],{"type":34,"value":1312},"4- Script setup (experimental)",{"type":29,"tag":30,"props":1314,"children":1315},{},[1316],{"type":34,"value":1317},"Some new features were announced, but they are still experimental like the script setup property.",{"type":29,"tag":30,"props":1319,"children":1320},{},[1321],{"type":34,"value":1322},"Let take a simple example:",{"type":29,"tag":59,"props":1324,"children":1326},{"className":544,"code":1325,"language":546,"meta":7,"style":7},"\u003Cscript>\n  import { ref } from 'vue';\n  export default {\n    setup() {\n      const count = ref(0);\n      const inc = () => count.value++;\n      return {\n        count,\n        inc,\n      };\n    },\n  };\n\u003C/script>\n",[1327],{"type":29,"tag":66,"props":1328,"children":1329},{"__ignoreMap":7},[1330,1346,1394,1411,1427,1469,1513,1524,1536,1548,1556,1564,1572],{"type":29,"tag":70,"props":1331,"children":1332},{"class":72,"line":73},[1333,1337,1342],{"type":29,"tag":70,"props":1334,"children":1335},{"style":93},[1336],{"type":34,"value":566},{"type":29,"tag":70,"props":1338,"children":1339},{"style":109},[1340],{"type":34,"value":1341},"script",{"type":29,"tag":70,"props":1343,"children":1344},{"style":93},[1345],{"type":34,"value":576},{"type":29,"tag":70,"props":1347,"children":1348},{"class":72,"line":83},[1349,1354,1359,1364,1369,1374,1379,1384,1389],{"type":29,"tag":70,"props":1350,"children":1351},{"style":87},[1352],{"type":34,"value":1353},"  import",{"type":29,"tag":70,"props":1355,"children":1356},{"style":93},[1357],{"type":34,"value":1358}," {",{"type":29,"tag":70,"props":1360,"children":1361},{"style":103},[1362],{"type":34,"value":1363}," ref",{"type":29,"tag":70,"props":1365,"children":1366},{"style":93},[1367],{"type":34,"value":1368}," }",{"type":29,"tag":70,"props":1370,"children":1371},{"style":87},[1372],{"type":34,"value":1373}," from",{"type":29,"tag":70,"props":1375,"children":1376},{"style":93},[1377],{"type":34,"value":1378}," '",{"type":29,"tag":70,"props":1380,"children":1381},{"style":624},[1382],{"type":34,"value":1383},"vue",{"type":29,"tag":70,"props":1385,"children":1386},{"style":93},[1387],{"type":34,"value":1388},"'",{"type":29,"tag":70,"props":1390,"children":1391},{"style":93},[1392],{"type":34,"value":1393},";\n",{"type":29,"tag":70,"props":1395,"children":1396},{"class":72,"line":99},[1397,1402,1407],{"type":29,"tag":70,"props":1398,"children":1399},{"style":87},[1400],{"type":34,"value":1401},"  export",{"type":29,"tag":70,"props":1403,"children":1404},{"style":87},[1405],{"type":34,"value":1406}," default",{"type":29,"tag":70,"props":1408,"children":1409},{"style":93},[1410],{"type":34,"value":96},{"type":29,"tag":70,"props":1412,"children":1413},{"class":72,"line":115},[1414,1419,1423],{"type":29,"tag":70,"props":1415,"children":1416},{"style":109},[1417],{"type":34,"value":1418},"    setup",{"type":29,"tag":70,"props":1420,"children":1421},{"style":93},[1422],{"type":34,"value":324},{"type":29,"tag":70,"props":1424,"children":1425},{"style":93},[1426],{"type":34,"value":96},{"type":29,"tag":70,"props":1428,"children":1429},{"class":72,"line":128},[1430,1435,1440,1445,1449,1454,1460,1465],{"type":29,"tag":70,"props":1431,"children":1432},{"style":371},[1433],{"type":34,"value":1434},"      const",{"type":29,"tag":70,"props":1436,"children":1437},{"style":103},[1438],{"type":34,"value":1439}," count",{"type":29,"tag":70,"props":1441,"children":1442},{"style":93},[1443],{"type":34,"value":1444}," =",{"type":29,"tag":70,"props":1446,"children":1447},{"style":377},[1448],{"type":34,"value":1363},{"type":29,"tag":70,"props":1450,"children":1451},{"style":109},[1452],{"type":34,"value":1453},"(",{"type":29,"tag":70,"props":1455,"children":1457},{"style":1456},"--shiki-default:#F78C6C",[1458],{"type":34,"value":1459},"0",{"type":29,"tag":70,"props":1461,"children":1462},{"style":109},[1463],{"type":34,"value":1464},")",{"type":29,"tag":70,"props":1466,"children":1467},{"style":93},[1468],{"type":34,"value":1393},{"type":29,"tag":70,"props":1470,"children":1471},{"class":72,"line":137},[1472,1476,1481,1485,1490,1495,1499,1503,1508],{"type":29,"tag":70,"props":1473,"children":1474},{"style":371},[1475],{"type":34,"value":1434},{"type":29,"tag":70,"props":1477,"children":1478},{"style":103},[1479],{"type":34,"value":1480}," inc",{"type":29,"tag":70,"props":1482,"children":1483},{"style":93},[1484],{"type":34,"value":1444},{"type":29,"tag":70,"props":1486,"children":1487},{"style":93},[1488],{"type":34,"value":1489}," ()",{"type":29,"tag":70,"props":1491,"children":1492},{"style":371},[1493],{"type":34,"value":1494}," =>",{"type":29,"tag":70,"props":1496,"children":1497},{"style":103},[1498],{"type":34,"value":1439},{"type":29,"tag":70,"props":1500,"children":1501},{"style":93},[1502],{"type":34,"value":525},{"type":29,"tag":70,"props":1504,"children":1505},{"style":103},[1506],{"type":34,"value":1507},"value",{"type":29,"tag":70,"props":1509,"children":1510},{"style":93},[1511],{"type":34,"value":1512},"++;\n",{"type":29,"tag":70,"props":1514,"children":1515},{"class":72,"line":146},[1516,1520],{"type":29,"tag":70,"props":1517,"children":1518},{"style":87},[1519],{"type":34,"value":309},{"type":29,"tag":70,"props":1521,"children":1522},{"style":93},[1523],{"type":34,"value":96},{"type":29,"tag":70,"props":1525,"children":1526},{"class":72,"line":155},[1527,1532],{"type":29,"tag":70,"props":1528,"children":1529},{"style":103},[1530],{"type":34,"value":1531},"        count",{"type":29,"tag":70,"props":1533,"children":1534},{"style":93},[1535],{"type":34,"value":166},{"type":29,"tag":70,"props":1537,"children":1538},{"class":72,"line":169},[1539,1544],{"type":29,"tag":70,"props":1540,"children":1541},{"style":103},[1542],{"type":34,"value":1543},"        inc",{"type":29,"tag":70,"props":1545,"children":1546},{"style":93},[1547],{"type":34,"value":166},{"type":29,"tag":70,"props":1549,"children":1550},{"class":72,"line":188},[1551],{"type":29,"tag":70,"props":1552,"children":1553},{"style":93},[1554],{"type":34,"value":1555},"      };\n",{"type":29,"tag":70,"props":1557,"children":1558},{"class":72,"line":197},[1559],{"type":29,"tag":70,"props":1560,"children":1561},{"style":93},[1562],{"type":34,"value":1563},"    },\n",{"type":29,"tag":70,"props":1565,"children":1566},{"class":72,"line":206},[1567],{"type":29,"tag":70,"props":1568,"children":1569},{"style":93},[1570],{"type":34,"value":1571},"  };\n",{"type":29,"tag":70,"props":1573,"children":1574},{"class":72,"line":215},[1575,1579,1583],{"type":29,"tag":70,"props":1576,"children":1577},{"style":93},[1578],{"type":34,"value":663},{"type":29,"tag":70,"props":1580,"children":1581},{"style":109},[1582],{"type":34,"value":1341},{"type":29,"tag":70,"props":1584,"children":1585},{"style":93},[1586],{"type":34,"value":576},{"type":29,"tag":30,"props":1588,"children":1589},{},[1590],{"type":34,"value":1591},"This code is already clean and straight forward, but with this new property we can simplify it a bit further like this:",{"type":29,"tag":59,"props":1593,"children":1595},{"className":544,"code":1594,"language":546,"meta":7,"style":7},"\u003Cscript setup>\n  import { ref } from 'vue';\n  export const count = ref(0);\n  export const inc = () => count.value++;\n\u003C/script>\n",[1596],{"type":29,"tag":66,"props":1597,"children":1598},{"__ignoreMap":7},[1599,1619,1658,1699,1743],{"type":29,"tag":70,"props":1600,"children":1601},{"class":72,"line":73},[1602,1606,1610,1615],{"type":29,"tag":70,"props":1603,"children":1604},{"style":93},[1605],{"type":34,"value":566},{"type":29,"tag":70,"props":1607,"children":1608},{"style":109},[1609],{"type":34,"value":1341},{"type":29,"tag":70,"props":1611,"children":1612},{"style":371},[1613],{"type":34,"value":1614}," setup",{"type":29,"tag":70,"props":1616,"children":1617},{"style":93},[1618],{"type":34,"value":576},{"type":29,"tag":70,"props":1620,"children":1621},{"class":72,"line":83},[1622,1626,1630,1634,1638,1642,1646,1650,1654],{"type":29,"tag":70,"props":1623,"children":1624},{"style":87},[1625],{"type":34,"value":1353},{"type":29,"tag":70,"props":1627,"children":1628},{"style":93},[1629],{"type":34,"value":1358},{"type":29,"tag":70,"props":1631,"children":1632},{"style":103},[1633],{"type":34,"value":1363},{"type":29,"tag":70,"props":1635,"children":1636},{"style":93},[1637],{"type":34,"value":1368},{"type":29,"tag":70,"props":1639,"children":1640},{"style":87},[1641],{"type":34,"value":1373},{"type":29,"tag":70,"props":1643,"children":1644},{"style":93},[1645],{"type":34,"value":1378},{"type":29,"tag":70,"props":1647,"children":1648},{"style":624},[1649],{"type":34,"value":1383},{"type":29,"tag":70,"props":1651,"children":1652},{"style":93},[1653],{"type":34,"value":1388},{"type":29,"tag":70,"props":1655,"children":1656},{"style":93},[1657],{"type":34,"value":1393},{"type":29,"tag":70,"props":1659,"children":1660},{"class":72,"line":99},[1661,1665,1670,1675,1679,1683,1687,1691,1695],{"type":29,"tag":70,"props":1662,"children":1663},{"style":87},[1664],{"type":34,"value":1401},{"type":29,"tag":70,"props":1666,"children":1667},{"style":371},[1668],{"type":34,"value":1669}," const",{"type":29,"tag":70,"props":1671,"children":1672},{"style":103},[1673],{"type":34,"value":1674}," count ",{"type":29,"tag":70,"props":1676,"children":1677},{"style":93},[1678],{"type":34,"value":616},{"type":29,"tag":70,"props":1680,"children":1681},{"style":377},[1682],{"type":34,"value":1363},{"type":29,"tag":70,"props":1684,"children":1685},{"style":103},[1686],{"type":34,"value":1453},{"type":29,"tag":70,"props":1688,"children":1689},{"style":1456},[1690],{"type":34,"value":1459},{"type":29,"tag":70,"props":1692,"children":1693},{"style":103},[1694],{"type":34,"value":1464},{"type":29,"tag":70,"props":1696,"children":1697},{"style":93},[1698],{"type":34,"value":1393},{"type":29,"tag":70,"props":1700,"children":1701},{"class":72,"line":115},[1702,1706,1710,1715,1719,1723,1727,1731,1735,1739],{"type":29,"tag":70,"props":1703,"children":1704},{"style":87},[1705],{"type":34,"value":1401},{"type":29,"tag":70,"props":1707,"children":1708},{"style":371},[1709],{"type":34,"value":1669},{"type":29,"tag":70,"props":1711,"children":1712},{"style":103},[1713],{"type":34,"value":1714}," inc ",{"type":29,"tag":70,"props":1716,"children":1717},{"style":93},[1718],{"type":34,"value":616},{"type":29,"tag":70,"props":1720,"children":1721},{"style":93},[1722],{"type":34,"value":1489},{"type":29,"tag":70,"props":1724,"children":1725},{"style":371},[1726],{"type":34,"value":1494},{"type":29,"tag":70,"props":1728,"children":1729},{"style":103},[1730],{"type":34,"value":1439},{"type":29,"tag":70,"props":1732,"children":1733},{"style":93},[1734],{"type":34,"value":525},{"type":29,"tag":70,"props":1736,"children":1737},{"style":103},[1738],{"type":34,"value":1507},{"type":29,"tag":70,"props":1740,"children":1741},{"style":93},[1742],{"type":34,"value":1512},{"type":29,"tag":70,"props":1744,"children":1745},{"class":72,"line":128},[1746,1750,1754],{"type":29,"tag":70,"props":1747,"children":1748},{"style":93},[1749],{"type":34,"value":663},{"type":29,"tag":70,"props":1751,"children":1752},{"style":109},[1753],{"type":34,"value":1341},{"type":29,"tag":70,"props":1755,"children":1756},{"style":93},[1757],{"type":34,"value":576},{"type":29,"tag":47,"props":1759,"children":1761},{"id":1760},"_5-style-vars-experimental",[1762],{"type":34,"value":1763},"5- Style vars (experimental)",{"type":29,"tag":30,"props":1765,"children":1766},{},[1767],{"type":34,"value":1768},"Using the vars attribute, allows us to reference css variables that are being generated from our component state.",{"type":29,"tag":59,"props":1770,"children":1772},{"className":544,"code":1771,"language":546,"meta":7,"style":7},"\u003Ctemplate>\n  \u003Cdiv class=\"text\">hello\u003C/div>\n\u003C/template>\n\u003Cscript>\n  export default {\n    data() {\n      return {\n        color: 'red',\n      };\n    },\n  };\n\u003C/script>\n\u003Cstyle vars=\"{ color }\">\n  .text {\n    color: var(--color);\n  }\n\u003C/style>\n",[1773],{"type":29,"tag":66,"props":1774,"children":1775},{"__ignoreMap":7},[1776,1791,1843,1858,1873,1888,1904,1915,1944,1951,1958,1965,1980,2018,2034,2067,2075],{"type":29,"tag":70,"props":1777,"children":1778},{"class":72,"line":73},[1779,1783,1787],{"type":29,"tag":70,"props":1780,"children":1781},{"style":93},[1782],{"type":34,"value":566},{"type":29,"tag":70,"props":1784,"children":1785},{"style":109},[1786],{"type":34,"value":571},{"type":29,"tag":70,"props":1788,"children":1789},{"style":93},[1790],{"type":34,"value":576},{"type":29,"tag":70,"props":1792,"children":1793},{"class":72,"line":83},[1794,1798,1802,1806,1810,1814,1818,1822,1826,1831,1835,1839],{"type":29,"tag":70,"props":1795,"children":1796},{"style":93},[1797],{"type":34,"value":584},{"type":29,"tag":70,"props":1799,"children":1800},{"style":109},[1801],{"type":34,"value":606},{"type":29,"tag":70,"props":1803,"children":1804},{"style":371},[1805],{"type":34,"value":611},{"type":29,"tag":70,"props":1807,"children":1808},{"style":93},[1809],{"type":34,"value":616},{"type":29,"tag":70,"props":1811,"children":1812},{"style":93},[1813],{"type":34,"value":621},{"type":29,"tag":70,"props":1815,"children":1816},{"style":624},[1817],{"type":34,"value":34},{"type":29,"tag":70,"props":1819,"children":1820},{"style":93},[1821],{"type":34,"value":621},{"type":29,"tag":70,"props":1823,"children":1824},{"style":93},[1825],{"type":34,"value":653},{"type":29,"tag":70,"props":1827,"children":1828},{"style":103},[1829],{"type":34,"value":1830},"hello",{"type":29,"tag":70,"props":1832,"children":1833},{"style":93},[1834],{"type":34,"value":663},{"type":29,"tag":70,"props":1836,"children":1837},{"style":109},[1838],{"type":34,"value":606},{"type":29,"tag":70,"props":1840,"children":1841},{"style":93},[1842],{"type":34,"value":576},{"type":29,"tag":70,"props":1844,"children":1845},{"class":72,"line":99},[1846,1850,1854],{"type":29,"tag":70,"props":1847,"children":1848},{"style":93},[1849],{"type":34,"value":663},{"type":29,"tag":70,"props":1851,"children":1852},{"style":109},[1853],{"type":34,"value":571},{"type":29,"tag":70,"props":1855,"children":1856},{"style":93},[1857],{"type":34,"value":576},{"type":29,"tag":70,"props":1859,"children":1860},{"class":72,"line":115},[1861,1865,1869],{"type":29,"tag":70,"props":1862,"children":1863},{"style":93},[1864],{"type":34,"value":566},{"type":29,"tag":70,"props":1866,"children":1867},{"style":109},[1868],{"type":34,"value":1341},{"type":29,"tag":70,"props":1870,"children":1871},{"style":93},[1872],{"type":34,"value":576},{"type":29,"tag":70,"props":1874,"children":1875},{"class":72,"line":128},[1876,1880,1884],{"type":29,"tag":70,"props":1877,"children":1878},{"style":87},[1879],{"type":34,"value":1401},{"type":29,"tag":70,"props":1881,"children":1882},{"style":87},[1883],{"type":34,"value":1406},{"type":29,"tag":70,"props":1885,"children":1886},{"style":93},[1887],{"type":34,"value":96},{"type":29,"tag":70,"props":1889,"children":1890},{"class":72,"line":137},[1891,1896,1900],{"type":29,"tag":70,"props":1892,"children":1893},{"style":109},[1894],{"type":34,"value":1895},"    data",{"type":29,"tag":70,"props":1897,"children":1898},{"style":93},[1899],{"type":34,"value":324},{"type":29,"tag":70,"props":1901,"children":1902},{"style":93},[1903],{"type":34,"value":96},{"type":29,"tag":70,"props":1905,"children":1906},{"class":72,"line":146},[1907,1911],{"type":29,"tag":70,"props":1908,"children":1909},{"style":87},[1910],{"type":34,"value":309},{"type":29,"tag":70,"props":1912,"children":1913},{"style":93},[1914],{"type":34,"value":96},{"type":29,"tag":70,"props":1916,"children":1917},{"class":72,"line":155},[1918,1923,1927,1931,1936,1940],{"type":29,"tag":70,"props":1919,"children":1920},{"style":109},[1921],{"type":34,"value":1922},"        color",{"type":29,"tag":70,"props":1924,"children":1925},{"style":93},[1926],{"type":34,"value":181},{"type":29,"tag":70,"props":1928,"children":1929},{"style":93},[1930],{"type":34,"value":1378},{"type":29,"tag":70,"props":1932,"children":1933},{"style":624},[1934],{"type":34,"value":1935},"red",{"type":29,"tag":70,"props":1937,"children":1938},{"style":93},[1939],{"type":34,"value":1388},{"type":29,"tag":70,"props":1941,"children":1942},{"style":93},[1943],{"type":34,"value":166},{"type":29,"tag":70,"props":1945,"children":1946},{"class":72,"line":169},[1947],{"type":29,"tag":70,"props":1948,"children":1949},{"style":93},[1950],{"type":34,"value":1555},{"type":29,"tag":70,"props":1952,"children":1953},{"class":72,"line":188},[1954],{"type":29,"tag":70,"props":1955,"children":1956},{"style":93},[1957],{"type":34,"value":1563},{"type":29,"tag":70,"props":1959,"children":1960},{"class":72,"line":197},[1961],{"type":29,"tag":70,"props":1962,"children":1963},{"style":93},[1964],{"type":34,"value":1571},{"type":29,"tag":70,"props":1966,"children":1967},{"class":72,"line":206},[1968,1972,1976],{"type":29,"tag":70,"props":1969,"children":1970},{"style":93},[1971],{"type":34,"value":663},{"type":29,"tag":70,"props":1973,"children":1974},{"style":109},[1975],{"type":34,"value":1341},{"type":29,"tag":70,"props":1977,"children":1978},{"style":93},[1979],{"type":34,"value":576},{"type":29,"tag":70,"props":1981,"children":1982},{"class":72,"line":215},[1983,1987,1992,1997,2001,2005,2010,2014],{"type":29,"tag":70,"props":1984,"children":1985},{"style":93},[1986],{"type":34,"value":566},{"type":29,"tag":70,"props":1988,"children":1989},{"style":109},[1990],{"type":34,"value":1991},"style",{"type":29,"tag":70,"props":1993,"children":1994},{"style":371},[1995],{"type":34,"value":1996}," vars",{"type":29,"tag":70,"props":1998,"children":1999},{"style":93},[2000],{"type":34,"value":616},{"type":29,"tag":70,"props":2002,"children":2003},{"style":93},[2004],{"type":34,"value":621},{"type":29,"tag":70,"props":2006,"children":2007},{"style":624},[2008],{"type":34,"value":2009},"{ color }",{"type":29,"tag":70,"props":2011,"children":2012},{"style":93},[2013],{"type":34,"value":621},{"type":29,"tag":70,"props":2015,"children":2016},{"style":93},[2017],{"type":34,"value":576},{"type":29,"tag":70,"props":2019,"children":2020},{"class":72,"line":435},[2021,2026,2030],{"type":29,"tag":70,"props":2022,"children":2023},{"style":93},[2024],{"type":34,"value":2025},"  .",{"type":29,"tag":70,"props":2027,"children":2028},{"style":173},[2029],{"type":34,"value":34},{"type":29,"tag":70,"props":2031,"children":2032},{"style":93},[2033],{"type":34,"value":96},{"type":29,"tag":70,"props":2035,"children":2037},{"class":72,"line":2036},15,[2038,2044,2048,2053,2057,2062],{"type":29,"tag":70,"props":2039,"children":2041},{"style":2040},"--shiki-default:#B2CCD6",[2042],{"type":34,"value":2043},"    color",{"type":29,"tag":70,"props":2045,"children":2046},{"style":93},[2047],{"type":34,"value":181},{"type":29,"tag":70,"props":2049,"children":2050},{"style":377},[2051],{"type":34,"value":2052}," var",{"type":29,"tag":70,"props":2054,"children":2055},{"style":93},[2056],{"type":34,"value":1453},{"type":29,"tag":70,"props":2058,"children":2059},{"style":103},[2060],{"type":34,"value":2061},"--color",{"type":29,"tag":70,"props":2063,"children":2064},{"style":93},[2065],{"type":34,"value":2066},");\n",{"type":29,"tag":70,"props":2068,"children":2070},{"class":72,"line":2069},16,[2071],{"type":29,"tag":70,"props":2072,"children":2073},{"style":93},[2074],{"type":34,"value":212},{"type":29,"tag":70,"props":2076,"children":2078},{"class":72,"line":2077},17,[2079,2083,2087],{"type":29,"tag":70,"props":2080,"children":2081},{"style":93},[2082],{"type":34,"value":663},{"type":29,"tag":70,"props":2084,"children":2085},{"style":109},[2086],{"type":34,"value":1991},{"type":29,"tag":70,"props":2088,"children":2089},{"style":93},[2090],{"type":34,"value":576},{"type":29,"tag":30,"props":2092,"children":2093},{},[2094],{"type":34,"value":2095},"Take a look at this example, this feature now allows us to dynamically update our css stylings using our state logic by referencing the state variable in the vars attribute and then placing that inside a normal css variable reference.",{"type":29,"tag":47,"props":2097,"children":2099},{"id":2098},"_6-final-notes",[2100],{"type":34,"value":2101},"6- Final notes",{"type":29,"tag":30,"props":2103,"children":2104},{},[2105,2107,2114,2116,2123],{"type":34,"value":2106},"And that's it, that's all the major features that have arrived with V3. Of course there are even more changes that we didn't go over in this article, so if you have any more interest in every single tiny little detail that has been changed in Vue 3 go check out ",{"type":29,"tag":516,"props":2108,"children":2111},{"href":2109,"rel":2110},"https://v3.vuejs.org/guide/introduction.html",[520],[2112],{"type":34,"value":2113},"the documentation",{"type":34,"value":2115}," or ",{"type":29,"tag":516,"props":2117,"children":2120},{"href":2118,"rel":2119},"https://github.com/vuejs/vue-next/releases/tag/v3.0.0",[520],[2121],{"type":34,"value":2122},"the v3 release notes",{"type":34,"value":2124}," for a little bit more information.",{"type":29,"tag":1991,"props":2126,"children":2127},{},[2128],{"type":34,"value":2129},"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 .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);}",{"title":7,"searchDepth":83,"depth":83,"links":2131},[2132,2133,2134,2135,2136,2137],{"id":49,"depth":83,"text":52},{"id":453,"depth":83,"text":456},{"id":528,"depth":83,"text":531},{"id":1309,"depth":83,"text":1312},{"id":1760,"depth":83,"text":1763},{"id":2098,"depth":83,"text":2101},"markdown","content:blog:vue.md","content","blog/vue.md","md",1708620390896]