[{"data":1,"prerenderedAt":6542},["Reactive",2],{"content-query-8HoCJ8WNL1":3},[4,1491,2176,2728,3193,3513,5557],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"createdAt":11,"updatedAt":11,"thumbnail":12,"thumbnailMobile":13,"social":14,"author":15,"tags":17,"readingTime":20,"body":25,"_type":1486,"_id":1487,"_source":1488,"_file":1489,"_extension":1490},"/blog/vue-layouts","blog",false,"","Vue custom layouts","Managing layouts efficiently can significantly enhance code organization and maintainability, in this article...","2024-01-26T03:01:50.854Z","/thumb/vue layouts.webp","/thumb/vue layouts mobile.webp","/thumb/vue layouts.jpg",{"name":16},"Zakaria",[18,19],"coding tips","vue tips",{"text":21,"minutes":22,"time":23,"words":24},"2 min read",1.585,95100,317,{"type":26,"children":27,"toc":1480},"root",[28,36,43,48,53,455,460,544,550,555,559,807,811,816,822,827,831,1302,1306,1419,1425,1430,1464,1469,1474],{"type":29,"tag":30,"props":31,"children":32},"element","p",{},[33],{"type":34,"value":35},"text","When building Vue.js applications, managing layouts efficiently can significantly enhance code organization and maintainability. In this article, we'll explore three approaches for implementing custom layouts in Vue 3 and discuss their pros and cons.",{"type":29,"tag":37,"props":38,"children":40},"h2",{"id":39},"basic-slot-based-layouts",[41],{"type":34,"value":42},"Basic Slot-Based Layouts",{"type":29,"tag":30,"props":44,"children":45},{},[46],{"type":34,"value":47},"The first approach involves creating layout components with slots for dynamic content insertion.",{"type":29,"tag":30,"props":49,"children":50},{},[51],{"type":34,"value":52},"Implementation:",{"type":29,"tag":54,"props":55,"children":59},"pre",{"className":56,"code":57,"language":58,"meta":8,"style":8},"language-vue shiki shiki-themes material-theme","\u003C!-- layouts/DashboardLayout.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CMainNav />\n    \u003CSideNav />\n    \u003Cmain>\n      \u003Cslot>\u003C/slot>\n    \u003C/main>\n  \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nimport MainNav from '@/components/MainNav.vue';\nimport SideNav from '@/components/SideNav.vue';\n\nexport default {\n  components: {\n    MainNav,\n    SideNav,\n  },\n};\n\u003C/script>\n","vue",[60],{"type":29,"tag":61,"props":62,"children":63},"code",{"__ignoreMap":8},[64,76,97,115,134,151,168,195,212,229,246,256,273,315,349,357,376,394,408,421,430,439],{"type":29,"tag":65,"props":66,"children":69},"span",{"class":67,"line":68},"line",1,[70],{"type":29,"tag":65,"props":71,"children":73},{"style":72},"--shiki-default:#546E7A;--shiki-default-font-style:italic",[74],{"type":34,"value":75},"\u003C!-- layouts/DashboardLayout.vue -->\n",{"type":29,"tag":65,"props":77,"children":79},{"class":67,"line":78},2,[80,86,92],{"type":29,"tag":65,"props":81,"children":83},{"style":82},"--shiki-default:#89DDFF",[84],{"type":34,"value":85},"\u003C",{"type":29,"tag":65,"props":87,"children":89},{"style":88},"--shiki-default:#F07178",[90],{"type":34,"value":91},"template",{"type":29,"tag":65,"props":93,"children":94},{"style":82},[95],{"type":34,"value":96},">\n",{"type":29,"tag":65,"props":98,"children":100},{"class":67,"line":99},3,[101,106,111],{"type":29,"tag":65,"props":102,"children":103},{"style":82},[104],{"type":34,"value":105},"  \u003C",{"type":29,"tag":65,"props":107,"children":108},{"style":88},[109],{"type":34,"value":110},"div",{"type":29,"tag":65,"props":112,"children":113},{"style":82},[114],{"type":34,"value":96},{"type":29,"tag":65,"props":116,"children":118},{"class":67,"line":117},4,[119,124,129],{"type":29,"tag":65,"props":120,"children":121},{"style":82},[122],{"type":34,"value":123},"    \u003C",{"type":29,"tag":65,"props":125,"children":126},{"style":88},[127],{"type":34,"value":128},"MainNav",{"type":29,"tag":65,"props":130,"children":131},{"style":82},[132],{"type":34,"value":133}," />\n",{"type":29,"tag":65,"props":135,"children":137},{"class":67,"line":136},5,[138,142,147],{"type":29,"tag":65,"props":139,"children":140},{"style":82},[141],{"type":34,"value":123},{"type":29,"tag":65,"props":143,"children":144},{"style":88},[145],{"type":34,"value":146},"SideNav",{"type":29,"tag":65,"props":148,"children":149},{"style":82},[150],{"type":34,"value":133},{"type":29,"tag":65,"props":152,"children":154},{"class":67,"line":153},6,[155,159,164],{"type":29,"tag":65,"props":156,"children":157},{"style":82},[158],{"type":34,"value":123},{"type":29,"tag":65,"props":160,"children":161},{"style":88},[162],{"type":34,"value":163},"main",{"type":29,"tag":65,"props":165,"children":166},{"style":82},[167],{"type":34,"value":96},{"type":29,"tag":65,"props":169,"children":171},{"class":67,"line":170},7,[172,177,182,187,191],{"type":29,"tag":65,"props":173,"children":174},{"style":82},[175],{"type":34,"value":176},"      \u003C",{"type":29,"tag":65,"props":178,"children":179},{"style":88},[180],{"type":34,"value":181},"slot",{"type":29,"tag":65,"props":183,"children":184},{"style":82},[185],{"type":34,"value":186},">\u003C/",{"type":29,"tag":65,"props":188,"children":189},{"style":88},[190],{"type":34,"value":181},{"type":29,"tag":65,"props":192,"children":193},{"style":82},[194],{"type":34,"value":96},{"type":29,"tag":65,"props":196,"children":198},{"class":67,"line":197},8,[199,204,208],{"type":29,"tag":65,"props":200,"children":201},{"style":82},[202],{"type":34,"value":203},"    \u003C/",{"type":29,"tag":65,"props":205,"children":206},{"style":88},[207],{"type":34,"value":163},{"type":29,"tag":65,"props":209,"children":210},{"style":82},[211],{"type":34,"value":96},{"type":29,"tag":65,"props":213,"children":215},{"class":67,"line":214},9,[216,221,225],{"type":29,"tag":65,"props":217,"children":218},{"style":82},[219],{"type":34,"value":220},"  \u003C/",{"type":29,"tag":65,"props":222,"children":223},{"style":88},[224],{"type":34,"value":110},{"type":29,"tag":65,"props":226,"children":227},{"style":82},[228],{"type":34,"value":96},{"type":29,"tag":65,"props":230,"children":232},{"class":67,"line":231},10,[233,238,242],{"type":29,"tag":65,"props":234,"children":235},{"style":82},[236],{"type":34,"value":237},"\u003C/",{"type":29,"tag":65,"props":239,"children":240},{"style":88},[241],{"type":34,"value":91},{"type":29,"tag":65,"props":243,"children":244},{"style":82},[245],{"type":34,"value":96},{"type":29,"tag":65,"props":247,"children":249},{"class":67,"line":248},11,[250],{"type":29,"tag":65,"props":251,"children":253},{"emptyLinePlaceholder":252},true,[254],{"type":34,"value":255},"\n",{"type":29,"tag":65,"props":257,"children":259},{"class":67,"line":258},12,[260,264,269],{"type":29,"tag":65,"props":261,"children":262},{"style":82},[263],{"type":34,"value":85},{"type":29,"tag":65,"props":265,"children":266},{"style":88},[267],{"type":34,"value":268},"script",{"type":29,"tag":65,"props":270,"children":271},{"style":82},[272],{"type":34,"value":96},{"type":29,"tag":65,"props":274,"children":276},{"class":67,"line":275},13,[277,283,289,294,299,305,310],{"type":29,"tag":65,"props":278,"children":280},{"style":279},"--shiki-default:#89DDFF;--shiki-default-font-style:italic",[281],{"type":34,"value":282},"import",{"type":29,"tag":65,"props":284,"children":286},{"style":285},"--shiki-default:#EEFFFF",[287],{"type":34,"value":288}," MainNav ",{"type":29,"tag":65,"props":290,"children":291},{"style":279},[292],{"type":34,"value":293},"from",{"type":29,"tag":65,"props":295,"children":296},{"style":82},[297],{"type":34,"value":298}," '",{"type":29,"tag":65,"props":300,"children":302},{"style":301},"--shiki-default:#C3E88D",[303],{"type":34,"value":304},"@/components/MainNav.vue",{"type":29,"tag":65,"props":306,"children":307},{"style":82},[308],{"type":34,"value":309},"'",{"type":29,"tag":65,"props":311,"children":312},{"style":82},[313],{"type":34,"value":314},";\n",{"type":29,"tag":65,"props":316,"children":318},{"class":67,"line":317},14,[319,323,328,332,336,341,345],{"type":29,"tag":65,"props":320,"children":321},{"style":279},[322],{"type":34,"value":282},{"type":29,"tag":65,"props":324,"children":325},{"style":285},[326],{"type":34,"value":327}," SideNav ",{"type":29,"tag":65,"props":329,"children":330},{"style":279},[331],{"type":34,"value":293},{"type":29,"tag":65,"props":333,"children":334},{"style":82},[335],{"type":34,"value":298},{"type":29,"tag":65,"props":337,"children":338},{"style":301},[339],{"type":34,"value":340},"@/components/SideNav.vue",{"type":29,"tag":65,"props":342,"children":343},{"style":82},[344],{"type":34,"value":309},{"type":29,"tag":65,"props":346,"children":347},{"style":82},[348],{"type":34,"value":314},{"type":29,"tag":65,"props":350,"children":352},{"class":67,"line":351},15,[353],{"type":29,"tag":65,"props":354,"children":355},{"emptyLinePlaceholder":252},[356],{"type":34,"value":255},{"type":29,"tag":65,"props":358,"children":360},{"class":67,"line":359},16,[361,366,371],{"type":29,"tag":65,"props":362,"children":363},{"style":279},[364],{"type":34,"value":365},"export",{"type":29,"tag":65,"props":367,"children":368},{"style":279},[369],{"type":34,"value":370}," default",{"type":29,"tag":65,"props":372,"children":373},{"style":82},[374],{"type":34,"value":375}," {\n",{"type":29,"tag":65,"props":377,"children":379},{"class":67,"line":378},17,[380,385,390],{"type":29,"tag":65,"props":381,"children":382},{"style":88},[383],{"type":34,"value":384},"  components",{"type":29,"tag":65,"props":386,"children":387},{"style":82},[388],{"type":34,"value":389},":",{"type":29,"tag":65,"props":391,"children":392},{"style":82},[393],{"type":34,"value":375},{"type":29,"tag":65,"props":395,"children":397},{"class":67,"line":396},18,[398,403],{"type":29,"tag":65,"props":399,"children":400},{"style":285},[401],{"type":34,"value":402},"    MainNav",{"type":29,"tag":65,"props":404,"children":405},{"style":82},[406],{"type":34,"value":407},",\n",{"type":29,"tag":65,"props":409,"children":411},{"class":67,"line":410},19,[412,417],{"type":29,"tag":65,"props":413,"children":414},{"style":285},[415],{"type":34,"value":416},"    SideNav",{"type":29,"tag":65,"props":418,"children":419},{"style":82},[420],{"type":34,"value":407},{"type":29,"tag":65,"props":422,"children":424},{"class":67,"line":423},20,[425],{"type":29,"tag":65,"props":426,"children":427},{"style":82},[428],{"type":34,"value":429},"  },\n",{"type":29,"tag":65,"props":431,"children":433},{"class":67,"line":432},21,[434],{"type":29,"tag":65,"props":435,"children":436},{"style":82},[437],{"type":34,"value":438},"};\n",{"type":29,"tag":65,"props":440,"children":442},{"class":67,"line":441},22,[443,447,451],{"type":29,"tag":65,"props":444,"children":445},{"style":82},[446],{"type":34,"value":237},{"type":29,"tag":65,"props":448,"children":449},{"style":88},[450],{"type":34,"value":268},{"type":29,"tag":65,"props":452,"children":453},{"style":82},[454],{"type":34,"value":96},{"type":29,"tag":30,"props":456,"children":457},{},[458],{"type":34,"value":459},"Usage:",{"type":29,"tag":54,"props":461,"children":463},{"className":56,"code":462,"language":58,"meta":8,"style":8},"\u003C!-- views/HomeView.vue -->\n\u003Ctemplate>\n  \u003CDashboardLayout>\n    \u003C!-- Your home view content here -->\n  \u003C/DashboardLayout>\n\u003C/template>\n",[464],{"type":29,"tag":61,"props":465,"children":466},{"__ignoreMap":8},[467,475,490,506,514,529],{"type":29,"tag":65,"props":468,"children":469},{"class":67,"line":68},[470],{"type":29,"tag":65,"props":471,"children":472},{"style":72},[473],{"type":34,"value":474},"\u003C!-- views/HomeView.vue -->\n",{"type":29,"tag":65,"props":476,"children":477},{"class":67,"line":78},[478,482,486],{"type":29,"tag":65,"props":479,"children":480},{"style":82},[481],{"type":34,"value":85},{"type":29,"tag":65,"props":483,"children":484},{"style":88},[485],{"type":34,"value":91},{"type":29,"tag":65,"props":487,"children":488},{"style":82},[489],{"type":34,"value":96},{"type":29,"tag":65,"props":491,"children":492},{"class":67,"line":99},[493,497,502],{"type":29,"tag":65,"props":494,"children":495},{"style":82},[496],{"type":34,"value":105},{"type":29,"tag":65,"props":498,"children":499},{"style":88},[500],{"type":34,"value":501},"DashboardLayout",{"type":29,"tag":65,"props":503,"children":504},{"style":82},[505],{"type":34,"value":96},{"type":29,"tag":65,"props":507,"children":508},{"class":67,"line":117},[509],{"type":29,"tag":65,"props":510,"children":511},{"style":72},[512],{"type":34,"value":513},"    \u003C!-- Your home view content here -->\n",{"type":29,"tag":65,"props":515,"children":516},{"class":67,"line":136},[517,521,525],{"type":29,"tag":65,"props":518,"children":519},{"style":82},[520],{"type":34,"value":220},{"type":29,"tag":65,"props":522,"children":523},{"style":88},[524],{"type":34,"value":501},{"type":29,"tag":65,"props":526,"children":527},{"style":82},[528],{"type":34,"value":96},{"type":29,"tag":65,"props":530,"children":531},{"class":67,"line":153},[532,536,540],{"type":29,"tag":65,"props":533,"children":534},{"style":82},[535],{"type":34,"value":237},{"type":29,"tag":65,"props":537,"children":538},{"style":88},[539],{"type":34,"value":91},{"type":29,"tag":65,"props":541,"children":542},{"style":82},[543],{"type":34,"value":96},{"type":29,"tag":37,"props":545,"children":547},{"id":546},"router-based-layouts",[548],{"type":34,"value":549},"Router-Based Layouts",{"type":29,"tag":30,"props":551,"children":552},{},[553],{"type":34,"value":554},"The second approach utilizes router metadata to assign specific layouts to routes.",{"type":29,"tag":30,"props":556,"children":557},{},[558],{"type":34,"value":52},{"type":29,"tag":54,"props":560,"children":564},{"className":561,"code":562,"language":563,"meta":8,"style":8},"language-javascript shiki shiki-themes material-theme","// index.js (Router Configuration)\nconst routes = [\n  {\n    path: '/',\n    component: DefaultLayout,\n    children: [\n      {\n        path: '/',\n        name: 'Home',\n        component: HomeView,\n      },\n    ],\n  },\n  // Define other routes...\n];\n","javascript",[565],{"type":29,"tag":61,"props":566,"children":567},{"__ignoreMap":8},[568,576,600,608,637,658,674,682,710,739,760,768,780,787,795],{"type":29,"tag":65,"props":569,"children":570},{"class":67,"line":68},[571],{"type":29,"tag":65,"props":572,"children":573},{"style":72},[574],{"type":34,"value":575},"// index.js (Router Configuration)\n",{"type":29,"tag":65,"props":577,"children":578},{"class":67,"line":78},[579,585,590,595],{"type":29,"tag":65,"props":580,"children":582},{"style":581},"--shiki-default:#C792EA",[583],{"type":34,"value":584},"const",{"type":29,"tag":65,"props":586,"children":587},{"style":285},[588],{"type":34,"value":589}," routes ",{"type":29,"tag":65,"props":591,"children":592},{"style":82},[593],{"type":34,"value":594},"=",{"type":29,"tag":65,"props":596,"children":597},{"style":285},[598],{"type":34,"value":599}," [\n",{"type":29,"tag":65,"props":601,"children":602},{"class":67,"line":99},[603],{"type":29,"tag":65,"props":604,"children":605},{"style":82},[606],{"type":34,"value":607},"  {\n",{"type":29,"tag":65,"props":609,"children":610},{"class":67,"line":117},[611,616,620,624,629,633],{"type":29,"tag":65,"props":612,"children":613},{"style":88},[614],{"type":34,"value":615},"    path",{"type":29,"tag":65,"props":617,"children":618},{"style":82},[619],{"type":34,"value":389},{"type":29,"tag":65,"props":621,"children":622},{"style":82},[623],{"type":34,"value":298},{"type":29,"tag":65,"props":625,"children":626},{"style":301},[627],{"type":34,"value":628},"/",{"type":29,"tag":65,"props":630,"children":631},{"style":82},[632],{"type":34,"value":309},{"type":29,"tag":65,"props":634,"children":635},{"style":82},[636],{"type":34,"value":407},{"type":29,"tag":65,"props":638,"children":639},{"class":67,"line":136},[640,645,649,654],{"type":29,"tag":65,"props":641,"children":642},{"style":88},[643],{"type":34,"value":644},"    component",{"type":29,"tag":65,"props":646,"children":647},{"style":82},[648],{"type":34,"value":389},{"type":29,"tag":65,"props":650,"children":651},{"style":285},[652],{"type":34,"value":653}," DefaultLayout",{"type":29,"tag":65,"props":655,"children":656},{"style":82},[657],{"type":34,"value":407},{"type":29,"tag":65,"props":659,"children":660},{"class":67,"line":153},[661,666,670],{"type":29,"tag":65,"props":662,"children":663},{"style":88},[664],{"type":34,"value":665},"    children",{"type":29,"tag":65,"props":667,"children":668},{"style":82},[669],{"type":34,"value":389},{"type":29,"tag":65,"props":671,"children":672},{"style":285},[673],{"type":34,"value":599},{"type":29,"tag":65,"props":675,"children":676},{"class":67,"line":170},[677],{"type":29,"tag":65,"props":678,"children":679},{"style":82},[680],{"type":34,"value":681},"      {\n",{"type":29,"tag":65,"props":683,"children":684},{"class":67,"line":197},[685,690,694,698,702,706],{"type":29,"tag":65,"props":686,"children":687},{"style":88},[688],{"type":34,"value":689},"        path",{"type":29,"tag":65,"props":691,"children":692},{"style":82},[693],{"type":34,"value":389},{"type":29,"tag":65,"props":695,"children":696},{"style":82},[697],{"type":34,"value":298},{"type":29,"tag":65,"props":699,"children":700},{"style":301},[701],{"type":34,"value":628},{"type":29,"tag":65,"props":703,"children":704},{"style":82},[705],{"type":34,"value":309},{"type":29,"tag":65,"props":707,"children":708},{"style":82},[709],{"type":34,"value":407},{"type":29,"tag":65,"props":711,"children":712},{"class":67,"line":214},[713,718,722,726,731,735],{"type":29,"tag":65,"props":714,"children":715},{"style":88},[716],{"type":34,"value":717},"        name",{"type":29,"tag":65,"props":719,"children":720},{"style":82},[721],{"type":34,"value":389},{"type":29,"tag":65,"props":723,"children":724},{"style":82},[725],{"type":34,"value":298},{"type":29,"tag":65,"props":727,"children":728},{"style":301},[729],{"type":34,"value":730},"Home",{"type":29,"tag":65,"props":732,"children":733},{"style":82},[734],{"type":34,"value":309},{"type":29,"tag":65,"props":736,"children":737},{"style":82},[738],{"type":34,"value":407},{"type":29,"tag":65,"props":740,"children":741},{"class":67,"line":231},[742,747,751,756],{"type":29,"tag":65,"props":743,"children":744},{"style":88},[745],{"type":34,"value":746},"        component",{"type":29,"tag":65,"props":748,"children":749},{"style":82},[750],{"type":34,"value":389},{"type":29,"tag":65,"props":752,"children":753},{"style":285},[754],{"type":34,"value":755}," HomeView",{"type":29,"tag":65,"props":757,"children":758},{"style":82},[759],{"type":34,"value":407},{"type":29,"tag":65,"props":761,"children":762},{"class":67,"line":248},[763],{"type":29,"tag":65,"props":764,"children":765},{"style":82},[766],{"type":34,"value":767},"      },\n",{"type":29,"tag":65,"props":769,"children":770},{"class":67,"line":258},[771,776],{"type":29,"tag":65,"props":772,"children":773},{"style":285},[774],{"type":34,"value":775},"    ]",{"type":29,"tag":65,"props":777,"children":778},{"style":82},[779],{"type":34,"value":407},{"type":29,"tag":65,"props":781,"children":782},{"class":67,"line":275},[783],{"type":29,"tag":65,"props":784,"children":785},{"style":82},[786],{"type":34,"value":429},{"type":29,"tag":65,"props":788,"children":789},{"class":67,"line":317},[790],{"type":29,"tag":65,"props":791,"children":792},{"style":72},[793],{"type":34,"value":794},"  // Define other routes...\n",{"type":29,"tag":65,"props":796,"children":797},{"class":67,"line":351},[798,803],{"type":29,"tag":65,"props":799,"children":800},{"style":285},[801],{"type":34,"value":802},"]",{"type":29,"tag":65,"props":804,"children":805},{"style":82},[806],{"type":34,"value":314},{"type":29,"tag":30,"props":808,"children":809},{},[810],{"type":34,"value":459},{"type":29,"tag":30,"props":812,"children":813},{},[814],{"type":34,"value":815},"No changes required in component usage.",{"type":29,"tag":37,"props":817,"children":819},{"id":818},"dynamic-layout-selection",[820],{"type":34,"value":821},"Dynamic Layout Selection",{"type":29,"tag":30,"props":823,"children":824},{},[825],{"type":34,"value":826},"The third approach introduces a dynamic layout selector based on route metadata.",{"type":29,"tag":30,"props":828,"children":829},{},[830],{"type":34,"value":52},{"type":29,"tag":54,"props":832,"children":834},{"className":56,"code":833,"language":58,"meta":8,"style":8},"\u003C!-- layouts/TheAppLayout.vue -->\n\u003Ctemplate>\n  \u003Ccomponent :is=\"layout\">\n    \u003Crouter-view />\n  \u003C/component>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\nconst layout = computed(() => {\n  const layout = route?.meta?.layout;\n  return layout ? `The${layout}Layout` : 'div';\n});\n\u003C/script>\n",[835],{"type":29,"tag":61,"props":836,"children":837},{"__ignoreMap":8},[838,846,861,900,916,931,946,953,995,1038,1079,1086,1116,1154,1199,1271,1287],{"type":29,"tag":65,"props":839,"children":840},{"class":67,"line":68},[841],{"type":29,"tag":65,"props":842,"children":843},{"style":72},[844],{"type":34,"value":845},"\u003C!-- layouts/TheAppLayout.vue -->\n",{"type":29,"tag":65,"props":847,"children":848},{"class":67,"line":78},[849,853,857],{"type":29,"tag":65,"props":850,"children":851},{"style":82},[852],{"type":34,"value":85},{"type":29,"tag":65,"props":854,"children":855},{"style":88},[856],{"type":34,"value":91},{"type":29,"tag":65,"props":858,"children":859},{"style":82},[860],{"type":34,"value":96},{"type":29,"tag":65,"props":862,"children":863},{"class":67,"line":99},[864,868,873,878,882,887,892,896],{"type":29,"tag":65,"props":865,"children":866},{"style":82},[867],{"type":34,"value":105},{"type":29,"tag":65,"props":869,"children":870},{"style":88},[871],{"type":34,"value":872},"component",{"type":29,"tag":65,"props":874,"children":875},{"style":581},[876],{"type":34,"value":877}," :is",{"type":29,"tag":65,"props":879,"children":880},{"style":82},[881],{"type":34,"value":594},{"type":29,"tag":65,"props":883,"children":884},{"style":82},[885],{"type":34,"value":886},"\"",{"type":29,"tag":65,"props":888,"children":889},{"style":301},[890],{"type":34,"value":891},"layout",{"type":29,"tag":65,"props":893,"children":894},{"style":82},[895],{"type":34,"value":886},{"type":29,"tag":65,"props":897,"children":898},{"style":82},[899],{"type":34,"value":96},{"type":29,"tag":65,"props":901,"children":902},{"class":67,"line":117},[903,907,912],{"type":29,"tag":65,"props":904,"children":905},{"style":82},[906],{"type":34,"value":123},{"type":29,"tag":65,"props":908,"children":909},{"style":88},[910],{"type":34,"value":911},"router-view",{"type":29,"tag":65,"props":913,"children":914},{"style":82},[915],{"type":34,"value":133},{"type":29,"tag":65,"props":917,"children":918},{"class":67,"line":136},[919,923,927],{"type":29,"tag":65,"props":920,"children":921},{"style":82},[922],{"type":34,"value":220},{"type":29,"tag":65,"props":924,"children":925},{"style":88},[926],{"type":34,"value":872},{"type":29,"tag":65,"props":928,"children":929},{"style":82},[930],{"type":34,"value":96},{"type":29,"tag":65,"props":932,"children":933},{"class":67,"line":153},[934,938,942],{"type":29,"tag":65,"props":935,"children":936},{"style":82},[937],{"type":34,"value":237},{"type":29,"tag":65,"props":939,"children":940},{"style":88},[941],{"type":34,"value":91},{"type":29,"tag":65,"props":943,"children":944},{"style":82},[945],{"type":34,"value":96},{"type":29,"tag":65,"props":947,"children":948},{"class":67,"line":170},[949],{"type":29,"tag":65,"props":950,"children":951},{"emptyLinePlaceholder":252},[952],{"type":34,"value":255},{"type":29,"tag":65,"props":954,"children":955},{"class":67,"line":197},[956,960,964,969,974,978,982,987,991],{"type":29,"tag":65,"props":957,"children":958},{"style":82},[959],{"type":34,"value":85},{"type":29,"tag":65,"props":961,"children":962},{"style":88},[963],{"type":34,"value":268},{"type":29,"tag":65,"props":965,"children":966},{"style":581},[967],{"type":34,"value":968}," setup",{"type":29,"tag":65,"props":970,"children":971},{"style":581},[972],{"type":34,"value":973}," lang",{"type":29,"tag":65,"props":975,"children":976},{"style":82},[977],{"type":34,"value":594},{"type":29,"tag":65,"props":979,"children":980},{"style":82},[981],{"type":34,"value":886},{"type":29,"tag":65,"props":983,"children":984},{"style":301},[985],{"type":34,"value":986},"ts",{"type":29,"tag":65,"props":988,"children":989},{"style":82},[990],{"type":34,"value":886},{"type":29,"tag":65,"props":992,"children":993},{"style":82},[994],{"type":34,"value":96},{"type":29,"tag":65,"props":996,"children":997},{"class":67,"line":214},[998,1002,1007,1012,1017,1022,1026,1030,1034],{"type":29,"tag":65,"props":999,"children":1000},{"style":279},[1001],{"type":34,"value":282},{"type":29,"tag":65,"props":1003,"children":1004},{"style":82},[1005],{"type":34,"value":1006}," {",{"type":29,"tag":65,"props":1008,"children":1009},{"style":285},[1010],{"type":34,"value":1011}," computed",{"type":29,"tag":65,"props":1013,"children":1014},{"style":82},[1015],{"type":34,"value":1016}," }",{"type":29,"tag":65,"props":1018,"children":1019},{"style":279},[1020],{"type":34,"value":1021}," from",{"type":29,"tag":65,"props":1023,"children":1024},{"style":82},[1025],{"type":34,"value":298},{"type":29,"tag":65,"props":1027,"children":1028},{"style":301},[1029],{"type":34,"value":58},{"type":29,"tag":65,"props":1031,"children":1032},{"style":82},[1033],{"type":34,"value":309},{"type":29,"tag":65,"props":1035,"children":1036},{"style":82},[1037],{"type":34,"value":314},{"type":29,"tag":65,"props":1039,"children":1040},{"class":67,"line":231},[1041,1045,1049,1054,1058,1062,1066,1071,1075],{"type":29,"tag":65,"props":1042,"children":1043},{"style":279},[1044],{"type":34,"value":282},{"type":29,"tag":65,"props":1046,"children":1047},{"style":82},[1048],{"type":34,"value":1006},{"type":29,"tag":65,"props":1050,"children":1051},{"style":285},[1052],{"type":34,"value":1053}," useRoute",{"type":29,"tag":65,"props":1055,"children":1056},{"style":82},[1057],{"type":34,"value":1016},{"type":29,"tag":65,"props":1059,"children":1060},{"style":279},[1061],{"type":34,"value":1021},{"type":29,"tag":65,"props":1063,"children":1064},{"style":82},[1065],{"type":34,"value":298},{"type":29,"tag":65,"props":1067,"children":1068},{"style":301},[1069],{"type":34,"value":1070},"vue-router",{"type":29,"tag":65,"props":1072,"children":1073},{"style":82},[1074],{"type":34,"value":309},{"type":29,"tag":65,"props":1076,"children":1077},{"style":82},[1078],{"type":34,"value":314},{"type":29,"tag":65,"props":1080,"children":1081},{"class":67,"line":248},[1082],{"type":29,"tag":65,"props":1083,"children":1084},{"emptyLinePlaceholder":252},[1085],{"type":34,"value":255},{"type":29,"tag":65,"props":1087,"children":1088},{"class":67,"line":258},[1089,1093,1098,1102,1107,1112],{"type":29,"tag":65,"props":1090,"children":1091},{"style":581},[1092],{"type":34,"value":584},{"type":29,"tag":65,"props":1094,"children":1095},{"style":285},[1096],{"type":34,"value":1097}," route ",{"type":29,"tag":65,"props":1099,"children":1100},{"style":82},[1101],{"type":34,"value":594},{"type":29,"tag":65,"props":1103,"children":1105},{"style":1104},"--shiki-default:#82AAFF",[1106],{"type":34,"value":1053},{"type":29,"tag":65,"props":1108,"children":1109},{"style":285},[1110],{"type":34,"value":1111},"()",{"type":29,"tag":65,"props":1113,"children":1114},{"style":82},[1115],{"type":34,"value":314},{"type":29,"tag":65,"props":1117,"children":1118},{"class":67,"line":275},[1119,1123,1128,1132,1136,1141,1145,1150],{"type":29,"tag":65,"props":1120,"children":1121},{"style":581},[1122],{"type":34,"value":584},{"type":29,"tag":65,"props":1124,"children":1125},{"style":285},[1126],{"type":34,"value":1127}," layout ",{"type":29,"tag":65,"props":1129,"children":1130},{"style":82},[1131],{"type":34,"value":594},{"type":29,"tag":65,"props":1133,"children":1134},{"style":1104},[1135],{"type":34,"value":1011},{"type":29,"tag":65,"props":1137,"children":1138},{"style":285},[1139],{"type":34,"value":1140},"(",{"type":29,"tag":65,"props":1142,"children":1143},{"style":82},[1144],{"type":34,"value":1111},{"type":29,"tag":65,"props":1146,"children":1147},{"style":581},[1148],{"type":34,"value":1149}," =>",{"type":29,"tag":65,"props":1151,"children":1152},{"style":82},[1153],{"type":34,"value":375},{"type":29,"tag":65,"props":1155,"children":1156},{"class":67,"line":317},[1157,1162,1167,1172,1177,1182,1187,1191,1195],{"type":29,"tag":65,"props":1158,"children":1159},{"style":581},[1160],{"type":34,"value":1161},"  const",{"type":29,"tag":65,"props":1163,"children":1164},{"style":285},[1165],{"type":34,"value":1166}," layout",{"type":29,"tag":65,"props":1168,"children":1169},{"style":82},[1170],{"type":34,"value":1171}," =",{"type":29,"tag":65,"props":1173,"children":1174},{"style":285},[1175],{"type":34,"value":1176}," route",{"type":29,"tag":65,"props":1178,"children":1179},{"style":82},[1180],{"type":34,"value":1181},"?.",{"type":29,"tag":65,"props":1183,"children":1184},{"style":285},[1185],{"type":34,"value":1186},"meta",{"type":29,"tag":65,"props":1188,"children":1189},{"style":82},[1190],{"type":34,"value":1181},{"type":29,"tag":65,"props":1192,"children":1193},{"style":285},[1194],{"type":34,"value":891},{"type":29,"tag":65,"props":1196,"children":1197},{"style":82},[1198],{"type":34,"value":314},{"type":29,"tag":65,"props":1200,"children":1201},{"class":67,"line":351},[1202,1207,1211,1216,1221,1226,1231,1235,1240,1245,1250,1255,1259,1263,1267],{"type":29,"tag":65,"props":1203,"children":1204},{"style":279},[1205],{"type":34,"value":1206},"  return",{"type":29,"tag":65,"props":1208,"children":1209},{"style":285},[1210],{"type":34,"value":1166},{"type":29,"tag":65,"props":1212,"children":1213},{"style":82},[1214],{"type":34,"value":1215}," ?",{"type":29,"tag":65,"props":1217,"children":1218},{"style":82},[1219],{"type":34,"value":1220}," `",{"type":29,"tag":65,"props":1222,"children":1223},{"style":301},[1224],{"type":34,"value":1225},"The",{"type":29,"tag":65,"props":1227,"children":1228},{"style":82},[1229],{"type":34,"value":1230},"${",{"type":29,"tag":65,"props":1232,"children":1233},{"style":285},[1234],{"type":34,"value":891},{"type":29,"tag":65,"props":1236,"children":1237},{"style":82},[1238],{"type":34,"value":1239},"}",{"type":29,"tag":65,"props":1241,"children":1242},{"style":301},[1243],{"type":34,"value":1244},"Layout",{"type":29,"tag":65,"props":1246,"children":1247},{"style":82},[1248],{"type":34,"value":1249},"`",{"type":29,"tag":65,"props":1251,"children":1252},{"style":82},[1253],{"type":34,"value":1254}," :",{"type":29,"tag":65,"props":1256,"children":1257},{"style":82},[1258],{"type":34,"value":298},{"type":29,"tag":65,"props":1260,"children":1261},{"style":301},[1262],{"type":34,"value":110},{"type":29,"tag":65,"props":1264,"children":1265},{"style":82},[1266],{"type":34,"value":309},{"type":29,"tag":65,"props":1268,"children":1269},{"style":82},[1270],{"type":34,"value":314},{"type":29,"tag":65,"props":1272,"children":1273},{"class":67,"line":359},[1274,1278,1283],{"type":29,"tag":65,"props":1275,"children":1276},{"style":82},[1277],{"type":34,"value":1239},{"type":29,"tag":65,"props":1279,"children":1280},{"style":285},[1281],{"type":34,"value":1282},")",{"type":29,"tag":65,"props":1284,"children":1285},{"style":82},[1286],{"type":34,"value":314},{"type":29,"tag":65,"props":1288,"children":1289},{"class":67,"line":378},[1290,1294,1298],{"type":29,"tag":65,"props":1291,"children":1292},{"style":82},[1293],{"type":34,"value":237},{"type":29,"tag":65,"props":1295,"children":1296},{"style":88},[1297],{"type":34,"value":268},{"type":29,"tag":65,"props":1299,"children":1300},{"style":82},[1301],{"type":34,"value":96},{"type":29,"tag":30,"props":1303,"children":1304},{},[1305],{"type":34,"value":459},{"type":29,"tag":54,"props":1307,"children":1309},{"className":56,"code":1308,"language":58,"meta":8,"style":8},"\u003C!-- src/App.vue -->\n\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003CTheAppLayout />\n  \u003C/div>\n\u003C/template>\n",[1310],{"type":29,"tag":61,"props":1311,"children":1312},{"__ignoreMap":8},[1313,1321,1336,1373,1389,1404],{"type":29,"tag":65,"props":1314,"children":1315},{"class":67,"line":68},[1316],{"type":29,"tag":65,"props":1317,"children":1318},{"style":72},[1319],{"type":34,"value":1320},"\u003C!-- src/App.vue -->\n",{"type":29,"tag":65,"props":1322,"children":1323},{"class":67,"line":78},[1324,1328,1332],{"type":29,"tag":65,"props":1325,"children":1326},{"style":82},[1327],{"type":34,"value":85},{"type":29,"tag":65,"props":1329,"children":1330},{"style":88},[1331],{"type":34,"value":91},{"type":29,"tag":65,"props":1333,"children":1334},{"style":82},[1335],{"type":34,"value":96},{"type":29,"tag":65,"props":1337,"children":1338},{"class":67,"line":99},[1339,1343,1347,1352,1356,1360,1365,1369],{"type":29,"tag":65,"props":1340,"children":1341},{"style":82},[1342],{"type":34,"value":105},{"type":29,"tag":65,"props":1344,"children":1345},{"style":88},[1346],{"type":34,"value":110},{"type":29,"tag":65,"props":1348,"children":1349},{"style":581},[1350],{"type":34,"value":1351}," id",{"type":29,"tag":65,"props":1353,"children":1354},{"style":82},[1355],{"type":34,"value":594},{"type":29,"tag":65,"props":1357,"children":1358},{"style":82},[1359],{"type":34,"value":886},{"type":29,"tag":65,"props":1361,"children":1362},{"style":301},[1363],{"type":34,"value":1364},"app",{"type":29,"tag":65,"props":1366,"children":1367},{"style":82},[1368],{"type":34,"value":886},{"type":29,"tag":65,"props":1370,"children":1371},{"style":82},[1372],{"type":34,"value":96},{"type":29,"tag":65,"props":1374,"children":1375},{"class":67,"line":117},[1376,1380,1385],{"type":29,"tag":65,"props":1377,"children":1378},{"style":82},[1379],{"type":34,"value":123},{"type":29,"tag":65,"props":1381,"children":1382},{"style":88},[1383],{"type":34,"value":1384},"TheAppLayout",{"type":29,"tag":65,"props":1386,"children":1387},{"style":82},[1388],{"type":34,"value":133},{"type":29,"tag":65,"props":1390,"children":1391},{"class":67,"line":136},[1392,1396,1400],{"type":29,"tag":65,"props":1393,"children":1394},{"style":82},[1395],{"type":34,"value":220},{"type":29,"tag":65,"props":1397,"children":1398},{"style":88},[1399],{"type":34,"value":110},{"type":29,"tag":65,"props":1401,"children":1402},{"style":82},[1403],{"type":34,"value":96},{"type":29,"tag":65,"props":1405,"children":1406},{"class":67,"line":153},[1407,1411,1415],{"type":29,"tag":65,"props":1408,"children":1409},{"style":82},[1410],{"type":34,"value":237},{"type":29,"tag":65,"props":1412,"children":1413},{"style":88},[1414],{"type":34,"value":91},{"type":29,"tag":65,"props":1416,"children":1417},{"style":82},[1418],{"type":34,"value":96},{"type":29,"tag":37,"props":1420,"children":1422},{"id":1421},"conclusion",[1423],{"type":34,"value":1424},"Conclusion",{"type":29,"tag":30,"props":1426,"children":1427},{},[1428],{"type":34,"value":1429},"Each approach offers its own advantages:",{"type":29,"tag":1431,"props":1432,"children":1433},"ul",{},[1434,1446,1455],{"type":29,"tag":1435,"props":1436,"children":1437},"li",{},[1438,1444],{"type":29,"tag":1439,"props":1440,"children":1441},"strong",{},[1442],{"type":34,"value":1443},"Slot-Based Layouts",{"type":34,"value":1445},": Simple and direct, suitable for smaller applications or when layout customization is minimal.",{"type":29,"tag":1435,"props":1447,"children":1448},{},[1449,1453],{"type":29,"tag":1439,"props":1450,"children":1451},{},[1452],{"type":34,"value":549},{"type":34,"value":1454},": Provides better organization and scalability, particularly for applications with multiple layouts and complex routing requirements.",{"type":29,"tag":1435,"props":1456,"children":1457},{},[1458,1462],{"type":29,"tag":1439,"props":1459,"children":1460},{},[1461],{"type":34,"value":821},{"type":34,"value":1463},": Offers maximum flexibility by dynamically selecting layouts based on route metadata. Ideal for large-scale applications with varying layout needs.",{"type":29,"tag":30,"props":1465,"children":1466},{},[1467],{"type":34,"value":1468},"Choose the approach that best fits your project requirements and scale. For simpler applications, Approach 1 might suffice, while larger projects may benefit from the more structured Approach 2 or the dynamic capabilities of Approach 3.",{"type":29,"tag":30,"props":1470,"children":1471},{},[1472],{"type":34,"value":1473},"By implementing custom layouts effectively, you can enhance code maintainability and improve the overall user experience of your Vue.js applications.",{"type":29,"tag":1475,"props":1476,"children":1477},"style",{},[1478],{"type":34,"value":1479},"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":8,"searchDepth":78,"depth":78,"links":1481},[1482,1483,1484,1485],{"id":39,"depth":78,"text":42},{"id":546,"depth":78,"text":549},{"id":818,"depth":78,"text":821},{"id":1421,"depth":78,"text":1424},"markdown","content:blog:vue layouts.md","content","blog/vue layouts.md","md",{"_path":1492,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1493,"description":1494,"createdAt":1495,"updatedAt":1495,"thumbnail":1496,"thumbnailMobile":1497,"social":1498,"author":1499,"tags":1500,"readingTime":1502,"body":1507,"_type":1486,"_id":2174,"_source":1488,"_file":2175,"_extension":1490},"/blog/vue-slots","Slots vs Props","Slots in Vue.js give more flexibility than props, so when should we use which ?","2024-01-04T13:02:50.69","/thumb/slots.webp","/thumb/slots mobile.webp","/thumb/slots.jpg",{"name":16},[19,18,1501],"web dev",{"text":1503,"minutes":1504,"time":1505,"words":1506},"1 min read",0.815,48900,163,{"type":26,"children":1508,"toc":2169},[1509,1513,1518,1524,1529,1766,1772,1777,1984,1990,1995,2160,2165],{"type":29,"tag":30,"props":1510,"children":1511},{},[1512],{"type":34,"value":1494},{"type":29,"tag":30,"props":1514,"children":1515},{},[1516],{"type":34,"value":1517},"In general, you should use slots to give the parent the freedom to customize components.\nOn the other hand, you should use props if you have a defined design and need to change some values.",{"type":29,"tag":37,"props":1519,"children":1521},{"id":1520},"_1-props",[1522],{"type":34,"value":1523},"1- Props",{"type":29,"tag":30,"props":1525,"children":1526},{},[1527],{"type":34,"value":1528},"Let's take a quick look at a simple Vue component that accepts a message as property:",{"type":29,"tag":54,"props":1530,"children":1532},{"className":56,"code":1531,"language":58,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>{{ msg }}\u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n  name: 'HelloWorldProps',\n  props: {\n    msg: String,\n  },\n};\n\u003C/script>\n\n\u003Cstyle scoped>\u003C/style>\n",[1533],{"type":29,"tag":61,"props":1534,"children":1535},{"__ignoreMap":8},[1536,1551,1584,1599,1606,1621,1636,1665,1681,1702,1709,1716,1731,1738],{"type":29,"tag":65,"props":1537,"children":1538},{"class":67,"line":68},[1539,1543,1547],{"type":29,"tag":65,"props":1540,"children":1541},{"style":82},[1542],{"type":34,"value":85},{"type":29,"tag":65,"props":1544,"children":1545},{"style":88},[1546],{"type":34,"value":91},{"type":29,"tag":65,"props":1548,"children":1549},{"style":82},[1550],{"type":34,"value":96},{"type":29,"tag":65,"props":1552,"children":1553},{"class":67,"line":78},[1554,1558,1562,1567,1572,1576,1580],{"type":29,"tag":65,"props":1555,"children":1556},{"style":82},[1557],{"type":34,"value":105},{"type":29,"tag":65,"props":1559,"children":1560},{"style":88},[1561],{"type":34,"value":110},{"type":29,"tag":65,"props":1563,"children":1564},{"style":82},[1565],{"type":34,"value":1566},">",{"type":29,"tag":65,"props":1568,"children":1569},{"style":285},[1570],{"type":34,"value":1571},"{{ msg }}",{"type":29,"tag":65,"props":1573,"children":1574},{"style":82},[1575],{"type":34,"value":237},{"type":29,"tag":65,"props":1577,"children":1578},{"style":88},[1579],{"type":34,"value":110},{"type":29,"tag":65,"props":1581,"children":1582},{"style":82},[1583],{"type":34,"value":96},{"type":29,"tag":65,"props":1585,"children":1586},{"class":67,"line":99},[1587,1591,1595],{"type":29,"tag":65,"props":1588,"children":1589},{"style":82},[1590],{"type":34,"value":237},{"type":29,"tag":65,"props":1592,"children":1593},{"style":88},[1594],{"type":34,"value":91},{"type":29,"tag":65,"props":1596,"children":1597},{"style":82},[1598],{"type":34,"value":96},{"type":29,"tag":65,"props":1600,"children":1601},{"class":67,"line":117},[1602],{"type":29,"tag":65,"props":1603,"children":1604},{"emptyLinePlaceholder":252},[1605],{"type":34,"value":255},{"type":29,"tag":65,"props":1607,"children":1608},{"class":67,"line":136},[1609,1613,1617],{"type":29,"tag":65,"props":1610,"children":1611},{"style":82},[1612],{"type":34,"value":85},{"type":29,"tag":65,"props":1614,"children":1615},{"style":88},[1616],{"type":34,"value":268},{"type":29,"tag":65,"props":1618,"children":1619},{"style":82},[1620],{"type":34,"value":96},{"type":29,"tag":65,"props":1622,"children":1623},{"class":67,"line":153},[1624,1628,1632],{"type":29,"tag":65,"props":1625,"children":1626},{"style":279},[1627],{"type":34,"value":365},{"type":29,"tag":65,"props":1629,"children":1630},{"style":279},[1631],{"type":34,"value":370},{"type":29,"tag":65,"props":1633,"children":1634},{"style":82},[1635],{"type":34,"value":375},{"type":29,"tag":65,"props":1637,"children":1638},{"class":67,"line":170},[1639,1644,1648,1652,1657,1661],{"type":29,"tag":65,"props":1640,"children":1641},{"style":88},[1642],{"type":34,"value":1643},"  name",{"type":29,"tag":65,"props":1645,"children":1646},{"style":82},[1647],{"type":34,"value":389},{"type":29,"tag":65,"props":1649,"children":1650},{"style":82},[1651],{"type":34,"value":298},{"type":29,"tag":65,"props":1653,"children":1654},{"style":301},[1655],{"type":34,"value":1656},"HelloWorldProps",{"type":29,"tag":65,"props":1658,"children":1659},{"style":82},[1660],{"type":34,"value":309},{"type":29,"tag":65,"props":1662,"children":1663},{"style":82},[1664],{"type":34,"value":407},{"type":29,"tag":65,"props":1666,"children":1667},{"class":67,"line":197},[1668,1673,1677],{"type":29,"tag":65,"props":1669,"children":1670},{"style":88},[1671],{"type":34,"value":1672},"  props",{"type":29,"tag":65,"props":1674,"children":1675},{"style":82},[1676],{"type":34,"value":389},{"type":29,"tag":65,"props":1678,"children":1679},{"style":82},[1680],{"type":34,"value":375},{"type":29,"tag":65,"props":1682,"children":1683},{"class":67,"line":214},[1684,1689,1693,1698],{"type":29,"tag":65,"props":1685,"children":1686},{"style":88},[1687],{"type":34,"value":1688},"    msg",{"type":29,"tag":65,"props":1690,"children":1691},{"style":82},[1692],{"type":34,"value":389},{"type":29,"tag":65,"props":1694,"children":1695},{"style":285},[1696],{"type":34,"value":1697}," String",{"type":29,"tag":65,"props":1699,"children":1700},{"style":82},[1701],{"type":34,"value":407},{"type":29,"tag":65,"props":1703,"children":1704},{"class":67,"line":231},[1705],{"type":29,"tag":65,"props":1706,"children":1707},{"style":82},[1708],{"type":34,"value":429},{"type":29,"tag":65,"props":1710,"children":1711},{"class":67,"line":248},[1712],{"type":29,"tag":65,"props":1713,"children":1714},{"style":82},[1715],{"type":34,"value":438},{"type":29,"tag":65,"props":1717,"children":1718},{"class":67,"line":258},[1719,1723,1727],{"type":29,"tag":65,"props":1720,"children":1721},{"style":82},[1722],{"type":34,"value":237},{"type":29,"tag":65,"props":1724,"children":1725},{"style":88},[1726],{"type":34,"value":268},{"type":29,"tag":65,"props":1728,"children":1729},{"style":82},[1730],{"type":34,"value":96},{"type":29,"tag":65,"props":1732,"children":1733},{"class":67,"line":275},[1734],{"type":29,"tag":65,"props":1735,"children":1736},{"emptyLinePlaceholder":252},[1737],{"type":34,"value":255},{"type":29,"tag":65,"props":1739,"children":1740},{"class":67,"line":317},[1741,1745,1749,1754,1758,1762],{"type":29,"tag":65,"props":1742,"children":1743},{"style":82},[1744],{"type":34,"value":85},{"type":29,"tag":65,"props":1746,"children":1747},{"style":88},[1748],{"type":34,"value":1475},{"type":29,"tag":65,"props":1750,"children":1751},{"style":581},[1752],{"type":34,"value":1753}," scoped",{"type":29,"tag":65,"props":1755,"children":1756},{"style":82},[1757],{"type":34,"value":186},{"type":29,"tag":65,"props":1759,"children":1760},{"style":88},[1761],{"type":34,"value":1475},{"type":29,"tag":65,"props":1763,"children":1764},{"style":82},[1765],{"type":34,"value":96},{"type":29,"tag":37,"props":1767,"children":1769},{"id":1768},"_2-slots",[1770],{"type":34,"value":1771},"2- Slots",{"type":29,"tag":30,"props":1773,"children":1774},{},[1775],{"type":34,"value":1776},"The following Vue component uses a slot instead of a property to show the message:",{"type":29,"tag":54,"props":1778,"children":1780},{"className":56,"code":1779,"language":58,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\u003Cslot />\u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n  name: 'HelloWorldSlots',\n  props: {},\n};\n\u003C/script>\n\n\u003Cstyle scoped>\u003C/style>\n",[1781],{"type":29,"tag":61,"props":1782,"children":1783},{"__ignoreMap":8},[1784,1799,1832,1847,1854,1869,1884,1912,1928,1935,1950,1957],{"type":29,"tag":65,"props":1785,"children":1786},{"class":67,"line":68},[1787,1791,1795],{"type":29,"tag":65,"props":1788,"children":1789},{"style":82},[1790],{"type":34,"value":85},{"type":29,"tag":65,"props":1792,"children":1793},{"style":88},[1794],{"type":34,"value":91},{"type":29,"tag":65,"props":1796,"children":1797},{"style":82},[1798],{"type":34,"value":96},{"type":29,"tag":65,"props":1800,"children":1801},{"class":67,"line":78},[1802,1806,1810,1815,1819,1824,1828],{"type":29,"tag":65,"props":1803,"children":1804},{"style":82},[1805],{"type":34,"value":105},{"type":29,"tag":65,"props":1807,"children":1808},{"style":88},[1809],{"type":34,"value":110},{"type":29,"tag":65,"props":1811,"children":1812},{"style":82},[1813],{"type":34,"value":1814},">\u003C",{"type":29,"tag":65,"props":1816,"children":1817},{"style":88},[1818],{"type":34,"value":181},{"type":29,"tag":65,"props":1820,"children":1821},{"style":82},[1822],{"type":34,"value":1823}," />\u003C/",{"type":29,"tag":65,"props":1825,"children":1826},{"style":88},[1827],{"type":34,"value":110},{"type":29,"tag":65,"props":1829,"children":1830},{"style":82},[1831],{"type":34,"value":96},{"type":29,"tag":65,"props":1833,"children":1834},{"class":67,"line":99},[1835,1839,1843],{"type":29,"tag":65,"props":1836,"children":1837},{"style":82},[1838],{"type":34,"value":237},{"type":29,"tag":65,"props":1840,"children":1841},{"style":88},[1842],{"type":34,"value":91},{"type":29,"tag":65,"props":1844,"children":1845},{"style":82},[1846],{"type":34,"value":96},{"type":29,"tag":65,"props":1848,"children":1849},{"class":67,"line":117},[1850],{"type":29,"tag":65,"props":1851,"children":1852},{"emptyLinePlaceholder":252},[1853],{"type":34,"value":255},{"type":29,"tag":65,"props":1855,"children":1856},{"class":67,"line":136},[1857,1861,1865],{"type":29,"tag":65,"props":1858,"children":1859},{"style":82},[1860],{"type":34,"value":85},{"type":29,"tag":65,"props":1862,"children":1863},{"style":88},[1864],{"type":34,"value":268},{"type":29,"tag":65,"props":1866,"children":1867},{"style":82},[1868],{"type":34,"value":96},{"type":29,"tag":65,"props":1870,"children":1871},{"class":67,"line":153},[1872,1876,1880],{"type":29,"tag":65,"props":1873,"children":1874},{"style":279},[1875],{"type":34,"value":365},{"type":29,"tag":65,"props":1877,"children":1878},{"style":279},[1879],{"type":34,"value":370},{"type":29,"tag":65,"props":1881,"children":1882},{"style":82},[1883],{"type":34,"value":375},{"type":29,"tag":65,"props":1885,"children":1886},{"class":67,"line":170},[1887,1891,1895,1899,1904,1908],{"type":29,"tag":65,"props":1888,"children":1889},{"style":88},[1890],{"type":34,"value":1643},{"type":29,"tag":65,"props":1892,"children":1893},{"style":82},[1894],{"type":34,"value":389},{"type":29,"tag":65,"props":1896,"children":1897},{"style":82},[1898],{"type":34,"value":298},{"type":29,"tag":65,"props":1900,"children":1901},{"style":301},[1902],{"type":34,"value":1903},"HelloWorldSlots",{"type":29,"tag":65,"props":1905,"children":1906},{"style":82},[1907],{"type":34,"value":309},{"type":29,"tag":65,"props":1909,"children":1910},{"style":82},[1911],{"type":34,"value":407},{"type":29,"tag":65,"props":1913,"children":1914},{"class":67,"line":197},[1915,1919,1923],{"type":29,"tag":65,"props":1916,"children":1917},{"style":88},[1918],{"type":34,"value":1672},{"type":29,"tag":65,"props":1920,"children":1921},{"style":82},[1922],{"type":34,"value":389},{"type":29,"tag":65,"props":1924,"children":1925},{"style":82},[1926],{"type":34,"value":1927}," {},\n",{"type":29,"tag":65,"props":1929,"children":1930},{"class":67,"line":214},[1931],{"type":29,"tag":65,"props":1932,"children":1933},{"style":82},[1934],{"type":34,"value":438},{"type":29,"tag":65,"props":1936,"children":1937},{"class":67,"line":231},[1938,1942,1946],{"type":29,"tag":65,"props":1939,"children":1940},{"style":82},[1941],{"type":34,"value":237},{"type":29,"tag":65,"props":1943,"children":1944},{"style":88},[1945],{"type":34,"value":268},{"type":29,"tag":65,"props":1947,"children":1948},{"style":82},[1949],{"type":34,"value":96},{"type":29,"tag":65,"props":1951,"children":1952},{"class":67,"line":248},[1953],{"type":29,"tag":65,"props":1954,"children":1955},{"emptyLinePlaceholder":252},[1956],{"type":34,"value":255},{"type":29,"tag":65,"props":1958,"children":1959},{"class":67,"line":258},[1960,1964,1968,1972,1976,1980],{"type":29,"tag":65,"props":1961,"children":1962},{"style":82},[1963],{"type":34,"value":85},{"type":29,"tag":65,"props":1965,"children":1966},{"style":88},[1967],{"type":34,"value":1475},{"type":29,"tag":65,"props":1969,"children":1970},{"style":581},[1971],{"type":34,"value":1753},{"type":29,"tag":65,"props":1973,"children":1974},{"style":82},[1975],{"type":34,"value":186},{"type":29,"tag":65,"props":1977,"children":1978},{"style":88},[1979],{"type":34,"value":1475},{"type":29,"tag":65,"props":1981,"children":1982},{"style":82},[1983],{"type":34,"value":96},{"type":29,"tag":37,"props":1985,"children":1987},{"id":1986},"_3-comparison",[1988],{"type":34,"value":1989},"3- Comparison",{"type":29,"tag":30,"props":1991,"children":1992},{},[1993],{"type":34,"value":1994},"The following code shows how both components can be used in your Vue application:",{"type":29,"tag":54,"props":1996,"children":1998},{"className":56,"code":1997,"language":58,"meta":8,"style":8},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CHelloWorldProps msg=\"Welcome to Your Vue.js App\" />\n    \u003CHelloWorldSlots>\n      \u003Ch2>Welcome to Your Vue.js App\u003C/h2>\n    \u003C/HelloWorldSlots>\n  \u003C/div>\n\u003C/template>\n",[1999],{"type":29,"tag":61,"props":2000,"children":2001},{"__ignoreMap":8},[2002,2017,2032,2069,2084,2115,2130,2145],{"type":29,"tag":65,"props":2003,"children":2004},{"class":67,"line":68},[2005,2009,2013],{"type":29,"tag":65,"props":2006,"children":2007},{"style":82},[2008],{"type":34,"value":85},{"type":29,"tag":65,"props":2010,"children":2011},{"style":88},[2012],{"type":34,"value":91},{"type":29,"tag":65,"props":2014,"children":2015},{"style":82},[2016],{"type":34,"value":96},{"type":29,"tag":65,"props":2018,"children":2019},{"class":67,"line":78},[2020,2024,2028],{"type":29,"tag":65,"props":2021,"children":2022},{"style":82},[2023],{"type":34,"value":105},{"type":29,"tag":65,"props":2025,"children":2026},{"style":88},[2027],{"type":34,"value":110},{"type":29,"tag":65,"props":2029,"children":2030},{"style":82},[2031],{"type":34,"value":96},{"type":29,"tag":65,"props":2033,"children":2034},{"class":67,"line":99},[2035,2039,2043,2048,2052,2056,2061,2065],{"type":29,"tag":65,"props":2036,"children":2037},{"style":82},[2038],{"type":34,"value":123},{"type":29,"tag":65,"props":2040,"children":2041},{"style":88},[2042],{"type":34,"value":1656},{"type":29,"tag":65,"props":2044,"children":2045},{"style":581},[2046],{"type":34,"value":2047}," msg",{"type":29,"tag":65,"props":2049,"children":2050},{"style":82},[2051],{"type":34,"value":594},{"type":29,"tag":65,"props":2053,"children":2054},{"style":82},[2055],{"type":34,"value":886},{"type":29,"tag":65,"props":2057,"children":2058},{"style":301},[2059],{"type":34,"value":2060},"Welcome to Your Vue.js App",{"type":29,"tag":65,"props":2062,"children":2063},{"style":82},[2064],{"type":34,"value":886},{"type":29,"tag":65,"props":2066,"children":2067},{"style":82},[2068],{"type":34,"value":133},{"type":29,"tag":65,"props":2070,"children":2071},{"class":67,"line":117},[2072,2076,2080],{"type":29,"tag":65,"props":2073,"children":2074},{"style":82},[2075],{"type":34,"value":123},{"type":29,"tag":65,"props":2077,"children":2078},{"style":88},[2079],{"type":34,"value":1903},{"type":29,"tag":65,"props":2081,"children":2082},{"style":82},[2083],{"type":34,"value":96},{"type":29,"tag":65,"props":2085,"children":2086},{"class":67,"line":136},[2087,2091,2095,2099,2103,2107,2111],{"type":29,"tag":65,"props":2088,"children":2089},{"style":82},[2090],{"type":34,"value":176},{"type":29,"tag":65,"props":2092,"children":2093},{"style":88},[2094],{"type":34,"value":37},{"type":29,"tag":65,"props":2096,"children":2097},{"style":82},[2098],{"type":34,"value":1566},{"type":29,"tag":65,"props":2100,"children":2101},{"style":285},[2102],{"type":34,"value":2060},{"type":29,"tag":65,"props":2104,"children":2105},{"style":82},[2106],{"type":34,"value":237},{"type":29,"tag":65,"props":2108,"children":2109},{"style":88},[2110],{"type":34,"value":37},{"type":29,"tag":65,"props":2112,"children":2113},{"style":82},[2114],{"type":34,"value":96},{"type":29,"tag":65,"props":2116,"children":2117},{"class":67,"line":153},[2118,2122,2126],{"type":29,"tag":65,"props":2119,"children":2120},{"style":82},[2121],{"type":34,"value":203},{"type":29,"tag":65,"props":2123,"children":2124},{"style":88},[2125],{"type":34,"value":1903},{"type":29,"tag":65,"props":2127,"children":2128},{"style":82},[2129],{"type":34,"value":96},{"type":29,"tag":65,"props":2131,"children":2132},{"class":67,"line":170},[2133,2137,2141],{"type":29,"tag":65,"props":2134,"children":2135},{"style":82},[2136],{"type":34,"value":220},{"type":29,"tag":65,"props":2138,"children":2139},{"style":88},[2140],{"type":34,"value":110},{"type":29,"tag":65,"props":2142,"children":2143},{"style":82},[2144],{"type":34,"value":96},{"type":29,"tag":65,"props":2146,"children":2147},{"class":67,"line":197},[2148,2152,2156],{"type":29,"tag":65,"props":2149,"children":2150},{"style":82},[2151],{"type":34,"value":237},{"type":29,"tag":65,"props":2153,"children":2154},{"style":88},[2155],{"type":34,"value":91},{"type":29,"tag":65,"props":2157,"children":2158},{"style":82},[2159],{"type":34,"value":96},{"type":29,"tag":30,"props":2161,"children":2162},{},[2163],{"type":34,"value":2164},"As you can see, the slot provides more flexibility as you can pass any HTML code into the slot.",{"type":29,"tag":1475,"props":2166,"children":2167},{},[2168],{"type":34,"value":1479},{"title":8,"searchDepth":78,"depth":78,"links":2170},[2171,2172,2173],{"id":1520,"depth":78,"text":1523},{"id":1768,"depth":78,"text":1771},{"id":1986,"depth":78,"text":1989},"content:blog:vue slots.md","blog/vue slots.md",{"_path":2177,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2178,"description":2179,"createdAt":2180,"updatedAt":2180,"thumbnail":2181,"thumbnailMobile":2182,"social":2183,"author":2184,"tags":2185,"readingTime":2186,"body":2190,"_type":1486,"_id":2726,"_source":1488,"_file":2727,"_extension":1490},"/blog/vue-slamdunk","What's new in Vue 3.4","Vue.js, the progressive JavaScript framework, takes a significant leap forward with the release of version 3.4...","2023-12-30T13:02:50.69","/thumb/vue 3.4.webp","/thumb/vue 3.4 mobile.webp","/thumb/vue 3.4.jpg",{"name":16},[19,1501],{"text":21,"minutes":2187,"time":2188,"words":2189},1.955,117300,391,{"type":26,"children":2191,"toc":2720},[2192,2197,2203,2208,2213,2219,2224,2610,2615,2621,2633,2639,2644,2702,2716],{"type":29,"tag":30,"props":2193,"children":2194},{},[2195],{"type":34,"value":2196},"Vue.js, the progressive JavaScript framework, takes a significant leap forward with the release of version 3.4, aptly named \"🏀 Slam Dunk.\" This latest iteration introduces a host of powerful features and optimizations, reinforcing Vue's commitment to performance, developer experience, and stability.",{"type":29,"tag":37,"props":2198,"children":2200},{"id":2199},"_1-2x-faster-parser",[2201],{"type":34,"value":2202},"1- 2X Faster Parser",{"type":29,"tag":30,"props":2204,"children":2205},{},[2206],{"type":34,"value":2207},"Vue 3.4 brings forth a groundbreaking enhancement to the template parser, resulting in a remarkable 2x speed boost. The transition from a recursive descent parser to a state-machine tokenizer ensures consistent performance gains for templates of all sizes.",{"type":29,"tag":30,"props":2209,"children":2210},{},[2211],{"type":34,"value":2212},"Notably, this optimization extends to Script and Style Single File Component (SFC) compilation, showcasing a substantial ~44% improvement. Vue 3.4 promises faster builds, making it an exciting update for developers relying on Vue SFCs in their projects.",{"type":29,"tag":37,"props":2214,"children":2216},{"id":2215},"_2-improved-reactivity-system",[2217],{"type":34,"value":2218},"2- Improved Reactivity System",{"type":29,"tag":30,"props":2220,"children":2221},{},[2222],{"type":34,"value":2223},"A substantial refactor of the reactivity system in Vue 3.4 focuses on elevating the efficiency of computed properties. Now, callbacks fire only when the computed result undergoes a change, mitigating unnecessary component re-renders. This optimization extends to scenarios involving multiple computed dependencies and specific array methods, promising a more responsive and performant reactivity system.",{"type":29,"tag":54,"props":2225,"children":2227},{"className":56,"code":2226,"language":58,"meta":8,"style":8},"\u003C!-- Before 3.4 -->\n\u003Ctemplate>\n  \u003Cdiv>{{ isEven }}\u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n  setup() {\n    const count = ref(0);\n    const isEven = computed(() => count.value % 2 === 0);\n\n    watchEffect(() => console.log(isEven.value)); // logs true\n\n    count.value = 2; // logs true again\n  },\n};\n\u003C/script>\n",[2228],{"type":29,"tag":61,"props":2229,"children":2230},{"__ignoreMap":8},[2231,2239,2254,2286,2301,2308,2323,2338,2354,2394,2468,2475,2541,2548,2581,2588,2595],{"type":29,"tag":65,"props":2232,"children":2233},{"class":67,"line":68},[2234],{"type":29,"tag":65,"props":2235,"children":2236},{"style":72},[2237],{"type":34,"value":2238},"\u003C!-- Before 3.4 -->\n",{"type":29,"tag":65,"props":2240,"children":2241},{"class":67,"line":78},[2242,2246,2250],{"type":29,"tag":65,"props":2243,"children":2244},{"style":82},[2245],{"type":34,"value":85},{"type":29,"tag":65,"props":2247,"children":2248},{"style":88},[2249],{"type":34,"value":91},{"type":29,"tag":65,"props":2251,"children":2252},{"style":82},[2253],{"type":34,"value":96},{"type":29,"tag":65,"props":2255,"children":2256},{"class":67,"line":99},[2257,2261,2265,2269,2274,2278,2282],{"type":29,"tag":65,"props":2258,"children":2259},{"style":82},[2260],{"type":34,"value":105},{"type":29,"tag":65,"props":2262,"children":2263},{"style":88},[2264],{"type":34,"value":110},{"type":29,"tag":65,"props":2266,"children":2267},{"style":82},[2268],{"type":34,"value":1566},{"type":29,"tag":65,"props":2270,"children":2271},{"style":285},[2272],{"type":34,"value":2273},"{{ isEven }}",{"type":29,"tag":65,"props":2275,"children":2276},{"style":82},[2277],{"type":34,"value":237},{"type":29,"tag":65,"props":2279,"children":2280},{"style":88},[2281],{"type":34,"value":110},{"type":29,"tag":65,"props":2283,"children":2284},{"style":82},[2285],{"type":34,"value":96},{"type":29,"tag":65,"props":2287,"children":2288},{"class":67,"line":117},[2289,2293,2297],{"type":29,"tag":65,"props":2290,"children":2291},{"style":82},[2292],{"type":34,"value":237},{"type":29,"tag":65,"props":2294,"children":2295},{"style":88},[2296],{"type":34,"value":91},{"type":29,"tag":65,"props":2298,"children":2299},{"style":82},[2300],{"type":34,"value":96},{"type":29,"tag":65,"props":2302,"children":2303},{"class":67,"line":136},[2304],{"type":29,"tag":65,"props":2305,"children":2306},{"emptyLinePlaceholder":252},[2307],{"type":34,"value":255},{"type":29,"tag":65,"props":2309,"children":2310},{"class":67,"line":153},[2311,2315,2319],{"type":29,"tag":65,"props":2312,"children":2313},{"style":82},[2314],{"type":34,"value":85},{"type":29,"tag":65,"props":2316,"children":2317},{"style":88},[2318],{"type":34,"value":268},{"type":29,"tag":65,"props":2320,"children":2321},{"style":82},[2322],{"type":34,"value":96},{"type":29,"tag":65,"props":2324,"children":2325},{"class":67,"line":170},[2326,2330,2334],{"type":29,"tag":65,"props":2327,"children":2328},{"style":279},[2329],{"type":34,"value":365},{"type":29,"tag":65,"props":2331,"children":2332},{"style":279},[2333],{"type":34,"value":370},{"type":29,"tag":65,"props":2335,"children":2336},{"style":82},[2337],{"type":34,"value":375},{"type":29,"tag":65,"props":2339,"children":2340},{"class":67,"line":197},[2341,2346,2350],{"type":29,"tag":65,"props":2342,"children":2343},{"style":88},[2344],{"type":34,"value":2345},"  setup",{"type":29,"tag":65,"props":2347,"children":2348},{"style":82},[2349],{"type":34,"value":1111},{"type":29,"tag":65,"props":2351,"children":2352},{"style":82},[2353],{"type":34,"value":375},{"type":29,"tag":65,"props":2355,"children":2356},{"class":67,"line":214},[2357,2362,2367,2371,2376,2380,2386,2390],{"type":29,"tag":65,"props":2358,"children":2359},{"style":581},[2360],{"type":34,"value":2361},"    const",{"type":29,"tag":65,"props":2363,"children":2364},{"style":285},[2365],{"type":34,"value":2366}," count",{"type":29,"tag":65,"props":2368,"children":2369},{"style":82},[2370],{"type":34,"value":1171},{"type":29,"tag":65,"props":2372,"children":2373},{"style":1104},[2374],{"type":34,"value":2375}," ref",{"type":29,"tag":65,"props":2377,"children":2378},{"style":88},[2379],{"type":34,"value":1140},{"type":29,"tag":65,"props":2381,"children":2383},{"style":2382},"--shiki-default:#F78C6C",[2384],{"type":34,"value":2385},"0",{"type":29,"tag":65,"props":2387,"children":2388},{"style":88},[2389],{"type":34,"value":1282},{"type":29,"tag":65,"props":2391,"children":2392},{"style":82},[2393],{"type":34,"value":314},{"type":29,"tag":65,"props":2395,"children":2396},{"class":67,"line":231},[2397,2401,2406,2410,2414,2418,2422,2426,2430,2435,2440,2445,2450,2455,2460,2464],{"type":29,"tag":65,"props":2398,"children":2399},{"style":581},[2400],{"type":34,"value":2361},{"type":29,"tag":65,"props":2402,"children":2403},{"style":285},[2404],{"type":34,"value":2405}," isEven",{"type":29,"tag":65,"props":2407,"children":2408},{"style":82},[2409],{"type":34,"value":1171},{"type":29,"tag":65,"props":2411,"children":2412},{"style":1104},[2413],{"type":34,"value":1011},{"type":29,"tag":65,"props":2415,"children":2416},{"style":88},[2417],{"type":34,"value":1140},{"type":29,"tag":65,"props":2419,"children":2420},{"style":82},[2421],{"type":34,"value":1111},{"type":29,"tag":65,"props":2423,"children":2424},{"style":581},[2425],{"type":34,"value":1149},{"type":29,"tag":65,"props":2427,"children":2428},{"style":285},[2429],{"type":34,"value":2366},{"type":29,"tag":65,"props":2431,"children":2432},{"style":82},[2433],{"type":34,"value":2434},".",{"type":29,"tag":65,"props":2436,"children":2437},{"style":285},[2438],{"type":34,"value":2439},"value",{"type":29,"tag":65,"props":2441,"children":2442},{"style":82},[2443],{"type":34,"value":2444}," %",{"type":29,"tag":65,"props":2446,"children":2447},{"style":2382},[2448],{"type":34,"value":2449}," 2",{"type":29,"tag":65,"props":2451,"children":2452},{"style":82},[2453],{"type":34,"value":2454}," ===",{"type":29,"tag":65,"props":2456,"children":2457},{"style":2382},[2458],{"type":34,"value":2459}," 0",{"type":29,"tag":65,"props":2461,"children":2462},{"style":88},[2463],{"type":34,"value":1282},{"type":29,"tag":65,"props":2465,"children":2466},{"style":82},[2467],{"type":34,"value":314},{"type":29,"tag":65,"props":2469,"children":2470},{"class":67,"line":248},[2471],{"type":29,"tag":65,"props":2472,"children":2473},{"emptyLinePlaceholder":252},[2474],{"type":34,"value":255},{"type":29,"tag":65,"props":2476,"children":2477},{"class":67,"line":258},[2478,2483,2487,2491,2495,2500,2504,2509,2513,2518,2522,2526,2531,2536],{"type":29,"tag":65,"props":2479,"children":2480},{"style":1104},[2481],{"type":34,"value":2482},"    watchEffect",{"type":29,"tag":65,"props":2484,"children":2485},{"style":88},[2486],{"type":34,"value":1140},{"type":29,"tag":65,"props":2488,"children":2489},{"style":82},[2490],{"type":34,"value":1111},{"type":29,"tag":65,"props":2492,"children":2493},{"style":581},[2494],{"type":34,"value":1149},{"type":29,"tag":65,"props":2496,"children":2497},{"style":285},[2498],{"type":34,"value":2499}," console",{"type":29,"tag":65,"props":2501,"children":2502},{"style":82},[2503],{"type":34,"value":2434},{"type":29,"tag":65,"props":2505,"children":2506},{"style":1104},[2507],{"type":34,"value":2508},"log",{"type":29,"tag":65,"props":2510,"children":2511},{"style":88},[2512],{"type":34,"value":1140},{"type":29,"tag":65,"props":2514,"children":2515},{"style":285},[2516],{"type":34,"value":2517},"isEven",{"type":29,"tag":65,"props":2519,"children":2520},{"style":82},[2521],{"type":34,"value":2434},{"type":29,"tag":65,"props":2523,"children":2524},{"style":285},[2525],{"type":34,"value":2439},{"type":29,"tag":65,"props":2527,"children":2528},{"style":88},[2529],{"type":34,"value":2530},"))",{"type":29,"tag":65,"props":2532,"children":2533},{"style":82},[2534],{"type":34,"value":2535},";",{"type":29,"tag":65,"props":2537,"children":2538},{"style":72},[2539],{"type":34,"value":2540}," // logs true\n",{"type":29,"tag":65,"props":2542,"children":2543},{"class":67,"line":275},[2544],{"type":29,"tag":65,"props":2545,"children":2546},{"emptyLinePlaceholder":252},[2547],{"type":34,"value":255},{"type":29,"tag":65,"props":2549,"children":2550},{"class":67,"line":317},[2551,2556,2560,2564,2568,2572,2576],{"type":29,"tag":65,"props":2552,"children":2553},{"style":285},[2554],{"type":34,"value":2555},"    count",{"type":29,"tag":65,"props":2557,"children":2558},{"style":82},[2559],{"type":34,"value":2434},{"type":29,"tag":65,"props":2561,"children":2562},{"style":285},[2563],{"type":34,"value":2439},{"type":29,"tag":65,"props":2565,"children":2566},{"style":82},[2567],{"type":34,"value":1171},{"type":29,"tag":65,"props":2569,"children":2570},{"style":2382},[2571],{"type":34,"value":2449},{"type":29,"tag":65,"props":2573,"children":2574},{"style":82},[2575],{"type":34,"value":2535},{"type":29,"tag":65,"props":2577,"children":2578},{"style":72},[2579],{"type":34,"value":2580}," // logs true again\n",{"type":29,"tag":65,"props":2582,"children":2583},{"class":67,"line":351},[2584],{"type":29,"tag":65,"props":2585,"children":2586},{"style":82},[2587],{"type":34,"value":429},{"type":29,"tag":65,"props":2589,"children":2590},{"class":67,"line":359},[2591],{"type":29,"tag":65,"props":2592,"children":2593},{"style":82},[2594],{"type":34,"value":438},{"type":29,"tag":65,"props":2596,"children":2597},{"class":67,"line":378},[2598,2602,2606],{"type":29,"tag":65,"props":2599,"children":2600},{"style":82},[2601],{"type":34,"value":237},{"type":29,"tag":65,"props":2603,"children":2604},{"style":88},[2605],{"type":34,"value":268},{"type":29,"tag":65,"props":2607,"children":2608},{"style":82},[2609],{"type":34,"value":96},{"type":29,"tag":30,"props":2611,"children":2612},{},[2613],{"type":34,"value":2614},"Prior to version 3.4, the watchEffect callback would trigger each time the value of count changed, even when the computed result stayed consistent. Following the optimizations implemented in Vue 3.4, the callback is now activated solely when there is an actual change in the computed result.",{"type":29,"tag":37,"props":2616,"children":2618},{"id":2617},"_3-stable-definemodel",[2619],{"type":34,"value":2620},"3- Stable defineModel",{"type":29,"tag":30,"props":2622,"children":2623},{},[2624,2626,2631],{"type":34,"value":2625},"The ",{"type":29,"tag":61,"props":2627,"children":2628},{"className":8},[2629],{"type":34,"value":2630},"defineModel",{"type":34,"value":2632}," macro, initially introduced as an experimental feature in Vue 3.3, has now graduated to stable status in version 3.4. This macro simplifies the implementation of components supporting v-model, offering better support for usage with v-model modifiers. With the stability status, developers can confidently incorporate defineModel into their projects, benefiting from streamlined v-model implementations.",{"type":29,"tag":37,"props":2634,"children":2636},{"id":2635},"_4-same-name-v-bind",[2637],{"type":34,"value":2638},"4- Same name v-bind",{"type":29,"tag":30,"props":2640,"children":2641},{},[2642],{"type":34,"value":2643},"This feature has been frequently requested in the past. Originally, we had concerns about its usage being confused with boolean attributes. However, after revisiting the feature, we now think it makes sense for v-bind to behave a bit more like JavaScript than native attributes, considering its dynamic nature.",{"type":29,"tag":54,"props":2645,"children":2647},{"className":56,"code":2646,"language":58,"meta":8,"style":8},"\u003Cimg :id :src :alt>\n\u003C!-- Nice & Tidy :)-->\n",[2648],{"type":29,"tag":61,"props":2649,"children":2650},{"__ignoreMap":8},[2651,2694],{"type":29,"tag":65,"props":2652,"children":2653},{"class":67,"line":68},[2654,2658,2663,2667,2672,2676,2681,2685,2690],{"type":29,"tag":65,"props":2655,"children":2656},{"style":82},[2657],{"type":34,"value":85},{"type":29,"tag":65,"props":2659,"children":2660},{"style":88},[2661],{"type":34,"value":2662},"img",{"type":29,"tag":65,"props":2664,"children":2665},{"style":82},[2666],{"type":34,"value":1254},{"type":29,"tag":65,"props":2668,"children":2669},{"style":581},[2670],{"type":34,"value":2671},"id",{"type":29,"tag":65,"props":2673,"children":2674},{"style":82},[2675],{"type":34,"value":1254},{"type":29,"tag":65,"props":2677,"children":2678},{"style":581},[2679],{"type":34,"value":2680},"src",{"type":29,"tag":65,"props":2682,"children":2683},{"style":82},[2684],{"type":34,"value":1254},{"type":29,"tag":65,"props":2686,"children":2687},{"style":581},[2688],{"type":34,"value":2689},"alt",{"type":29,"tag":65,"props":2691,"children":2692},{"style":82},[2693],{"type":34,"value":96},{"type":29,"tag":65,"props":2695,"children":2696},{"class":67,"line":78},[2697],{"type":29,"tag":65,"props":2698,"children":2699},{"style":285},[2700],{"type":34,"value":2701},"\u003C!-- Nice & Tidy :)-->\n",{"type":29,"tag":30,"props":2703,"children":2704},{},[2705,2707],{"type":34,"value":2706},"That's it for this article, for more feature you can checkout the official release at: ",{"type":29,"tag":2708,"props":2709,"children":2713},"a",{"href":2710,"rel":2711},"https://blog.vuejs.org/posts/vue-3-4",[2712],"nofollow",[2714],{"type":34,"value":2715},"vue blog",{"type":29,"tag":1475,"props":2717,"children":2718},{},[2719],{"type":34,"value":1479},{"title":8,"searchDepth":78,"depth":78,"links":2721},[2722,2723,2724,2725],{"id":2199,"depth":78,"text":2202},{"id":2215,"depth":78,"text":2218},{"id":2617,"depth":78,"text":2620},{"id":2635,"depth":78,"text":2638},"content:blog:vue slamdunk.md","blog/vue slamdunk.md",{"_path":2729,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2730,"description":2731,"createdAt":2732,"updatedAt":2733,"thumbnail":2734,"thumbnailMobile":2735,"social":2736,"author":2737,"tags":2738,"readingTime":2741,"body":2746,"_type":1486,"_id":3191,"_source":1488,"_file":3192,"_extension":1490},"/blog/scrum","What is scrum","Scrum is a framework within which people can address complex adaptive problems, while productively and creatively...","2021-12-09T03:01:50.854Z","2021-12-10T03:01:50.854Z","/thumb/scrum.webp","/thumb/scrum mobile.webp","/thumb/scrum.jpg",{"name":16},[2739,2740,18],"business","management",{"text":2742,"minutes":2743,"time":2744,"words":2745},"4 min read",3.84,230400,768,{"type":26,"children":2747,"toc":3182},[2748,2753,2758,2764,2769,2777,2782,2788,2808,2813,2818,2824,2829,2834,2839,2852,2858,2863,2869,2874,2925,2931,2943,2948,2967,2973,2978,2984,2989,2995,3000,3005,3011,3016,3021,3044,3049,3055,3060,3074,3114,3118,3123],{"type":29,"tag":30,"props":2749,"children":2750},{},[2751],{"type":34,"value":2752},"Scrum is a method for addressing complex adaptive problems while producing and creating products that are of the greatest value.",{"type":29,"tag":30,"props":2754,"children":2755},{},[2756],{"type":34,"value":2757},"Before talking in more details about scrum, let first talk about 2 approaches when it comes to developing software:",{"type":29,"tag":37,"props":2759,"children":2761},{"id":2760},"_1-waterfall-vs-agile",[2762],{"type":34,"value":2763},"1- Waterfall vs Agile",{"type":29,"tag":30,"props":2765,"children":2766},{},[2767],{"type":34,"value":2768},"Waterfall development is a sequential process through all phases of a project (analysis, design, development, and testing, for example), with each phase completely completed before the next begins.",{"type":29,"tag":2662,"props":2770,"children":2776},{"load":2771,"src":2772,"alt":2773,"className":2774},"lazy","/blog/waterfall.png","waterfall methodology",[2775],"draw",[],{"type":29,"tag":30,"props":2778,"children":2779},{},[2780],{"type":34,"value":2781},"Agile methodologies work by using sprints. A project is divided into groups of small related tasks, then each group is put into a sprint backlog, and then each sprint goes through the development cycle.",{"type":29,"tag":2662,"props":2783,"children":2787},{"load":2771,"src":2784,"alt":2785,"className":2786},"/blog/agile.png","agile methodology",[2775],[],{"type":29,"tag":30,"props":2789,"children":2790},{},[2791,2793,2799,2801,2806],{"type":34,"value":2792},"Agile software development is an umbrella term for a set of frameworks and practices based on the values and principles expressed in the ",{"type":29,"tag":2794,"props":2795,"children":2796},"em",{},[2797],{"type":34,"value":2798},"Manifesto for Agile Software Development",{"type":34,"value":2800}," and the ",{"type":29,"tag":2794,"props":2802,"children":2803},{},[2804],{"type":34,"value":2805},"12 Principles",{"type":34,"value":2807}," behind it.",{"type":29,"tag":30,"props":2809,"children":2810},{},[2811],{"type":34,"value":2812},"When you approach software development in a particular manner, it’s generally good to live by these values and principles and use them to help figure out the right things to do given your particular context.",{"type":29,"tag":30,"props":2814,"children":2815},{},[2816],{"type":34,"value":2817},"The Waterfall methodology's emphasis on upfront planning and management commitment to a certain defined progress means that it is less flexible, or agile, later in the process. If changes come later, it may be hard to adjust. It may be difficult, costly, and time-consuming. Agile attempts to overcome these challenges by doing the opposite.",{"type":29,"tag":37,"props":2819,"children":2821},{"id":2820},"_2-scrum-is-agile",[2822],{"type":34,"value":2823},"2- Scrum is agile",{"type":29,"tag":30,"props":2825,"children":2826},{},[2827],{"type":34,"value":2828},"Ken Schwaber co-developed the Scrum framework with Jeff Sutherland in the early 1990s to help organizations struggling with complex development projects.",{"type":29,"tag":30,"props":2830,"children":2831},{},[2832],{"type":34,"value":2833},"Scrum is one of the most famous methods that adopt Agile development principles. It is highly used across teams nowadays, and people can literally make a whole career out of it.",{"type":29,"tag":30,"props":2835,"children":2836},{},[2837],{"type":34,"value":2838},"In scrum we talk usually about 2 more roles rather than the team itself:",{"type":29,"tag":1431,"props":2840,"children":2841},{},[2842,2847],{"type":29,"tag":1435,"props":2843,"children":2844},{},[2845],{"type":34,"value":2846},"A Product owner: The business is represented by the product owner who tells the development team what is important to deliver.",{"type":29,"tag":1435,"props":2848,"children":2849},{},[2850],{"type":34,"value":2851},"A Scrum master: Responsible for gluing everything together and ensuring that scrum is being done well.",{"type":29,"tag":37,"props":2853,"children":2855},{"id":2854},"_3-how-it-works",[2856],{"type":34,"value":2857},"3- How it works",{"type":29,"tag":30,"props":2859,"children":2860},{},[2861],{"type":34,"value":2862},"Your team will be sharing a scrum board that look like this:",{"type":29,"tag":2662,"props":2864,"children":2868},{"load":2771,"src":2865,"alt":2866,"className":2867},"/blog/scrum board.png","Scrum board",[2775],[],{"type":29,"tag":30,"props":2870,"children":2871},{},[2872],{"type":34,"value":2873},"You will have a daily scrum meeting, it is recommended that this meeting should be:",{"type":29,"tag":1431,"props":2875,"children":2876},{},[2877,2882,2887,2892,2897,2902],{"type":29,"tag":1435,"props":2878,"children":2879},{},[2880],{"type":34,"value":2881},"Time boxed: 15 min",{"type":29,"tag":1435,"props":2883,"children":2884},{},[2885],{"type":34,"value":2886},"Same place",{"type":29,"tag":1435,"props":2888,"children":2889},{},[2890],{"type":34,"value":2891},"Same time",{"type":29,"tag":1435,"props":2893,"children":2894},{},[2895],{"type":34,"value":2896},"Facilitated by scrum master",{"type":29,"tag":1435,"props":2898,"children":2899},{},[2900],{"type":34,"value":2901},"Full team presence",{"type":29,"tag":1435,"props":2903,"children":2904},{},[2905,2907],{"type":34,"value":2906},"Focus on 3 questions:\n",{"type":29,"tag":1431,"props":2908,"children":2909},{},[2910,2915,2920],{"type":29,"tag":1435,"props":2911,"children":2912},{},[2913],{"type":34,"value":2914},"What did I do yesterday ?",{"type":29,"tag":1435,"props":2916,"children":2917},{},[2918],{"type":34,"value":2919},"What I will do today ?",{"type":29,"tag":1435,"props":2921,"children":2922},{},[2923],{"type":34,"value":2924},"What's in my way ?",{"type":29,"tag":37,"props":2926,"children":2928},{"id":2927},"_4-product-backlog",[2929],{"type":34,"value":2930},"4- Product backlog",{"type":29,"tag":30,"props":2932,"children":2933},{},[2934,2936,2941],{"type":34,"value":2935},"A product backlog is a ",{"type":29,"tag":2794,"props":2937,"children":2938},{},[2939],{"type":34,"value":2940},"prioritized list of work for the development team",{"type":34,"value":2942}," that is derived from the roadmap and its requirements. The most important items are shown at the top of the product backlog so the team knows what to deliver first.",{"type":29,"tag":30,"props":2944,"children":2945},{},[2946],{"type":34,"value":2947},"Now let dig into the details of how to write a product backlog: start with the R's.",{"type":29,"tag":30,"props":2949,"children":2950},{},[2951,2953,2958,2960,2965],{"type":34,"value":2952},"A team's ",{"type":29,"tag":1439,"props":2954,"children":2955},{},[2956],{"type":34,"value":2957},"roadmap",{"type":34,"value":2959}," and ",{"type":29,"tag":1439,"props":2961,"children":2962},{},[2963],{"type":34,"value":2964},"requirements",{"type":34,"value":2966}," provide the foundation for the product backlog. Roadmap initiatives break down into several epics, and each epic will have several requirements and user stories.",{"type":29,"tag":2662,"props":2968,"children":2972},{"load":2771,"src":2969,"alt":2970,"className":2971},"/blog/roadmap.png","Project roadmap",[2775],[],{"type":29,"tag":30,"props":2974,"children":2975},{},[2976],{"type":34,"value":2977},"Since the startup website is the first initiative in the roadmap, we'll want to break down that initiative into epics:",{"type":29,"tag":2662,"props":2979,"children":2983},{"load":2771,"src":2980,"alt":2981,"className":2982},"/blog/epics.png","Project epics",[2775],[],{"type":29,"tag":30,"props":2985,"children":2986},{},[2987],{"type":34,"value":2988},"The product owner then organizes each of the user stories into a single list (the product backlog) for the development team.",{"type":29,"tag":37,"props":2990,"children":2992},{"id":2991},"_5-user-stories",[2993],{"type":34,"value":2994},"5- User stories",{"type":29,"tag":30,"props":2996,"children":2997},{},[2998],{"type":34,"value":2999},"A user story is an informal (tickets), general explanation of a software feature written from the perspective of the end user. Its purpose is to articulate how a software feature will provide value to the customer.",{"type":29,"tag":30,"props":3001,"children":3002},{},[3003],{"type":34,"value":3004},"Putting people first is a key component of agile software development. A user story puts the end user at the center of the conversation. These Descriptions use non-technical terms to describe the goal. After reading a user story, the team knows why they are building, what they're building, and what value it brings.",{"type":29,"tag":37,"props":3006,"children":3008},{"id":3007},"_6-sprints",[3009],{"type":34,"value":3010},"6- Sprints",{"type":29,"tag":30,"props":3012,"children":3013},{},[3014],{"type":34,"value":3015},"Sprints allow teams to deliver high-quality products and make projects more manageable with faster and more frequent work, as well as more flexibility to adapt to changes.",{"type":29,"tag":30,"props":3017,"children":3018},{},[3019],{"type":34,"value":3020},"A couple of things to think about when it comes to sprints:",{"type":29,"tag":1431,"props":3022,"children":3023},{},[3024,3029,3034,3039],{"type":29,"tag":1435,"props":3025,"children":3026},{},[3027],{"type":34,"value":3028},"Ensure that the team understands the sprint goal and how success will be measured.",{"type":29,"tag":1435,"props":3030,"children":3031},{},[3032],{"type":34,"value":3033},"Keeping everyone aligned and moving toward a common goal is crucial.",{"type":29,"tag":1435,"props":3035,"children":3036},{},[3037],{"type":34,"value":3038},"Make sure your backlog is well-organized and prioritized according to dependencies.",{"type":29,"tag":1435,"props":3040,"children":3041},{},[3042],{"type":34,"value":3043},"Ensure you understand velocity, and that it reflects things like team meetings and leave.",{"type":29,"tag":30,"props":3045,"children":3046},{},[3047],{"type":34,"value":3048},"⚠️ You shouldn't add too many stories, overestimate velocity, or add too many tasks that will not be completed in a sprint. Don't set yourself or others up for failure.",{"type":29,"tag":37,"props":3050,"children":3052},{"id":3051},"_7-tools-resources",[3053],{"type":34,"value":3054},"7- Tools & Resources",{"type":29,"tag":30,"props":3056,"children":3057},{},[3058],{"type":34,"value":3059},"As a summary, I want you to take from this article, that Agile is a set of principles for project management, while scrum is a framework for getting s*#t done.",{"type":29,"tag":30,"props":3061,"children":3062},{},[3063,3065,3072],{"type":34,"value":3064},"Personally I use ",{"type":29,"tag":2708,"props":3066,"children":3069},{"href":3067,"rel":3068},"https://www.trello.com",[2712],[3070],{"type":34,"value":3071},"trello",{"type":34,"value":3073}," for creating and managing scrum boards, other popular tools are:",{"type":29,"tag":1431,"props":3075,"children":3076},{},[3077,3079,3091,3092,3102,3103],{"type":34,"value":3078},"\n  ",{"type":29,"tag":1435,"props":3080,"children":3081},{},[3082,3084],{"type":34,"value":3083}," ",{"type":29,"tag":2708,"props":3085,"children":3088},{"href":3086,"target":3087},"https://jira.com","_blank",[3089],{"type":34,"value":3090},"Jira ",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3093,"children":3094},{},[3095,3096],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3097,"children":3099},{"href":3098,"target":3087},"https://notion.com",[3100],{"type":34,"value":3101},"Notion",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3104,"children":3105},{},[3106,3107,3113],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3108,"children":3110},{"href":3109,"target":3087},"https://quickscrum.com",[3111],{"type":34,"value":3112},"Quickscrum",{"type":34,"value":3083},{"type":29,"tag":3115,"props":3116,"children":3117},"br",{},[],{"type":29,"tag":30,"props":3119,"children":3120},{},[3121],{"type":34,"value":3122},"I hope you enjoyed this article, for more information about agile development and scrum visit their official resources:",{"type":29,"tag":1431,"props":3124,"children":3125},{},[3126,3127,3137,3138,3148,3149,3159,3160,3170,3171],{"type":34,"value":3078},{"type":29,"tag":1435,"props":3128,"children":3129},{},[3130,3131],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3132,"children":3134},{"href":3133,"target":3087},"https://www.agilealliance.org/agile101/12-principles-behind-the-agile-manifesto/",[3135],{"type":34,"value":3136},"12 principles",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3139,"children":3140},{},[3141,3142],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3143,"children":3145},{"href":3144,"target":3087},"https://www.agilealliance.org/agile101/the-agile-manifesto/",[3146],{"type":34,"value":3147},"Manifesto for Agile Software Development ",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3150,"children":3151},{},[3152,3153],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3154,"children":3156},{"href":3155,"target":3087},"https://www.scrum.org/",[3157],{"type":34,"value":3158},"Scrum ",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3161,"children":3162},{},[3163,3164],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3165,"children":3167},{"href":3166,"target":3087},"https://agilemanifesto.org",[3168],{"type":34,"value":3169},"Agile Manifesto organisation",{"type":34,"value":3078},{"type":29,"tag":1435,"props":3172,"children":3173},{},[3174,3175,3181],{"type":34,"value":3083},{"type":29,"tag":2708,"props":3176,"children":3178},{"href":3177,"target":3087},"https://agilealliance.org",[3179],{"type":34,"value":3180},"Agile Alliance",{"type":34,"value":3083},{"title":8,"searchDepth":78,"depth":78,"links":3183},[3184,3185,3186,3187,3188,3189,3190],{"id":2760,"depth":78,"text":2763},{"id":2820,"depth":78,"text":2823},{"id":2854,"depth":78,"text":2857},{"id":2927,"depth":78,"text":2930},{"id":2991,"depth":78,"text":2994},{"id":3007,"depth":78,"text":3010},{"id":3051,"depth":78,"text":3054},"content:blog:scrum.md","blog/scrum.md",{"_path":3194,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3195,"description":3196,"createdAt":3197,"updatedAt":3197,"thumbnail":3198,"thumbnailMobile":3199,"social":3200,"author":3201,"tags":3202,"readingTime":3204,"body":3208,"_type":1486,"_id":3511,"_source":1488,"_file":3512,"_extension":1490},"/blog/hult","6 Lessons from HULT","The Hult Prize is an annual, year-long competition that crowd-sources ideas from university level students after","2021-10-02T03:01:50.854Z","/thumb/hult.webp","/thumb/hult mobile.webp","/thumb/hult.jpg",{"name":16},[2739,3203],"startup",{"text":2742,"minutes":3205,"time":3206,"words":3207},3.79,227400,758,{"type":26,"children":3209,"toc":3502},[3210,3222,3227,3232,3238,3248,3270,3276,3290,3295,3300,3311,3317,3322,3327,3341,3346,3352,3363,3368,3373,3406,3412,3417,3429,3434,3439,3445,3450,3462,3475,3481,3492,3497],{"type":29,"tag":30,"props":3211,"children":3212},{},[3213,3215,3220],{"type":34,"value":3214},"This year I had the honor to represent Morocco in the finals of the biggest accelerator in the world: ",{"type":29,"tag":1439,"props":3216,"children":3217},{},[3218],{"type":34,"value":3219},"Hult Prize",{"type":34,"value":3221}," that took place in Ashridge castle, London.",{"type":29,"tag":2662,"props":3223,"children":3226},{"load":2771,"src":3224,"alt":3225},"/blog/ashridge.jpg","Ashridge house London",[],{"type":29,"tag":30,"props":3228,"children":3229},{},[3230],{"type":34,"value":3231},"Throughout the 6 weeks program, I learned a lot of lessons about entrepreneurship, funding, and kicking off a startup.",{"type":29,"tag":37,"props":3233,"children":3235},{"id":3234},"_0-introduction",[3236],{"type":34,"value":3237},"0- Introduction",{"type":29,"tag":30,"props":3239,"children":3240},{},[3241,3242,3246],{"type":34,"value":2625},{"type":29,"tag":1439,"props":3243,"children":3244},{},[3245],{"type":34,"value":3219},{"type":34,"value":3247}," is an annual, year-long competition that crowd-sources ideas from university level students after challenging them to solve a pressing social issue around topics such as food security, water access, energy, and education.",{"type":29,"tag":30,"props":3249,"children":3250},{},[3251,3253,3260,3262,3269],{"type":34,"value":3252},"The Prize is a partnership between Hult International Business School and the United Nations Foundation. Former U.S. president ",{"type":29,"tag":2708,"props":3254,"children":3257},{"href":3255,"rel":3256},"https://en.wikipedia.org/wiki/Bill_Clinton",[2712],[3258],{"type":34,"value":3259},"Bill Clinton",{"type":34,"value":3261}," selects the challenge topic and announces the winner each September; The Hult Prize has been referred to as the \"Nobel Prize for students\" by Nobel laureate ",{"type":29,"tag":2708,"props":3263,"children":3266},{"href":3264,"rel":3265},"https://en.wikipedia.org/wiki/Muhammad_Yunus",[2712],[3267],{"type":34,"value":3268},"Muhammad Yunus",{"type":34,"value":2434},{"type":29,"tag":37,"props":3271,"children":3273},{"id":3272},"_1-everything-is-possible",[3274],{"type":34,"value":3275},"1- Everything is possible",{"type":29,"tag":3277,"props":3278,"children":3279},"blockquote",{},[3280],{"type":29,"tag":30,"props":3281,"children":3282},{},[3283,3285],{"type":34,"value":3284},"He who has a why to live can bear almost any how - ",{"type":29,"tag":1439,"props":3286,"children":3287},{},[3288],{"type":34,"value":3289},"Friedrich Nietzsche",{"type":29,"tag":30,"props":3291,"children":3292},{},[3293],{"type":34,"value":3294},"The fact that from 300,000 participants at the start of the year, we have been selected as top 53 teams in the world, was already proof enough that with hard work and perseverance you can achieve anything.",{"type":29,"tag":30,"props":3296,"children":3297},{},[3298],{"type":34,"value":3299},"Add to that, this international event has been organized during the global pandemic. And despite people flying from all over the world to the UK we managed to score 0 Covid cases during the whole 6 weeks (shout-out to the staff for their hard work).",{"type":29,"tag":30,"props":3301,"children":3302},{},[3303,3305,3310],{"type":34,"value":3304},"So my first lesson is that everything is possible, \"whatever you vividly imagine, ardently desire, sincerely believe, and enthusiastically act upon... must inevitably come to pass\" - ",{"type":29,"tag":2794,"props":3306,"children":3307},{},[3308],{"type":34,"value":3309},"The compound effect",{"type":34,"value":2434},{"type":29,"tag":37,"props":3312,"children":3314},{"id":3313},"_2-assumptions",[3315],{"type":34,"value":3316},"2- Assumptions",{"type":29,"tag":30,"props":3318,"children":3319},{},[3320],{"type":34,"value":3321},"When starting a new business we always have assumptions either about the problem, solution, market, or customer. Testing and validating those assumptions is where half of the work occurs.",{"type":29,"tag":30,"props":3323,"children":3324},{},[3325],{"type":34,"value":3326},"The other half is the ability to pivot and change based on what we tested, or maybe completely change/ abandon the idea.",{"type":29,"tag":30,"props":3328,"children":3329},{},[3330,3332,3339],{"type":34,"value":3331},"So no matter how great your product or service is, you need to listen to the market. Our mentor ",{"type":29,"tag":2708,"props":3333,"children":3336},{"href":3334,"rel":3335},"https://www.linkedin.com/in/sweiner/",[2712],[3337],{"type":34,"value":3338},"Mr.Scott Weiner",{"type":34,"value":3340}," always told us: \"people are willing to pay for 2 reasons: you bring them more satisfaction or you remove a pain they are suffering from\".",{"type":29,"tag":30,"props":3342,"children":3343},{},[3344],{"type":34,"value":3345},"And even if what you are offering is fulfilling one of the reasons, there is one more question you need to validate: is it worth it?",{"type":29,"tag":37,"props":3347,"children":3349},{"id":3348},"_3-communication",[3350],{"type":34,"value":3351},"3- Communication",{"type":29,"tag":30,"props":3353,"children":3354},{},[3355,3357,3362],{"type":34,"value":3356},"There is one lesson I learned while pitching our startup to investors: ",{"type":29,"tag":1439,"props":3358,"children":3359},{},[3360],{"type":34,"value":3361},"Show me or it did not happen",{"type":34,"value":2434},{"type":29,"tag":30,"props":3364,"children":3365},{},[3366],{"type":34,"value":3367},"Having a great business is one thing, knowing how to communicate your value, impact and story is another thing. Without good communication (Marketing, Branding, Sales...) no business can succeed.",{"type":29,"tag":30,"props":3369,"children":3370},{},[3371],{"type":34,"value":3372},"Good communication is:",{"type":29,"tag":1431,"props":3374,"children":3375},{},[3376,3386,3396],{"type":29,"tag":1435,"props":3377,"children":3378},{},[3379,3384],{"type":29,"tag":2794,"props":3380,"children":3381},{},[3382],{"type":34,"value":3383},"Short",{"type":34,"value":3385},": Say it in a few words.",{"type":29,"tag":1435,"props":3387,"children":3388},{},[3389,3394],{"type":29,"tag":2794,"props":3390,"children":3391},{},[3392],{"type":34,"value":3393},"Simple",{"type":34,"value":3395},": easy language, no jargon.",{"type":29,"tag":1435,"props":3397,"children":3398},{},[3399,3404],{"type":29,"tag":2794,"props":3400,"children":3401},{},[3402],{"type":34,"value":3403},"Stupid",{"type":34,"value":3405},": A 5 years old should understand it.",{"type":29,"tag":37,"props":3407,"children":3409},{"id":3408},"_4-knowledge",[3410],{"type":34,"value":3411},"4- Knowledge",{"type":29,"tag":30,"props":3413,"children":3414},{},[3415],{"type":34,"value":3416},"We all heard that knowledge is power. But most of the time we limit ourselves because we don't have enough knowledge or skill set which is totally wrong.",{"type":29,"tag":30,"props":3418,"children":3419},{},[3420,3422,3427],{"type":34,"value":3421},"First, everything is ",{"type":29,"tag":1439,"props":3423,"children":3424},{},[3425],{"type":34,"value":3426},"figure-out-able",{"type":34,"value":3428},", all the masters of a certain domain started from zero and made it to the top, so can you!",{"type":29,"tag":30,"props":3430,"children":3431},{},[3432],{"type":34,"value":3433},"Second, you don't need to do it all by yourself: A good businessman will find the right people to complete the tasks he can't do by himself.",{"type":29,"tag":30,"props":3435,"children":3436},{},[3437],{"type":34,"value":3438},"So the real entrepreneur needs to always ask: what is the next thing that I need to know in order to move forward, and then he works on acquiring that knowledge.",{"type":29,"tag":37,"props":3440,"children":3442},{"id":3441},"_5-starts-small",[3443],{"type":34,"value":3444},"5- Starts small",{"type":29,"tag":30,"props":3446,"children":3447},{},[3448],{"type":34,"value":3449},"The one who tries to do everything at once ends up doing nothing. The best thing you can do as a startup is to start small and focus on the very next goal to achieve and target a tiny portion of the market at first, then each milestone will lead you to the next.",{"type":29,"tag":30,"props":3451,"children":3452},{},[3453,3455,3460],{"type":34,"value":3454},"But if you tried to think about each step from the start you will probably do nothing and suffer from what's known as ",{"type":29,"tag":1439,"props":3456,"children":3457},{},[3458],{"type":34,"value":3459},"Analysis paralysis",{"type":34,"value":3461},": inability to decide due to over-thinking a problem.",{"type":29,"tag":3277,"props":3463,"children":3464},{},[3465],{"type":29,"tag":30,"props":3466,"children":3467},{},[3468,3470],{"type":34,"value":3469},"You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. - ",{"type":29,"tag":1439,"props":3471,"children":3472},{},[3473],{"type":34,"value":3474},"Steve jobs",{"type":29,"tag":37,"props":3476,"children":3478},{"id":3477},"_6-a-million-dollar",[3479],{"type":34,"value":3480},"6- A million dollar",{"type":29,"tag":30,"props":3482,"children":3483},{},[3484,3486,3491],{"type":34,"value":3485},"At the beginning of the program, all the startups were motivated by the grand prize of 1 Million Dollars. But after arriving at the castle you can quickly realize that there is something way more important than this: ",{"type":29,"tag":1439,"props":3487,"children":3488},{},[3489],{"type":34,"value":3490},"People",{"type":34,"value":2434},{"type":29,"tag":30,"props":3493,"children":3494},{},[3495],{"type":34,"value":3496},"The experts we met there, the friends we made, the moments we lived together are irreplaceable. Human resources are the real treasure and I will happily say that I am part of the Hult prize family.",{"type":29,"tag":30,"props":3498,"children":3499},{},[3500],{"type":34,"value":3501},"That's it, I hope you find the lessons I shared helpful, and I can't wait to remeet the community again!",{"title":8,"searchDepth":78,"depth":78,"links":3503},[3504,3505,3506,3507,3508,3509,3510],{"id":3234,"depth":78,"text":3237},{"id":3272,"depth":78,"text":3275},{"id":3313,"depth":78,"text":3316},{"id":3348,"depth":78,"text":3351},{"id":3408,"depth":78,"text":3411},{"id":3441,"depth":78,"text":3444},{"id":3477,"depth":78,"text":3480},"content:blog:hult.md","blog/hult.md",{"_path":3514,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3515,"description":3516,"createdAt":3517,"updatedAt":3517,"thumbnail":3518,"thumbnailMobile":3519,"social":3520,"author":3521,"tags":3522,"readingTime":3523,"body":3528,"_type":1486,"_id":5555,"_source":1488,"_file":5556,"_extension":1490},"/blog/vue","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":16},[18,19,1501],{"text":3524,"minutes":3525,"time":3526,"words":3527},"5 min read",4.495,269700,899,{"type":26,"children":3529,"toc":5547},[3530,3535,3540,3545,3551,3556,3692,3697,3702,3720,3725,3903,3908,3913,3919,3924,3929,3935,3940,3981,3987,3992,3997,4208,4213,4456,4461,4748,4754,4759,4764,5010,5015,5180,5186,5191,5509,5514,5520,5543],{"type":29,"tag":30,"props":3531,"children":3532},{},[3533],{"type":34,"value":3534},"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":3536,"children":3537},{},[3538],{"type":34,"value":3539},"In september 2020, a new major release came out: VUE 3.0.",{"type":29,"tag":30,"props":3541,"children":3542},{},[3543],{"type":34,"value":3544},"Let take a look at the new features:",{"type":29,"tag":37,"props":3546,"children":3548},{"id":3547},"_1-composition-api",[3549],{"type":34,"value":3550},"1- Composition API",{"type":29,"tag":30,"props":3552,"children":3553},{},[3554],{"type":34,"value":3555},"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":54,"props":3557,"children":3559},{"className":561,"code":3558,"language":563,"meta":8,"style":8},"// 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",[3560],{"type":29,"tag":61,"props":3561,"children":3562},{"__ignoreMap":8},[3563,3571,3582,3595,3607,3615,3623,3631,3643,3660,3668,3676,3684],{"type":29,"tag":65,"props":3564,"children":3565},{"class":67,"line":68},[3566],{"type":29,"tag":65,"props":3567,"children":3568},{"style":72},[3569],{"type":34,"value":3570},"// Example of a search + sorting component\n",{"type":29,"tag":65,"props":3572,"children":3573},{"class":67,"line":78},[3574,3578],{"type":29,"tag":65,"props":3575,"children":3576},{"style":279},[3577],{"type":34,"value":365},{"type":29,"tag":65,"props":3579,"children":3580},{"style":82},[3581],{"type":34,"value":375},{"type":29,"tag":65,"props":3583,"children":3584},{"class":67,"line":99},[3585,3590],{"type":29,"tag":65,"props":3586,"children":3587},{"style":285},[3588],{"type":34,"value":3589},"  data",{"type":29,"tag":65,"props":3591,"children":3592},{"style":88},[3593],{"type":34,"value":3594},"():{\n",{"type":29,"tag":65,"props":3596,"children":3597},{"class":67,"line":117},[3598,3603],{"type":29,"tag":65,"props":3599,"children":3600},{"style":285},[3601],{"type":34,"value":3602},"    return",{"type":29,"tag":65,"props":3604,"children":3605},{"style":88},[3606],{"type":34,"value":375},{"type":29,"tag":65,"props":3608,"children":3609},{"class":67,"line":136},[3610],{"type":29,"tag":65,"props":3611,"children":3612},{"style":72},[3613],{"type":34,"value":3614},"      // Data for searching\n",{"type":29,"tag":65,"props":3616,"children":3617},{"class":67,"line":153},[3618],{"type":29,"tag":65,"props":3619,"children":3620},{"style":72},[3621],{"type":34,"value":3622},"      // Data for sorting\n",{"type":29,"tag":65,"props":3624,"children":3625},{"class":67,"line":170},[3626],{"type":29,"tag":65,"props":3627,"children":3628},{"style":82},[3629],{"type":34,"value":3630},"    }\n",{"type":29,"tag":65,"props":3632,"children":3633},{"class":67,"line":197},[3634,3639],{"type":29,"tag":65,"props":3635,"children":3636},{"style":285},[3637],{"type":34,"value":3638},"  }",{"type":29,"tag":65,"props":3640,"children":3641},{"style":82},[3642],{"type":34,"value":407},{"type":29,"tag":65,"props":3644,"children":3645},{"class":67,"line":214},[3646,3652,3656],{"type":29,"tag":65,"props":3647,"children":3649},{"style":3648},"--shiki-default:#FFCB6B",[3650],{"type":34,"value":3651},"  methods",{"type":29,"tag":65,"props":3653,"children":3654},{"style":82},[3655],{"type":34,"value":389},{"type":29,"tag":65,"props":3657,"children":3658},{"style":82},[3659],{"type":34,"value":375},{"type":29,"tag":65,"props":3661,"children":3662},{"class":67,"line":231},[3663],{"type":29,"tag":65,"props":3664,"children":3665},{"style":72},[3666],{"type":34,"value":3667},"      // function for search\n",{"type":29,"tag":65,"props":3669,"children":3670},{"class":67,"line":248},[3671],{"type":29,"tag":65,"props":3672,"children":3673},{"style":72},[3674],{"type":34,"value":3675},"      // function for sorting\n",{"type":29,"tag":65,"props":3677,"children":3678},{"class":67,"line":258},[3679],{"type":29,"tag":65,"props":3680,"children":3681},{"style":82},[3682],{"type":34,"value":3683},"  }\n",{"type":29,"tag":65,"props":3685,"children":3686},{"class":67,"line":275},[3687],{"type":29,"tag":65,"props":3688,"children":3689},{"style":285},[3690],{"type":34,"value":3691},"}\n",{"type":29,"tag":30,"props":3693,"children":3694},{},[3695],{"type":34,"value":3696},"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":3698,"children":3699},{},[3700],{"type":34,"value":3701},"And while this is feels nice and intuitive, VUE 2 have 3 main problems:",{"type":29,"tag":1431,"props":3703,"children":3704},{},[3705,3710,3715],{"type":29,"tag":1435,"props":3706,"children":3707},{},[3708],{"type":34,"value":3709},"First is as your components grow and get bigger, they become less readable and therefore less maintainable.",{"type":29,"tag":1435,"props":3711,"children":3712},{},[3713],{"type":34,"value":3714},"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":1435,"props":3716,"children":3717},{},[3718],{"type":34,"value":3719},"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":3721,"children":3722},{},[3723],{"type":34,"value":3724},"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":54,"props":3726,"children":3728},{"className":561,"code":3727,"language":563,"meta":8,"style":8},"// 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",[3729],{"type":29,"tag":61,"props":3730,"children":3731},{"__ignoreMap":8},[3732,3739,3750,3761,3769,3814,3821,3832,3850,3858,3865,3881,3889,3896],{"type":29,"tag":65,"props":3733,"children":3734},{"class":67,"line":68},[3735],{"type":29,"tag":65,"props":3736,"children":3737},{"style":72},[3738],{"type":34,"value":3570},{"type":29,"tag":65,"props":3740,"children":3741},{"class":67,"line":78},[3742,3746],{"type":29,"tag":65,"props":3743,"children":3744},{"style":279},[3745],{"type":34,"value":365},{"type":29,"tag":65,"props":3747,"children":3748},{"style":82},[3749],{"type":34,"value":375},{"type":29,"tag":65,"props":3751,"children":3752},{"class":67,"line":99},[3753,3757],{"type":29,"tag":65,"props":3754,"children":3755},{"style":285},[3756],{"type":34,"value":2345},{"type":29,"tag":65,"props":3758,"children":3759},{"style":88},[3760],{"type":34,"value":3594},{"type":29,"tag":65,"props":3762,"children":3763},{"class":67,"line":117},[3764],{"type":29,"tag":65,"props":3765,"children":3766},{"style":72},[3767],{"type":34,"value":3768},"      // Setup method\n",{"type":29,"tag":65,"props":3770,"children":3771},{"class":67,"line":136},[3772,3777,3782,3787,3791,3796,3801,3806,3810],{"type":29,"tag":65,"props":3773,"children":3774},{"style":285},[3775],{"type":34,"value":3776},"      return",{"type":29,"tag":65,"props":3778,"children":3779},{"style":88},[3780],{"type":34,"value":3781}," {...",{"type":29,"tag":65,"props":3783,"children":3784},{"style":285},[3785],{"type":34,"value":3786},"useSearch",{"type":29,"tag":65,"props":3788,"children":3789},{"style":88},[3790],{"type":34,"value":1111},{"type":29,"tag":65,"props":3792,"children":3793},{"style":82},[3794],{"type":34,"value":3795},",",{"type":29,"tag":65,"props":3797,"children":3798},{"style":88},[3799],{"type":34,"value":3800},"...",{"type":29,"tag":65,"props":3802,"children":3803},{"style":285},[3804],{"type":34,"value":3805},"useSorting",{"type":29,"tag":65,"props":3807,"children":3808},{"style":88},[3809],{"type":34,"value":1111},{"type":29,"tag":65,"props":3811,"children":3812},{"style":82},[3813],{"type":34,"value":3691},{"type":29,"tag":65,"props":3815,"children":3816},{"class":67,"line":153},[3817],{"type":29,"tag":65,"props":3818,"children":3819},{"style":285},[3820],{"type":34,"value":3630},{"type":29,"tag":65,"props":3822,"children":3823},{"class":67,"line":170},[3824,3828],{"type":29,"tag":65,"props":3825,"children":3826},{"style":285},[3827],{"type":34,"value":3638},{"type":29,"tag":65,"props":3829,"children":3830},{"style":82},[3831],{"type":34,"value":407},{"type":29,"tag":65,"props":3833,"children":3834},{"class":67,"line":197},[3835,3840,3845],{"type":29,"tag":65,"props":3836,"children":3837},{"style":581},[3838],{"type":34,"value":3839},"  function",{"type":29,"tag":65,"props":3841,"children":3842},{"style":1104},[3843],{"type":34,"value":3844}," useSearch",{"type":29,"tag":65,"props":3846,"children":3847},{"style":82},[3848],{"type":34,"value":3849},"(){\n",{"type":29,"tag":65,"props":3851,"children":3852},{"class":67,"line":214},[3853],{"type":29,"tag":65,"props":3854,"children":3855},{"style":72},[3856],{"type":34,"value":3857},"      // composition function for search\n",{"type":29,"tag":65,"props":3859,"children":3860},{"class":67,"line":231},[3861],{"type":29,"tag":65,"props":3862,"children":3863},{"style":82},[3864],{"type":34,"value":429},{"type":29,"tag":65,"props":3866,"children":3867},{"class":67,"line":248},[3868,3872,3877],{"type":29,"tag":65,"props":3869,"children":3870},{"style":581},[3871],{"type":34,"value":3839},{"type":29,"tag":65,"props":3873,"children":3874},{"style":1104},[3875],{"type":34,"value":3876}," useSorting",{"type":29,"tag":65,"props":3878,"children":3879},{"style":82},[3880],{"type":34,"value":3849},{"type":29,"tag":65,"props":3882,"children":3883},{"class":67,"line":258},[3884],{"type":29,"tag":65,"props":3885,"children":3886},{"style":72},[3887],{"type":34,"value":3888},"      // composition function for sorting\n",{"type":29,"tag":65,"props":3890,"children":3891},{"class":67,"line":275},[3892],{"type":29,"tag":65,"props":3893,"children":3894},{"style":82},[3895],{"type":34,"value":3683},{"type":29,"tag":65,"props":3897,"children":3898},{"class":67,"line":317},[3899],{"type":29,"tag":65,"props":3900,"children":3901},{"style":285},[3902],{"type":34,"value":3691},{"type":29,"tag":30,"props":3904,"children":3905},{},[3906],{"type":34,"value":3907},"Now our code is organized by logical concerns, therefore more readable and maintainable.",{"type":29,"tag":30,"props":3909,"children":3910},{},[3911],{"type":34,"value":3912},"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":37,"props":3914,"children":3916},{"id":3915},"_2-faster-and-smaller",[3917],{"type":34,"value":3918},"2- Faster and smaller",{"type":29,"tag":30,"props":3920,"children":3921},{},[3922],{"type":34,"value":3923},"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":3925,"children":3926},{},[3927],{"type":34,"value":3928},"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":2662,"props":3930,"children":3934},{"load":2771,"src":3931,"alt":3932,"className":3933},"/blog/vue compiler.png","vue compiler picture",[2775],[],{"type":29,"tag":30,"props":3936,"children":3937},{},[3938],{"type":34,"value":3939},"Also vue has made its rendering faster is by implementing what it's called: a compiler informed virtual DOM.",{"type":29,"tag":30,"props":3941,"children":3942},{},[3943,3945,3950,3952,3957,3959,3964,3966,3971,3973,3980],{"type":34,"value":3944},"Now Vue is ",{"type":29,"tag":1439,"props":3946,"children":3947},{},[3948],{"type":34,"value":3949},"41% lighter",{"type":34,"value":3951},", has ",{"type":29,"tag":1439,"props":3953,"children":3954},{},[3955],{"type":34,"value":3956},"55% faster",{"type":34,"value":3958}," renders and ",{"type":29,"tag":1439,"props":3960,"children":3961},{},[3962],{"type":34,"value":3963},"133% faster updates",{"type":34,"value":3965}," and consumes up to ",{"type":29,"tag":1439,"props":3967,"children":3968},{},[3969],{"type":34,"value":3970},"54% less",{"type":34,"value":3972}," memory. For full statistics visit this ",{"type":29,"tag":2708,"props":3974,"children":3977},{"href":3975,"rel":3976},"https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing",[2712],[3978],{"type":34,"value":3979},"link",{"type":34,"value":2434},{"type":29,"tag":37,"props":3982,"children":3984},{"id":3983},"_3-teleport",[3985],{"type":34,"value":3986},"3- Teleport",{"type":29,"tag":30,"props":3988,"children":3989},{},[3990],{"type":34,"value":3991},"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":3993,"children":3994},{},[3995],{"type":34,"value":3996},"To show an example of this, let's look at a common feature of web applications today the modal.",{"type":29,"tag":54,"props":3998,"children":4002},{"className":3999,"code":4000,"language":4001,"meta":8,"style":8},"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",[4003],{"type":29,"tag":61,"props":4004,"children":4005},{"__ignoreMap":8},[4006,4014,4029,4045,4082,4115,4130,4147,4163,4178,4193],{"type":29,"tag":65,"props":4007,"children":4008},{"class":67,"line":68},[4009],{"type":29,"tag":65,"props":4010,"children":4011},{"style":72},[4012],{"type":34,"value":4013},"\u003C!-- App.vue -->\n",{"type":29,"tag":65,"props":4015,"children":4016},{"class":67,"line":78},[4017,4021,4025],{"type":29,"tag":65,"props":4018,"children":4019},{"style":82},[4020],{"type":34,"value":85},{"type":29,"tag":65,"props":4022,"children":4023},{"style":88},[4024],{"type":34,"value":91},{"type":29,"tag":65,"props":4026,"children":4027},{"style":82},[4028],{"type":34,"value":96},{"type":29,"tag":65,"props":4030,"children":4031},{"class":67,"line":99},[4032,4036,4041],{"type":29,"tag":65,"props":4033,"children":4034},{"style":82},[4035],{"type":34,"value":105},{"type":29,"tag":65,"props":4037,"children":4038},{"style":88},[4039],{"type":34,"value":4040},"body",{"type":29,"tag":65,"props":4042,"children":4043},{"style":82},[4044],{"type":34,"value":96},{"type":29,"tag":65,"props":4046,"children":4047},{"class":67,"line":117},[4048,4052,4056,4061,4065,4069,4074,4078],{"type":29,"tag":65,"props":4049,"children":4050},{"style":82},[4051],{"type":34,"value":123},{"type":29,"tag":65,"props":4053,"children":4054},{"style":88},[4055],{"type":34,"value":110},{"type":29,"tag":65,"props":4057,"children":4058},{"style":581},[4059],{"type":34,"value":4060}," class",{"type":29,"tag":65,"props":4062,"children":4063},{"style":82},[4064],{"type":34,"value":594},{"type":29,"tag":65,"props":4066,"children":4067},{"style":82},[4068],{"type":34,"value":886},{"type":29,"tag":65,"props":4070,"children":4071},{"style":301},[4072],{"type":34,"value":4073},"relative",{"type":29,"tag":65,"props":4075,"children":4076},{"style":82},[4077],{"type":34,"value":886},{"type":29,"tag":65,"props":4079,"children":4080},{"style":82},[4081],{"type":34,"value":96},{"type":29,"tag":65,"props":4083,"children":4084},{"class":67,"line":136},[4085,4089,4094,4098,4103,4107,4111],{"type":29,"tag":65,"props":4086,"children":4087},{"style":82},[4088],{"type":34,"value":176},{"type":29,"tag":65,"props":4090,"children":4091},{"style":88},[4092],{"type":34,"value":4093},"h3",{"type":29,"tag":65,"props":4095,"children":4096},{"style":82},[4097],{"type":34,"value":1566},{"type":29,"tag":65,"props":4099,"children":4100},{"style":285},[4101],{"type":34,"value":4102}," Vue 3 Modal ",{"type":29,"tag":65,"props":4104,"children":4105},{"style":82},[4106],{"type":34,"value":237},{"type":29,"tag":65,"props":4108,"children":4109},{"style":88},[4110],{"type":34,"value":4093},{"type":29,"tag":65,"props":4112,"children":4113},{"style":82},[4114],{"type":34,"value":96},{"type":29,"tag":65,"props":4116,"children":4117},{"class":67,"line":153},[4118,4122,4126],{"type":29,"tag":65,"props":4119,"children":4120},{"style":82},[4121],{"type":34,"value":176},{"type":29,"tag":65,"props":4123,"children":4124},{"style":88},[4125],{"type":34,"value":110},{"type":29,"tag":65,"props":4127,"children":4128},{"style":82},[4129],{"type":34,"value":96},{"type":29,"tag":65,"props":4131,"children":4132},{"class":67,"line":170},[4133,4138,4143],{"type":29,"tag":65,"props":4134,"children":4135},{"style":82},[4136],{"type":34,"value":4137},"         \u003C",{"type":29,"tag":65,"props":4139,"children":4140},{"style":88},[4141],{"type":34,"value":4142},"modal-button",{"type":29,"tag":65,"props":4144,"children":4145},{"style":82},[4146],{"type":34,"value":96},{"type":29,"tag":65,"props":4148,"children":4149},{"class":67,"line":197},[4150,4155,4159],{"type":29,"tag":65,"props":4151,"children":4152},{"style":82},[4153],{"type":34,"value":4154},"      \u003C/",{"type":29,"tag":65,"props":4156,"children":4157},{"style":88},[4158],{"type":34,"value":110},{"type":29,"tag":65,"props":4160,"children":4161},{"style":82},[4162],{"type":34,"value":96},{"type":29,"tag":65,"props":4164,"children":4165},{"class":67,"line":214},[4166,4170,4174],{"type":29,"tag":65,"props":4167,"children":4168},{"style":82},[4169],{"type":34,"value":203},{"type":29,"tag":65,"props":4171,"children":4172},{"style":88},[4173],{"type":34,"value":110},{"type":29,"tag":65,"props":4175,"children":4176},{"style":82},[4177],{"type":34,"value":96},{"type":29,"tag":65,"props":4179,"children":4180},{"class":67,"line":231},[4181,4185,4189],{"type":29,"tag":65,"props":4182,"children":4183},{"style":82},[4184],{"type":34,"value":220},{"type":29,"tag":65,"props":4186,"children":4187},{"style":88},[4188],{"type":34,"value":4040},{"type":29,"tag":65,"props":4190,"children":4191},{"style":82},[4192],{"type":34,"value":96},{"type":29,"tag":65,"props":4194,"children":4195},{"class":67,"line":248},[4196,4200,4204],{"type":29,"tag":65,"props":4197,"children":4198},{"style":82},[4199],{"type":34,"value":237},{"type":29,"tag":65,"props":4201,"children":4202},{"style":88},[4203],{"type":34,"value":91},{"type":29,"tag":65,"props":4205,"children":4206},{"style":82},[4207],{"type":34,"value":96},{"type":29,"tag":30,"props":4209,"children":4210},{},[4211],{"type":34,"value":4212},"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":54,"props":4214,"children":4216},{"className":3999,"code":4215,"language":4001,"meta":8,"style":8},"\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",[4217],{"type":29,"tag":61,"props":4218,"children":4219},{"__ignoreMap":8},[4220,4228,4243,4298,4335,4350,4358,4411,4426,4441],{"type":29,"tag":65,"props":4221,"children":4222},{"class":67,"line":68},[4223],{"type":29,"tag":65,"props":4224,"children":4225},{"style":72},[4226],{"type":34,"value":4227},"\u003C!-- modalButton.vue -->\n",{"type":29,"tag":65,"props":4229,"children":4230},{"class":67,"line":78},[4231,4235,4239],{"type":29,"tag":65,"props":4232,"children":4233},{"style":82},[4234],{"type":34,"value":85},{"type":29,"tag":65,"props":4236,"children":4237},{"style":88},[4238],{"type":34,"value":91},{"type":29,"tag":65,"props":4240,"children":4241},{"style":82},[4242],{"type":34,"value":96},{"type":29,"tag":65,"props":4244,"children":4245},{"class":67,"line":99},[4246,4250,4255,4260,4264,4268,4273,4277,4281,4286,4290,4294],{"type":29,"tag":65,"props":4247,"children":4248},{"style":82},[4249],{"type":34,"value":105},{"type":29,"tag":65,"props":4251,"children":4252},{"style":88},[4253],{"type":34,"value":4254},"button",{"type":29,"tag":65,"props":4256,"children":4257},{"style":581},[4258],{"type":34,"value":4259}," @click",{"type":29,"tag":65,"props":4261,"children":4262},{"style":82},[4263],{"type":34,"value":594},{"type":29,"tag":65,"props":4265,"children":4266},{"style":82},[4267],{"type":34,"value":886},{"type":29,"tag":65,"props":4269,"children":4270},{"style":301},[4271],{"type":34,"value":4272},"modalOpen = true",{"type":29,"tag":65,"props":4274,"children":4275},{"style":82},[4276],{"type":34,"value":886},{"type":29,"tag":65,"props":4278,"children":4279},{"style":82},[4280],{"type":34,"value":1566},{"type":29,"tag":65,"props":4282,"children":4283},{"style":285},[4284],{"type":34,"value":4285},"Open modal",{"type":29,"tag":65,"props":4287,"children":4288},{"style":82},[4289],{"type":34,"value":237},{"type":29,"tag":65,"props":4291,"children":4292},{"style":88},[4293],{"type":34,"value":4254},{"type":29,"tag":65,"props":4295,"children":4296},{"style":82},[4297],{"type":34,"value":96},{"type":29,"tag":65,"props":4299,"children":4300},{"class":67,"line":117},[4301,4305,4309,4314,4318,4322,4327,4331],{"type":29,"tag":65,"props":4302,"children":4303},{"style":82},[4304],{"type":34,"value":105},{"type":29,"tag":65,"props":4306,"children":4307},{"style":88},[4308],{"type":34,"value":110},{"type":29,"tag":65,"props":4310,"children":4311},{"style":581},[4312],{"type":34,"value":4313}," v-if",{"type":29,"tag":65,"props":4315,"children":4316},{"style":82},[4317],{"type":34,"value":594},{"type":29,"tag":65,"props":4319,"children":4320},{"style":82},[4321],{"type":34,"value":886},{"type":29,"tag":65,"props":4323,"children":4324},{"style":301},[4325],{"type":34,"value":4326},"modalOpen",{"type":29,"tag":65,"props":4328,"children":4329},{"style":82},[4330],{"type":34,"value":886},{"type":29,"tag":65,"props":4332,"children":4333},{"style":82},[4334],{"type":34,"value":96},{"type":29,"tag":65,"props":4336,"children":4337},{"class":67,"line":136},[4338,4342,4346],{"type":29,"tag":65,"props":4339,"children":4340},{"style":82},[4341],{"type":34,"value":123},{"type":29,"tag":65,"props":4343,"children":4344},{"style":88},[4345],{"type":34,"value":110},{"type":29,"tag":65,"props":4347,"children":4348},{"style":82},[4349],{"type":34,"value":96},{"type":29,"tag":65,"props":4351,"children":4352},{"class":67,"line":153},[4353],{"type":29,"tag":65,"props":4354,"children":4355},{"style":285},[4356],{"type":34,"value":4357},"      I am a modal !\n",{"type":29,"tag":65,"props":4359,"children":4360},{"class":67,"line":170},[4361,4365,4369,4373,4377,4381,4386,4390,4394,4399,4403,4407],{"type":29,"tag":65,"props":4362,"children":4363},{"style":82},[4364],{"type":34,"value":176},{"type":29,"tag":65,"props":4366,"children":4367},{"style":88},[4368],{"type":34,"value":4254},{"type":29,"tag":65,"props":4370,"children":4371},{"style":581},[4372],{"type":34,"value":4259},{"type":29,"tag":65,"props":4374,"children":4375},{"style":82},[4376],{"type":34,"value":594},{"type":29,"tag":65,"props":4378,"children":4379},{"style":82},[4380],{"type":34,"value":886},{"type":29,"tag":65,"props":4382,"children":4383},{"style":301},[4384],{"type":34,"value":4385},"modalOpen = false",{"type":29,"tag":65,"props":4387,"children":4388},{"style":82},[4389],{"type":34,"value":886},{"type":29,"tag":65,"props":4391,"children":4392},{"style":82},[4393],{"type":34,"value":1566},{"type":29,"tag":65,"props":4395,"children":4396},{"style":285},[4397],{"type":34,"value":4398},"Close",{"type":29,"tag":65,"props":4400,"children":4401},{"style":82},[4402],{"type":34,"value":237},{"type":29,"tag":65,"props":4404,"children":4405},{"style":88},[4406],{"type":34,"value":4254},{"type":29,"tag":65,"props":4408,"children":4409},{"style":82},[4410],{"type":34,"value":96},{"type":29,"tag":65,"props":4412,"children":4413},{"class":67,"line":197},[4414,4418,4422],{"type":29,"tag":65,"props":4415,"children":4416},{"style":82},[4417],{"type":34,"value":203},{"type":29,"tag":65,"props":4419,"children":4420},{"style":88},[4421],{"type":34,"value":110},{"type":29,"tag":65,"props":4423,"children":4424},{"style":82},[4425],{"type":34,"value":96},{"type":29,"tag":65,"props":4427,"children":4428},{"class":67,"line":214},[4429,4433,4437],{"type":29,"tag":65,"props":4430,"children":4431},{"style":82},[4432],{"type":34,"value":220},{"type":29,"tag":65,"props":4434,"children":4435},{"style":88},[4436],{"type":34,"value":110},{"type":29,"tag":65,"props":4438,"children":4439},{"style":82},[4440],{"type":34,"value":96},{"type":29,"tag":65,"props":4442,"children":4443},{"class":67,"line":231},[4444,4448,4452],{"type":29,"tag":65,"props":4445,"children":4446},{"style":82},[4447],{"type":34,"value":237},{"type":29,"tag":65,"props":4449,"children":4450},{"style":88},[4451],{"type":34,"value":91},{"type":29,"tag":65,"props":4453,"children":4454},{"style":82},[4455],{"type":34,"value":96},{"type":29,"tag":30,"props":4457,"children":4458},{},[4459],{"type":34,"value":4460},"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":54,"props":4462,"children":4464},{"className":3999,"code":4463,"language":4001,"meta":8,"style":8},"\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",[4465],{"type":29,"tag":61,"props":4466,"children":4467},{"__ignoreMap":8},[4468,4475,4490,4541,4578,4613,4628,4636,4688,4703,4718,4733],{"type":29,"tag":65,"props":4469,"children":4470},{"class":67,"line":68},[4471],{"type":29,"tag":65,"props":4472,"children":4473},{"style":72},[4474],{"type":34,"value":4227},{"type":29,"tag":65,"props":4476,"children":4477},{"class":67,"line":78},[4478,4482,4486],{"type":29,"tag":65,"props":4479,"children":4480},{"style":82},[4481],{"type":34,"value":85},{"type":29,"tag":65,"props":4483,"children":4484},{"style":88},[4485],{"type":34,"value":91},{"type":29,"tag":65,"props":4487,"children":4488},{"style":82},[4489],{"type":34,"value":96},{"type":29,"tag":65,"props":4491,"children":4492},{"class":67,"line":99},[4493,4497,4501,4505,4509,4513,4517,4521,4525,4529,4533,4537],{"type":29,"tag":65,"props":4494,"children":4495},{"style":82},[4496],{"type":34,"value":105},{"type":29,"tag":65,"props":4498,"children":4499},{"style":88},[4500],{"type":34,"value":4254},{"type":29,"tag":65,"props":4502,"children":4503},{"style":581},[4504],{"type":34,"value":4259},{"type":29,"tag":65,"props":4506,"children":4507},{"style":82},[4508],{"type":34,"value":594},{"type":29,"tag":65,"props":4510,"children":4511},{"style":82},[4512],{"type":34,"value":886},{"type":29,"tag":65,"props":4514,"children":4515},{"style":301},[4516],{"type":34,"value":4272},{"type":29,"tag":65,"props":4518,"children":4519},{"style":82},[4520],{"type":34,"value":886},{"type":29,"tag":65,"props":4522,"children":4523},{"style":82},[4524],{"type":34,"value":1566},{"type":29,"tag":65,"props":4526,"children":4527},{"style":285},[4528],{"type":34,"value":4285},{"type":29,"tag":65,"props":4530,"children":4531},{"style":82},[4532],{"type":34,"value":237},{"type":29,"tag":65,"props":4534,"children":4535},{"style":88},[4536],{"type":34,"value":4254},{"type":29,"tag":65,"props":4538,"children":4539},{"style":82},[4540],{"type":34,"value":96},{"type":29,"tag":65,"props":4542,"children":4543},{"class":67,"line":117},[4544,4548,4553,4558,4562,4566,4570,4574],{"type":29,"tag":65,"props":4545,"children":4546},{"style":82},[4547],{"type":34,"value":105},{"type":29,"tag":65,"props":4549,"children":4550},{"style":88},[4551],{"type":34,"value":4552},"teleport",{"type":29,"tag":65,"props":4554,"children":4555},{"style":581},[4556],{"type":34,"value":4557}," to",{"type":29,"tag":65,"props":4559,"children":4560},{"style":82},[4561],{"type":34,"value":594},{"type":29,"tag":65,"props":4563,"children":4564},{"style":82},[4565],{"type":34,"value":886},{"type":29,"tag":65,"props":4567,"children":4568},{"style":301},[4569],{"type":34,"value":4040},{"type":29,"tag":65,"props":4571,"children":4572},{"style":82},[4573],{"type":34,"value":886},{"type":29,"tag":65,"props":4575,"children":4576},{"style":82},[4577],{"type":34,"value":96},{"type":29,"tag":65,"props":4579,"children":4580},{"class":67,"line":136},[4581,4585,4589,4593,4597,4601,4605,4609],{"type":29,"tag":65,"props":4582,"children":4583},{"style":82},[4584],{"type":34,"value":123},{"type":29,"tag":65,"props":4586,"children":4587},{"style":88},[4588],{"type":34,"value":110},{"type":29,"tag":65,"props":4590,"children":4591},{"style":581},[4592],{"type":34,"value":4313},{"type":29,"tag":65,"props":4594,"children":4595},{"style":82},[4596],{"type":34,"value":594},{"type":29,"tag":65,"props":4598,"children":4599},{"style":82},[4600],{"type":34,"value":886},{"type":29,"tag":65,"props":4602,"children":4603},{"style":301},[4604],{"type":34,"value":4326},{"type":29,"tag":65,"props":4606,"children":4607},{"style":82},[4608],{"type":34,"value":886},{"type":29,"tag":65,"props":4610,"children":4611},{"style":82},[4612],{"type":34,"value":96},{"type":29,"tag":65,"props":4614,"children":4615},{"class":67,"line":153},[4616,4620,4624],{"type":29,"tag":65,"props":4617,"children":4618},{"style":82},[4619],{"type":34,"value":176},{"type":29,"tag":65,"props":4621,"children":4622},{"style":88},[4623],{"type":34,"value":110},{"type":29,"tag":65,"props":4625,"children":4626},{"style":82},[4627],{"type":34,"value":96},{"type":29,"tag":65,"props":4629,"children":4630},{"class":67,"line":170},[4631],{"type":29,"tag":65,"props":4632,"children":4633},{"style":285},[4634],{"type":34,"value":4635},"        I am a modal !\n",{"type":29,"tag":65,"props":4637,"children":4638},{"class":67,"line":197},[4639,4644,4648,4652,4656,4660,4664,4668,4672,4676,4680,4684],{"type":29,"tag":65,"props":4640,"children":4641},{"style":82},[4642],{"type":34,"value":4643},"        \u003C",{"type":29,"tag":65,"props":4645,"children":4646},{"style":88},[4647],{"type":34,"value":4254},{"type":29,"tag":65,"props":4649,"children":4650},{"style":581},[4651],{"type":34,"value":4259},{"type":29,"tag":65,"props":4653,"children":4654},{"style":82},[4655],{"type":34,"value":594},{"type":29,"tag":65,"props":4657,"children":4658},{"style":82},[4659],{"type":34,"value":886},{"type":29,"tag":65,"props":4661,"children":4662},{"style":301},[4663],{"type":34,"value":4385},{"type":29,"tag":65,"props":4665,"children":4666},{"style":82},[4667],{"type":34,"value":886},{"type":29,"tag":65,"props":4669,"children":4670},{"style":82},[4671],{"type":34,"value":1566},{"type":29,"tag":65,"props":4673,"children":4674},{"style":285},[4675],{"type":34,"value":4398},{"type":29,"tag":65,"props":4677,"children":4678},{"style":82},[4679],{"type":34,"value":237},{"type":29,"tag":65,"props":4681,"children":4682},{"style":88},[4683],{"type":34,"value":4254},{"type":29,"tag":65,"props":4685,"children":4686},{"style":82},[4687],{"type":34,"value":96},{"type":29,"tag":65,"props":4689,"children":4690},{"class":67,"line":214},[4691,4695,4699],{"type":29,"tag":65,"props":4692,"children":4693},{"style":82},[4694],{"type":34,"value":4154},{"type":29,"tag":65,"props":4696,"children":4697},{"style":88},[4698],{"type":34,"value":110},{"type":29,"tag":65,"props":4700,"children":4701},{"style":82},[4702],{"type":34,"value":96},{"type":29,"tag":65,"props":4704,"children":4705},{"class":67,"line":231},[4706,4710,4714],{"type":29,"tag":65,"props":4707,"children":4708},{"style":82},[4709],{"type":34,"value":203},{"type":29,"tag":65,"props":4711,"children":4712},{"style":88},[4713],{"type":34,"value":110},{"type":29,"tag":65,"props":4715,"children":4716},{"style":82},[4717],{"type":34,"value":96},{"type":29,"tag":65,"props":4719,"children":4720},{"class":67,"line":248},[4721,4725,4729],{"type":29,"tag":65,"props":4722,"children":4723},{"style":82},[4724],{"type":34,"value":220},{"type":29,"tag":65,"props":4726,"children":4727},{"style":88},[4728],{"type":34,"value":4552},{"type":29,"tag":65,"props":4730,"children":4731},{"style":82},[4732],{"type":34,"value":96},{"type":29,"tag":65,"props":4734,"children":4735},{"class":67,"line":258},[4736,4740,4744],{"type":29,"tag":65,"props":4737,"children":4738},{"style":82},[4739],{"type":34,"value":237},{"type":29,"tag":65,"props":4741,"children":4742},{"style":88},[4743],{"type":34,"value":91},{"type":29,"tag":65,"props":4745,"children":4746},{"style":82},[4747],{"type":34,"value":96},{"type":29,"tag":37,"props":4749,"children":4751},{"id":4750},"_4-script-setup-experimental",[4752],{"type":34,"value":4753},"4- Script setup (experimental)",{"type":29,"tag":30,"props":4755,"children":4756},{},[4757],{"type":34,"value":4758},"Some new features were announced, but they are still experimental like the script setup property.",{"type":29,"tag":30,"props":4760,"children":4761},{},[4762],{"type":34,"value":4763},"Let take a simple example:",{"type":29,"tag":54,"props":4765,"children":4767},{"className":3999,"code":4766,"language":4001,"meta":8,"style":8},"\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",[4768],{"type":29,"tag":61,"props":4769,"children":4770},{"__ignoreMap":8},[4771,4786,4826,4842,4858,4894,4936,4947,4959,4971,4979,4987,4995],{"type":29,"tag":65,"props":4772,"children":4773},{"class":67,"line":68},[4774,4778,4782],{"type":29,"tag":65,"props":4775,"children":4776},{"style":82},[4777],{"type":34,"value":85},{"type":29,"tag":65,"props":4779,"children":4780},{"style":88},[4781],{"type":34,"value":268},{"type":29,"tag":65,"props":4783,"children":4784},{"style":82},[4785],{"type":34,"value":96},{"type":29,"tag":65,"props":4787,"children":4788},{"class":67,"line":78},[4789,4794,4798,4802,4806,4810,4814,4818,4822],{"type":29,"tag":65,"props":4790,"children":4791},{"style":279},[4792],{"type":34,"value":4793},"  import",{"type":29,"tag":65,"props":4795,"children":4796},{"style":82},[4797],{"type":34,"value":1006},{"type":29,"tag":65,"props":4799,"children":4800},{"style":285},[4801],{"type":34,"value":2375},{"type":29,"tag":65,"props":4803,"children":4804},{"style":82},[4805],{"type":34,"value":1016},{"type":29,"tag":65,"props":4807,"children":4808},{"style":279},[4809],{"type":34,"value":1021},{"type":29,"tag":65,"props":4811,"children":4812},{"style":82},[4813],{"type":34,"value":298},{"type":29,"tag":65,"props":4815,"children":4816},{"style":301},[4817],{"type":34,"value":58},{"type":29,"tag":65,"props":4819,"children":4820},{"style":82},[4821],{"type":34,"value":309},{"type":29,"tag":65,"props":4823,"children":4824},{"style":82},[4825],{"type":34,"value":314},{"type":29,"tag":65,"props":4827,"children":4828},{"class":67,"line":99},[4829,4834,4838],{"type":29,"tag":65,"props":4830,"children":4831},{"style":279},[4832],{"type":34,"value":4833},"  export",{"type":29,"tag":65,"props":4835,"children":4836},{"style":279},[4837],{"type":34,"value":370},{"type":29,"tag":65,"props":4839,"children":4840},{"style":82},[4841],{"type":34,"value":375},{"type":29,"tag":65,"props":4843,"children":4844},{"class":67,"line":117},[4845,4850,4854],{"type":29,"tag":65,"props":4846,"children":4847},{"style":88},[4848],{"type":34,"value":4849},"    setup",{"type":29,"tag":65,"props":4851,"children":4852},{"style":82},[4853],{"type":34,"value":1111},{"type":29,"tag":65,"props":4855,"children":4856},{"style":82},[4857],{"type":34,"value":375},{"type":29,"tag":65,"props":4859,"children":4860},{"class":67,"line":136},[4861,4866,4870,4874,4878,4882,4886,4890],{"type":29,"tag":65,"props":4862,"children":4863},{"style":581},[4864],{"type":34,"value":4865},"      const",{"type":29,"tag":65,"props":4867,"children":4868},{"style":285},[4869],{"type":34,"value":2366},{"type":29,"tag":65,"props":4871,"children":4872},{"style":82},[4873],{"type":34,"value":1171},{"type":29,"tag":65,"props":4875,"children":4876},{"style":1104},[4877],{"type":34,"value":2375},{"type":29,"tag":65,"props":4879,"children":4880},{"style":88},[4881],{"type":34,"value":1140},{"type":29,"tag":65,"props":4883,"children":4884},{"style":2382},[4885],{"type":34,"value":2385},{"type":29,"tag":65,"props":4887,"children":4888},{"style":88},[4889],{"type":34,"value":1282},{"type":29,"tag":65,"props":4891,"children":4892},{"style":82},[4893],{"type":34,"value":314},{"type":29,"tag":65,"props":4895,"children":4896},{"class":67,"line":153},[4897,4901,4906,4910,4915,4919,4923,4927,4931],{"type":29,"tag":65,"props":4898,"children":4899},{"style":581},[4900],{"type":34,"value":4865},{"type":29,"tag":65,"props":4902,"children":4903},{"style":285},[4904],{"type":34,"value":4905}," inc",{"type":29,"tag":65,"props":4907,"children":4908},{"style":82},[4909],{"type":34,"value":1171},{"type":29,"tag":65,"props":4911,"children":4912},{"style":82},[4913],{"type":34,"value":4914}," ()",{"type":29,"tag":65,"props":4916,"children":4917},{"style":581},[4918],{"type":34,"value":1149},{"type":29,"tag":65,"props":4920,"children":4921},{"style":285},[4922],{"type":34,"value":2366},{"type":29,"tag":65,"props":4924,"children":4925},{"style":82},[4926],{"type":34,"value":2434},{"type":29,"tag":65,"props":4928,"children":4929},{"style":285},[4930],{"type":34,"value":2439},{"type":29,"tag":65,"props":4932,"children":4933},{"style":82},[4934],{"type":34,"value":4935},"++;\n",{"type":29,"tag":65,"props":4937,"children":4938},{"class":67,"line":170},[4939,4943],{"type":29,"tag":65,"props":4940,"children":4941},{"style":279},[4942],{"type":34,"value":3776},{"type":29,"tag":65,"props":4944,"children":4945},{"style":82},[4946],{"type":34,"value":375},{"type":29,"tag":65,"props":4948,"children":4949},{"class":67,"line":197},[4950,4955],{"type":29,"tag":65,"props":4951,"children":4952},{"style":285},[4953],{"type":34,"value":4954},"        count",{"type":29,"tag":65,"props":4956,"children":4957},{"style":82},[4958],{"type":34,"value":407},{"type":29,"tag":65,"props":4960,"children":4961},{"class":67,"line":214},[4962,4967],{"type":29,"tag":65,"props":4963,"children":4964},{"style":285},[4965],{"type":34,"value":4966},"        inc",{"type":29,"tag":65,"props":4968,"children":4969},{"style":82},[4970],{"type":34,"value":407},{"type":29,"tag":65,"props":4972,"children":4973},{"class":67,"line":231},[4974],{"type":29,"tag":65,"props":4975,"children":4976},{"style":82},[4977],{"type":34,"value":4978},"      };\n",{"type":29,"tag":65,"props":4980,"children":4981},{"class":67,"line":248},[4982],{"type":29,"tag":65,"props":4983,"children":4984},{"style":82},[4985],{"type":34,"value":4986},"    },\n",{"type":29,"tag":65,"props":4988,"children":4989},{"class":67,"line":258},[4990],{"type":29,"tag":65,"props":4991,"children":4992},{"style":82},[4993],{"type":34,"value":4994},"  };\n",{"type":29,"tag":65,"props":4996,"children":4997},{"class":67,"line":275},[4998,5002,5006],{"type":29,"tag":65,"props":4999,"children":5000},{"style":82},[5001],{"type":34,"value":237},{"type":29,"tag":65,"props":5003,"children":5004},{"style":88},[5005],{"type":34,"value":268},{"type":29,"tag":65,"props":5007,"children":5008},{"style":82},[5009],{"type":34,"value":96},{"type":29,"tag":30,"props":5011,"children":5012},{},[5013],{"type":34,"value":5014},"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":54,"props":5016,"children":5018},{"className":3999,"code":5017,"language":4001,"meta":8,"style":8},"\u003Cscript setup>\n  import { ref } from 'vue';\n  export const count = ref(0);\n  export const inc = () => count.value++;\n\u003C/script>\n",[5019],{"type":29,"tag":61,"props":5020,"children":5021},{"__ignoreMap":8},[5022,5041,5080,5121,5165],{"type":29,"tag":65,"props":5023,"children":5024},{"class":67,"line":68},[5025,5029,5033,5037],{"type":29,"tag":65,"props":5026,"children":5027},{"style":82},[5028],{"type":34,"value":85},{"type":29,"tag":65,"props":5030,"children":5031},{"style":88},[5032],{"type":34,"value":268},{"type":29,"tag":65,"props":5034,"children":5035},{"style":581},[5036],{"type":34,"value":968},{"type":29,"tag":65,"props":5038,"children":5039},{"style":82},[5040],{"type":34,"value":96},{"type":29,"tag":65,"props":5042,"children":5043},{"class":67,"line":78},[5044,5048,5052,5056,5060,5064,5068,5072,5076],{"type":29,"tag":65,"props":5045,"children":5046},{"style":279},[5047],{"type":34,"value":4793},{"type":29,"tag":65,"props":5049,"children":5050},{"style":82},[5051],{"type":34,"value":1006},{"type":29,"tag":65,"props":5053,"children":5054},{"style":285},[5055],{"type":34,"value":2375},{"type":29,"tag":65,"props":5057,"children":5058},{"style":82},[5059],{"type":34,"value":1016},{"type":29,"tag":65,"props":5061,"children":5062},{"style":279},[5063],{"type":34,"value":1021},{"type":29,"tag":65,"props":5065,"children":5066},{"style":82},[5067],{"type":34,"value":298},{"type":29,"tag":65,"props":5069,"children":5070},{"style":301},[5071],{"type":34,"value":58},{"type":29,"tag":65,"props":5073,"children":5074},{"style":82},[5075],{"type":34,"value":309},{"type":29,"tag":65,"props":5077,"children":5078},{"style":82},[5079],{"type":34,"value":314},{"type":29,"tag":65,"props":5081,"children":5082},{"class":67,"line":99},[5083,5087,5092,5097,5101,5105,5109,5113,5117],{"type":29,"tag":65,"props":5084,"children":5085},{"style":279},[5086],{"type":34,"value":4833},{"type":29,"tag":65,"props":5088,"children":5089},{"style":581},[5090],{"type":34,"value":5091}," const",{"type":29,"tag":65,"props":5093,"children":5094},{"style":285},[5095],{"type":34,"value":5096}," count ",{"type":29,"tag":65,"props":5098,"children":5099},{"style":82},[5100],{"type":34,"value":594},{"type":29,"tag":65,"props":5102,"children":5103},{"style":1104},[5104],{"type":34,"value":2375},{"type":29,"tag":65,"props":5106,"children":5107},{"style":285},[5108],{"type":34,"value":1140},{"type":29,"tag":65,"props":5110,"children":5111},{"style":2382},[5112],{"type":34,"value":2385},{"type":29,"tag":65,"props":5114,"children":5115},{"style":285},[5116],{"type":34,"value":1282},{"type":29,"tag":65,"props":5118,"children":5119},{"style":82},[5120],{"type":34,"value":314},{"type":29,"tag":65,"props":5122,"children":5123},{"class":67,"line":117},[5124,5128,5132,5137,5141,5145,5149,5153,5157,5161],{"type":29,"tag":65,"props":5125,"children":5126},{"style":279},[5127],{"type":34,"value":4833},{"type":29,"tag":65,"props":5129,"children":5130},{"style":581},[5131],{"type":34,"value":5091},{"type":29,"tag":65,"props":5133,"children":5134},{"style":285},[5135],{"type":34,"value":5136}," inc ",{"type":29,"tag":65,"props":5138,"children":5139},{"style":82},[5140],{"type":34,"value":594},{"type":29,"tag":65,"props":5142,"children":5143},{"style":82},[5144],{"type":34,"value":4914},{"type":29,"tag":65,"props":5146,"children":5147},{"style":581},[5148],{"type":34,"value":1149},{"type":29,"tag":65,"props":5150,"children":5151},{"style":285},[5152],{"type":34,"value":2366},{"type":29,"tag":65,"props":5154,"children":5155},{"style":82},[5156],{"type":34,"value":2434},{"type":29,"tag":65,"props":5158,"children":5159},{"style":285},[5160],{"type":34,"value":2439},{"type":29,"tag":65,"props":5162,"children":5163},{"style":82},[5164],{"type":34,"value":4935},{"type":29,"tag":65,"props":5166,"children":5167},{"class":67,"line":136},[5168,5172,5176],{"type":29,"tag":65,"props":5169,"children":5170},{"style":82},[5171],{"type":34,"value":237},{"type":29,"tag":65,"props":5173,"children":5174},{"style":88},[5175],{"type":34,"value":268},{"type":29,"tag":65,"props":5177,"children":5178},{"style":82},[5179],{"type":34,"value":96},{"type":29,"tag":37,"props":5181,"children":5183},{"id":5182},"_5-style-vars-experimental",[5184],{"type":34,"value":5185},"5- Style vars (experimental)",{"type":29,"tag":30,"props":5187,"children":5188},{},[5189],{"type":34,"value":5190},"Using the vars attribute, allows us to reference css variables that are being generated from our component state.",{"type":29,"tag":54,"props":5192,"children":5194},{"className":3999,"code":5193,"language":4001,"meta":8,"style":8},"\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",[5195],{"type":29,"tag":61,"props":5196,"children":5197},{"__ignoreMap":8},[5198,5213,5265,5280,5295,5310,5326,5337,5366,5373,5380,5387,5402,5439,5455,5487,5494],{"type":29,"tag":65,"props":5199,"children":5200},{"class":67,"line":68},[5201,5205,5209],{"type":29,"tag":65,"props":5202,"children":5203},{"style":82},[5204],{"type":34,"value":85},{"type":29,"tag":65,"props":5206,"children":5207},{"style":88},[5208],{"type":34,"value":91},{"type":29,"tag":65,"props":5210,"children":5211},{"style":82},[5212],{"type":34,"value":96},{"type":29,"tag":65,"props":5214,"children":5215},{"class":67,"line":78},[5216,5220,5224,5228,5232,5236,5240,5244,5248,5253,5257,5261],{"type":29,"tag":65,"props":5217,"children":5218},{"style":82},[5219],{"type":34,"value":105},{"type":29,"tag":65,"props":5221,"children":5222},{"style":88},[5223],{"type":34,"value":110},{"type":29,"tag":65,"props":5225,"children":5226},{"style":581},[5227],{"type":34,"value":4060},{"type":29,"tag":65,"props":5229,"children":5230},{"style":82},[5231],{"type":34,"value":594},{"type":29,"tag":65,"props":5233,"children":5234},{"style":82},[5235],{"type":34,"value":886},{"type":29,"tag":65,"props":5237,"children":5238},{"style":301},[5239],{"type":34,"value":34},{"type":29,"tag":65,"props":5241,"children":5242},{"style":82},[5243],{"type":34,"value":886},{"type":29,"tag":65,"props":5245,"children":5246},{"style":82},[5247],{"type":34,"value":1566},{"type":29,"tag":65,"props":5249,"children":5250},{"style":285},[5251],{"type":34,"value":5252},"hello",{"type":29,"tag":65,"props":5254,"children":5255},{"style":82},[5256],{"type":34,"value":237},{"type":29,"tag":65,"props":5258,"children":5259},{"style":88},[5260],{"type":34,"value":110},{"type":29,"tag":65,"props":5262,"children":5263},{"style":82},[5264],{"type":34,"value":96},{"type":29,"tag":65,"props":5266,"children":5267},{"class":67,"line":99},[5268,5272,5276],{"type":29,"tag":65,"props":5269,"children":5270},{"style":82},[5271],{"type":34,"value":237},{"type":29,"tag":65,"props":5273,"children":5274},{"style":88},[5275],{"type":34,"value":91},{"type":29,"tag":65,"props":5277,"children":5278},{"style":82},[5279],{"type":34,"value":96},{"type":29,"tag":65,"props":5281,"children":5282},{"class":67,"line":117},[5283,5287,5291],{"type":29,"tag":65,"props":5284,"children":5285},{"style":82},[5286],{"type":34,"value":85},{"type":29,"tag":65,"props":5288,"children":5289},{"style":88},[5290],{"type":34,"value":268},{"type":29,"tag":65,"props":5292,"children":5293},{"style":82},[5294],{"type":34,"value":96},{"type":29,"tag":65,"props":5296,"children":5297},{"class":67,"line":136},[5298,5302,5306],{"type":29,"tag":65,"props":5299,"children":5300},{"style":279},[5301],{"type":34,"value":4833},{"type":29,"tag":65,"props":5303,"children":5304},{"style":279},[5305],{"type":34,"value":370},{"type":29,"tag":65,"props":5307,"children":5308},{"style":82},[5309],{"type":34,"value":375},{"type":29,"tag":65,"props":5311,"children":5312},{"class":67,"line":153},[5313,5318,5322],{"type":29,"tag":65,"props":5314,"children":5315},{"style":88},[5316],{"type":34,"value":5317},"    data",{"type":29,"tag":65,"props":5319,"children":5320},{"style":82},[5321],{"type":34,"value":1111},{"type":29,"tag":65,"props":5323,"children":5324},{"style":82},[5325],{"type":34,"value":375},{"type":29,"tag":65,"props":5327,"children":5328},{"class":67,"line":170},[5329,5333],{"type":29,"tag":65,"props":5330,"children":5331},{"style":279},[5332],{"type":34,"value":3776},{"type":29,"tag":65,"props":5334,"children":5335},{"style":82},[5336],{"type":34,"value":375},{"type":29,"tag":65,"props":5338,"children":5339},{"class":67,"line":197},[5340,5345,5349,5353,5358,5362],{"type":29,"tag":65,"props":5341,"children":5342},{"style":88},[5343],{"type":34,"value":5344},"        color",{"type":29,"tag":65,"props":5346,"children":5347},{"style":82},[5348],{"type":34,"value":389},{"type":29,"tag":65,"props":5350,"children":5351},{"style":82},[5352],{"type":34,"value":298},{"type":29,"tag":65,"props":5354,"children":5355},{"style":301},[5356],{"type":34,"value":5357},"red",{"type":29,"tag":65,"props":5359,"children":5360},{"style":82},[5361],{"type":34,"value":309},{"type":29,"tag":65,"props":5363,"children":5364},{"style":82},[5365],{"type":34,"value":407},{"type":29,"tag":65,"props":5367,"children":5368},{"class":67,"line":214},[5369],{"type":29,"tag":65,"props":5370,"children":5371},{"style":82},[5372],{"type":34,"value":4978},{"type":29,"tag":65,"props":5374,"children":5375},{"class":67,"line":231},[5376],{"type":29,"tag":65,"props":5377,"children":5378},{"style":82},[5379],{"type":34,"value":4986},{"type":29,"tag":65,"props":5381,"children":5382},{"class":67,"line":248},[5383],{"type":29,"tag":65,"props":5384,"children":5385},{"style":82},[5386],{"type":34,"value":4994},{"type":29,"tag":65,"props":5388,"children":5389},{"class":67,"line":258},[5390,5394,5398],{"type":29,"tag":65,"props":5391,"children":5392},{"style":82},[5393],{"type":34,"value":237},{"type":29,"tag":65,"props":5395,"children":5396},{"style":88},[5397],{"type":34,"value":268},{"type":29,"tag":65,"props":5399,"children":5400},{"style":82},[5401],{"type":34,"value":96},{"type":29,"tag":65,"props":5403,"children":5404},{"class":67,"line":275},[5405,5409,5413,5418,5422,5426,5431,5435],{"type":29,"tag":65,"props":5406,"children":5407},{"style":82},[5408],{"type":34,"value":85},{"type":29,"tag":65,"props":5410,"children":5411},{"style":88},[5412],{"type":34,"value":1475},{"type":29,"tag":65,"props":5414,"children":5415},{"style":581},[5416],{"type":34,"value":5417}," vars",{"type":29,"tag":65,"props":5419,"children":5420},{"style":82},[5421],{"type":34,"value":594},{"type":29,"tag":65,"props":5423,"children":5424},{"style":82},[5425],{"type":34,"value":886},{"type":29,"tag":65,"props":5427,"children":5428},{"style":301},[5429],{"type":34,"value":5430},"{ color }",{"type":29,"tag":65,"props":5432,"children":5433},{"style":82},[5434],{"type":34,"value":886},{"type":29,"tag":65,"props":5436,"children":5437},{"style":82},[5438],{"type":34,"value":96},{"type":29,"tag":65,"props":5440,"children":5441},{"class":67,"line":317},[5442,5447,5451],{"type":29,"tag":65,"props":5443,"children":5444},{"style":82},[5445],{"type":34,"value":5446},"  .",{"type":29,"tag":65,"props":5448,"children":5449},{"style":3648},[5450],{"type":34,"value":34},{"type":29,"tag":65,"props":5452,"children":5453},{"style":82},[5454],{"type":34,"value":375},{"type":29,"tag":65,"props":5456,"children":5457},{"class":67,"line":351},[5458,5464,5468,5473,5477,5482],{"type":29,"tag":65,"props":5459,"children":5461},{"style":5460},"--shiki-default:#B2CCD6",[5462],{"type":34,"value":5463},"    color",{"type":29,"tag":65,"props":5465,"children":5466},{"style":82},[5467],{"type":34,"value":389},{"type":29,"tag":65,"props":5469,"children":5470},{"style":1104},[5471],{"type":34,"value":5472}," var",{"type":29,"tag":65,"props":5474,"children":5475},{"style":82},[5476],{"type":34,"value":1140},{"type":29,"tag":65,"props":5478,"children":5479},{"style":285},[5480],{"type":34,"value":5481},"--color",{"type":29,"tag":65,"props":5483,"children":5484},{"style":82},[5485],{"type":34,"value":5486},");\n",{"type":29,"tag":65,"props":5488,"children":5489},{"class":67,"line":359},[5490],{"type":29,"tag":65,"props":5491,"children":5492},{"style":82},[5493],{"type":34,"value":3683},{"type":29,"tag":65,"props":5495,"children":5496},{"class":67,"line":378},[5497,5501,5505],{"type":29,"tag":65,"props":5498,"children":5499},{"style":82},[5500],{"type":34,"value":237},{"type":29,"tag":65,"props":5502,"children":5503},{"style":88},[5504],{"type":34,"value":1475},{"type":29,"tag":65,"props":5506,"children":5507},{"style":82},[5508],{"type":34,"value":96},{"type":29,"tag":30,"props":5510,"children":5511},{},[5512],{"type":34,"value":5513},"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":37,"props":5515,"children":5517},{"id":5516},"_6-final-notes",[5518],{"type":34,"value":5519},"6- Final notes",{"type":29,"tag":30,"props":5521,"children":5522},{},[5523,5525,5532,5534,5541],{"type":34,"value":5524},"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":2708,"props":5526,"children":5529},{"href":5527,"rel":5528},"https://v3.vuejs.org/guide/introduction.html",[2712],[5530],{"type":34,"value":5531},"the documentation",{"type":34,"value":5533}," or ",{"type":29,"tag":2708,"props":5535,"children":5538},{"href":5536,"rel":5537},"https://github.com/vuejs/vue-next/releases/tag/v3.0.0",[2712],[5539],{"type":34,"value":5540},"the v3 release notes",{"type":34,"value":5542}," for a little bit more information.",{"type":29,"tag":1475,"props":5544,"children":5545},{},[5546],{"type":34,"value":1479},{"title":8,"searchDepth":78,"depth":78,"links":5548},[5549,5550,5551,5552,5553,5554],{"id":3547,"depth":78,"text":3550},{"id":3915,"depth":78,"text":3918},{"id":3983,"depth":78,"text":3986},{"id":4750,"depth":78,"text":4753},{"id":5182,"depth":78,"text":5185},{"id":5516,"depth":78,"text":5519},"content:blog:vue.md","blog/vue.md",{"_path":5558,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5559,"description":5560,"createdAt":5561,"updatedAt":5561,"thumbnail":5562,"thumbnailMobile":5563,"social":5564,"author":5565,"tags":5566,"readingTime":5567,"body":5572,"_type":1486,"_id":6540,"_source":1488,"_file":6541,"_extension":1490},"/blog/git","The ultimate git guide","Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of...","2021-01-09T03:01:50.854Z","/thumb/git.webp","/thumb/git mobile.webp","/thumb/git.jpg",{"name":16},[1501,18],{"text":5568,"minutes":5569,"time":5570,"words":5571},"6 min read",5.03,301800,1006,{"type":26,"children":5573,"toc":6532},[5574,5584,5594,5599,5617,5623,5683,5689,5712,5784,5802,5958,5976,6008,6025,6031,6049,6055,6073,6256,6264,6270,6328,6333,6389,6395,6403,6434,6476,6482,6490,6509,6528],{"type":29,"tag":30,"props":5575,"children":5576},{},[5577,5582],{"type":29,"tag":1439,"props":5578,"children":5579},{},[5580],{"type":34,"value":5581},"Git",{"type":34,"value":5583}," is the most commonly used version control system.",{"type":29,"tag":30,"props":5585,"children":5586},{},[5587,5592],{"type":29,"tag":1439,"props":5588,"children":5589},{},[5590],{"type":34,"value":5591},"GitHub",{"type":34,"value":5593}," is a cloud-based hosting service that lets you manage Git repositories. It is widely used and it is the one I use myself.",{"type":29,"tag":30,"props":5595,"children":5596},{},[5597],{"type":34,"value":5598},"Git allows developers to:",{"type":29,"tag":1431,"props":5600,"children":5601},{},[5602,5607,5612],{"type":29,"tag":1435,"props":5603,"children":5604},{},[5605],{"type":34,"value":5606},"Tracks the changes you make to files, so you have a record of what has been done.",{"type":29,"tag":1435,"props":5608,"children":5609},{},[5610],{"type":34,"value":5611},"Revert to specific versions should you ever need to.",{"type":29,"tag":1435,"props":5613,"children":5614},{},[5615],{"type":34,"value":5616},"Makes collaboration easier, allowing changes by multiple people to all be merged into one source.",{"type":29,"tag":37,"props":5618,"children":5620},{"id":5619},"_0-terminology",[5621],{"type":34,"value":5622},"0- Terminology",{"type":29,"tag":1431,"props":5624,"children":5625},{},[5626,5636,5646,5656,5666],{"type":29,"tag":1435,"props":5627,"children":5628},{},[5629,5634],{"type":29,"tag":1439,"props":5630,"children":5631},{},[5632],{"type":34,"value":5633},"Snapshot:",{"type":34,"value":5635}," just like in photography, a snapshot in computer science represents a moment (timestamped), where the system was in a certain state.",{"type":29,"tag":1435,"props":5637,"children":5638},{},[5639,5644],{"type":29,"tag":1439,"props":5640,"children":5641},{},[5642],{"type":34,"value":5643},"Commit:",{"type":34,"value":5645}," In short, a commit is a snapshot of your Git repository at one point in time.",{"type":29,"tag":1435,"props":5647,"children":5648},{},[5649,5654],{"type":29,"tag":1439,"props":5650,"children":5651},{},[5652],{"type":34,"value":5653},"Push request:",{"type":34,"value":5655}," synchronizing changes from a local repository (folder) to a remote one.",{"type":29,"tag":1435,"props":5657,"children":5658},{},[5659,5664],{"type":29,"tag":1439,"props":5660,"children":5661},{},[5662],{"type":34,"value":5663},"Remote vs Local:",{"type":34,"value":5665}," Remote refers to the version of the project sitting on the cloud (Github in this case). Local refers to the version of the project that you have on your machine.",{"type":29,"tag":1435,"props":5667,"children":5668},{},[5669,5674,5676,5681],{"type":29,"tag":1439,"props":5670,"children":5671},{},[5672],{"type":34,"value":5673},"The working tree:",{"type":34,"value":5675}," The working tree, or working directory, consists of files that you are currently working on, if there is nothing to commit then the ",{"type":29,"tag":2794,"props":5677,"children":5678},{},[5679],{"type":34,"value":5680},"git status",{"type":34,"value":5682}," will return a clean working tree.",{"type":29,"tag":37,"props":5684,"children":5686},{"id":5685},"_1-new-project",[5687],{"type":34,"value":5688},"1- New project",{"type":29,"tag":1431,"props":5690,"children":5691},{},[5692],{"type":29,"tag":1435,"props":5693,"children":5694},{},[5695,5697,5702,5704,5710],{"type":34,"value":5696},"After creating a new account on Github, and installing git locally from your Linux terminal: ",{"type":29,"tag":61,"props":5698,"children":5699},{"className":8},[5700],{"type":34,"value":5701},"apt-get install git",{"type":34,"value":5703}," ( for windows & mac check this ",{"type":29,"tag":2708,"props":5705,"children":5708},{"href":5706,"rel":5707},"https://github.com/git-guides/install-git",[2712],[5709],{"type":34,"value":3979},{"type":34,"value":5711}," ), you need to configure the email and username:",{"type":29,"tag":54,"props":5713,"children":5717},{"className":5714,"code":5715,"language":5716,"meta":8,"style":8},"language-bash shiki shiki-themes material-theme","git config --global user.name name #replace with your github name\ngit config --global user.email email #replace with your github email\n","bash",[5718],{"type":29,"tag":61,"props":5719,"children":5720},{"__ignoreMap":8},[5721,5754],{"type":29,"tag":65,"props":5722,"children":5723},{"class":67,"line":68},[5724,5729,5734,5739,5744,5749],{"type":29,"tag":65,"props":5725,"children":5726},{"style":3648},[5727],{"type":34,"value":5728},"git",{"type":29,"tag":65,"props":5730,"children":5731},{"style":301},[5732],{"type":34,"value":5733}," config",{"type":29,"tag":65,"props":5735,"children":5736},{"style":301},[5737],{"type":34,"value":5738}," --global",{"type":29,"tag":65,"props":5740,"children":5741},{"style":301},[5742],{"type":34,"value":5743}," user.name",{"type":29,"tag":65,"props":5745,"children":5746},{"style":301},[5747],{"type":34,"value":5748}," name",{"type":29,"tag":65,"props":5750,"children":5751},{"style":72},[5752],{"type":34,"value":5753}," #replace with your github name\n",{"type":29,"tag":65,"props":5755,"children":5756},{"class":67,"line":78},[5757,5761,5765,5769,5774,5779],{"type":29,"tag":65,"props":5758,"children":5759},{"style":3648},[5760],{"type":34,"value":5728},{"type":29,"tag":65,"props":5762,"children":5763},{"style":301},[5764],{"type":34,"value":5733},{"type":29,"tag":65,"props":5766,"children":5767},{"style":301},[5768],{"type":34,"value":5738},{"type":29,"tag":65,"props":5770,"children":5771},{"style":301},[5772],{"type":34,"value":5773}," user.email",{"type":29,"tag":65,"props":5775,"children":5776},{"style":301},[5777],{"type":34,"value":5778}," email",{"type":29,"tag":65,"props":5780,"children":5781},{"style":72},[5782],{"type":34,"value":5783}," #replace with your github email\n",{"type":29,"tag":1431,"props":5785,"children":5786},{},[5787,5792,5797],{"type":29,"tag":1435,"props":5788,"children":5789},{},[5790],{"type":34,"value":5791},"You can also edit the config file manually, as it will be set on your home repo (Linux based systems): ~/.gitconfig",{"type":29,"tag":1435,"props":5793,"children":5794},{},[5795],{"type":34,"value":5796},"To start a new git project, create a new repository from your Github account without initializing it.",{"type":29,"tag":1435,"props":5798,"children":5799},{},[5800],{"type":34,"value":5801},"Then in your local machine, cd to the project folder and do the following:",{"type":29,"tag":54,"props":5803,"children":5805},{"className":5714,"code":5804,"language":5716,"meta":8,"style":8},"# init an empty repo with the branch main\ngit init -b main\n# it tracks all the changes made to the folder\ngit add .\ngit commit -m \"first commit\"\n# replace that with your actual repo link\ngit remote add origin https://github.com/user/repo.git\n# you will be prompted to enter your github password\ngit push origin main\n",[5806],{"type":29,"tag":61,"props":5807,"children":5808},{"__ignoreMap":8},[5809,5817,5839,5847,5864,5896,5904,5930,5938],{"type":29,"tag":65,"props":5810,"children":5811},{"class":67,"line":68},[5812],{"type":29,"tag":65,"props":5813,"children":5814},{"style":72},[5815],{"type":34,"value":5816},"# init an empty repo with the branch main\n",{"type":29,"tag":65,"props":5818,"children":5819},{"class":67,"line":78},[5820,5824,5829,5834],{"type":29,"tag":65,"props":5821,"children":5822},{"style":3648},[5823],{"type":34,"value":5728},{"type":29,"tag":65,"props":5825,"children":5826},{"style":301},[5827],{"type":34,"value":5828}," init",{"type":29,"tag":65,"props":5830,"children":5831},{"style":301},[5832],{"type":34,"value":5833}," -b",{"type":29,"tag":65,"props":5835,"children":5836},{"style":301},[5837],{"type":34,"value":5838}," main\n",{"type":29,"tag":65,"props":5840,"children":5841},{"class":67,"line":99},[5842],{"type":29,"tag":65,"props":5843,"children":5844},{"style":72},[5845],{"type":34,"value":5846},"# it tracks all the changes made to the folder\n",{"type":29,"tag":65,"props":5848,"children":5849},{"class":67,"line":117},[5850,5854,5859],{"type":29,"tag":65,"props":5851,"children":5852},{"style":3648},[5853],{"type":34,"value":5728},{"type":29,"tag":65,"props":5855,"children":5856},{"style":301},[5857],{"type":34,"value":5858}," add",{"type":29,"tag":65,"props":5860,"children":5861},{"style":301},[5862],{"type":34,"value":5863}," .\n",{"type":29,"tag":65,"props":5865,"children":5866},{"class":67,"line":136},[5867,5871,5876,5881,5886,5891],{"type":29,"tag":65,"props":5868,"children":5869},{"style":3648},[5870],{"type":34,"value":5728},{"type":29,"tag":65,"props":5872,"children":5873},{"style":301},[5874],{"type":34,"value":5875}," commit",{"type":29,"tag":65,"props":5877,"children":5878},{"style":301},[5879],{"type":34,"value":5880}," -m",{"type":29,"tag":65,"props":5882,"children":5883},{"style":82},[5884],{"type":34,"value":5885}," \"",{"type":29,"tag":65,"props":5887,"children":5888},{"style":301},[5889],{"type":34,"value":5890},"first commit",{"type":29,"tag":65,"props":5892,"children":5893},{"style":82},[5894],{"type":34,"value":5895},"\"\n",{"type":29,"tag":65,"props":5897,"children":5898},{"class":67,"line":153},[5899],{"type":29,"tag":65,"props":5900,"children":5901},{"style":72},[5902],{"type":34,"value":5903},"# replace that with your actual repo link\n",{"type":29,"tag":65,"props":5905,"children":5906},{"class":67,"line":170},[5907,5911,5916,5920,5925],{"type":29,"tag":65,"props":5908,"children":5909},{"style":3648},[5910],{"type":34,"value":5728},{"type":29,"tag":65,"props":5912,"children":5913},{"style":301},[5914],{"type":34,"value":5915}," remote",{"type":29,"tag":65,"props":5917,"children":5918},{"style":301},[5919],{"type":34,"value":5858},{"type":29,"tag":65,"props":5921,"children":5922},{"style":301},[5923],{"type":34,"value":5924}," origin",{"type":29,"tag":65,"props":5926,"children":5927},{"style":301},[5928],{"type":34,"value":5929}," https://github.com/user/repo.git\n",{"type":29,"tag":65,"props":5931,"children":5932},{"class":67,"line":197},[5933],{"type":29,"tag":65,"props":5934,"children":5935},{"style":72},[5936],{"type":34,"value":5937},"# you will be prompted to enter your github password\n",{"type":29,"tag":65,"props":5939,"children":5940},{"class":67,"line":214},[5941,5945,5950,5954],{"type":29,"tag":65,"props":5942,"children":5943},{"style":3648},[5944],{"type":34,"value":5728},{"type":29,"tag":65,"props":5946,"children":5947},{"style":301},[5948],{"type":34,"value":5949}," push",{"type":29,"tag":65,"props":5951,"children":5952},{"style":301},[5953],{"type":34,"value":5924},{"type":29,"tag":65,"props":5955,"children":5956},{"style":301},[5957],{"type":34,"value":5838},{"type":29,"tag":1431,"props":5959,"children":5960},{},[5961,5971],{"type":29,"tag":1435,"props":5962,"children":5963},{},[5964,5969],{"type":29,"tag":1439,"props":5965,"children":5966},{},[5967],{"type":34,"value":5968},"Update",{"type":34,"value":5970}," As of 2022 password connections are no longer supported, you need to go to your account developers' settings and generate a token (with reading/write permissions).",{"type":29,"tag":1435,"props":5972,"children":5973},{},[5974],{"type":34,"value":5975},"Most of the time there are files that you don't want to commit to production, for that create a .gitignore file in your root project folder, and fill it with the paths of files & folders that you want to ignore. You can also set up a global gitignore file to always include it in your projects, configure it once and use it:",{"type":29,"tag":54,"props":5977,"children":5979},{"className":5714,"code":5978,"language":5716,"meta":8,"style":8},"git config --global core.excludesfile ~/.gitignore_global\n",[5980],{"type":29,"tag":61,"props":5981,"children":5982},{"__ignoreMap":8},[5983],{"type":29,"tag":65,"props":5984,"children":5985},{"class":67,"line":68},[5986,5990,5994,5998,6003],{"type":29,"tag":65,"props":5987,"children":5988},{"style":3648},[5989],{"type":34,"value":5728},{"type":29,"tag":65,"props":5991,"children":5992},{"style":301},[5993],{"type":34,"value":5733},{"type":29,"tag":65,"props":5995,"children":5996},{"style":301},[5997],{"type":34,"value":5738},{"type":29,"tag":65,"props":5999,"children":6000},{"style":301},[6001],{"type":34,"value":6002}," core.excludesfile",{"type":29,"tag":65,"props":6004,"children":6005},{"style":301},[6006],{"type":34,"value":6007}," ~/.gitignore_global\n",{"type":29,"tag":1431,"props":6009,"children":6010},{},[6011],{"type":29,"tag":1435,"props":6012,"children":6013},{},[6014,6016,6023],{"type":34,"value":6015},"This ",{"type":29,"tag":2708,"props":6017,"children":6020},{"href":6018,"rel":6019},"https://www.gitignore.io",[2712],[6021],{"type":34,"value":6022},"site",{"type":34,"value":6024}," give you recommendations on what to ignore based on your system & IDE...",{"type":29,"tag":37,"props":6026,"children":6028},{"id":6027},"_2-git-branches",[6029],{"type":34,"value":6030},"2- Git branches",{"type":29,"tag":1431,"props":6032,"children":6033},{},[6034,6039,6044],{"type":29,"tag":1435,"props":6035,"children":6036},{},[6037],{"type":34,"value":6038},"One of the powerful features of git is branches: you can think of them as a sequence of commits and the branch have a movable pointer, the sequence grows and the pointer moves forward with each commit.",{"type":29,"tag":1435,"props":6040,"children":6041},{},[6042],{"type":34,"value":6043},"Every commit (circle) represents a snapshot of your project, at the time of the commit.",{"type":29,"tag":1435,"props":6045,"children":6046},{},[6047],{"type":34,"value":6048},"Branches allow you to develop features, fix bugs, or safely experiment with new ideas in a contained area of your repository.",{"type":29,"tag":2662,"props":6050,"children":6054},{"load":2771,"src":6051,"alt":6052,"className":6053},"/blog/git branches.png","git branches picture",[2775],[],{"type":29,"tag":1431,"props":6056,"children":6057},{},[6058,6063,6068],{"type":29,"tag":1435,"props":6059,"children":6060},{},[6061],{"type":34,"value":6062},"The diagram above visualizes a repository with two isolated lines of development, one for a little feature, and one for a longer-running feature. By developing them in branches, it’s not only possible to work on both of them in parallel, but it also keeps the main branch free from questionable code.",{"type":29,"tag":1435,"props":6064,"children":6065},{},[6066],{"type":34,"value":6067},"Ps: GitHub (and the industry at large) is moving to rename the default branch as main instead of master.",{"type":29,"tag":1435,"props":6069,"children":6070},{},[6071],{"type":34,"value":6072},"Here are useful commands to work with branches:",{"type":29,"tag":54,"props":6074,"children":6076},{"className":5714,"code":6075,"language":5716,"meta":8,"style":8},"# list all the branches in a project\ngit branch\n# create a new branch with name test without checking out\ngit branch test\n# delete the test branch if it has merged changes\ngit branch -d test\n# Force delete even if test has unmerged changes\ngit branch -D test\n# rename the current branch to test\ngit branch -m test\n# list all the remote branches\ngit branch -a\n# checkout to the branch test\ngit checkout test\n",[6077],{"type":29,"tag":61,"props":6078,"children":6079},{"__ignoreMap":8},[6080,6088,6100,6108,6125,6133,6153,6161,6181,6189,6208,6216,6232,6240],{"type":29,"tag":65,"props":6081,"children":6082},{"class":67,"line":68},[6083],{"type":29,"tag":65,"props":6084,"children":6085},{"style":72},[6086],{"type":34,"value":6087},"# list all the branches in a project\n",{"type":29,"tag":65,"props":6089,"children":6090},{"class":67,"line":78},[6091,6095],{"type":29,"tag":65,"props":6092,"children":6093},{"style":3648},[6094],{"type":34,"value":5728},{"type":29,"tag":65,"props":6096,"children":6097},{"style":301},[6098],{"type":34,"value":6099}," branch\n",{"type":29,"tag":65,"props":6101,"children":6102},{"class":67,"line":99},[6103],{"type":29,"tag":65,"props":6104,"children":6105},{"style":72},[6106],{"type":34,"value":6107},"# create a new branch with name test without checking out\n",{"type":29,"tag":65,"props":6109,"children":6110},{"class":67,"line":117},[6111,6115,6120],{"type":29,"tag":65,"props":6112,"children":6113},{"style":3648},[6114],{"type":34,"value":5728},{"type":29,"tag":65,"props":6116,"children":6117},{"style":301},[6118],{"type":34,"value":6119}," branch",{"type":29,"tag":65,"props":6121,"children":6122},{"style":301},[6123],{"type":34,"value":6124}," test\n",{"type":29,"tag":65,"props":6126,"children":6127},{"class":67,"line":136},[6128],{"type":29,"tag":65,"props":6129,"children":6130},{"style":72},[6131],{"type":34,"value":6132},"# delete the test branch if it has merged changes\n",{"type":29,"tag":65,"props":6134,"children":6135},{"class":67,"line":153},[6136,6140,6144,6149],{"type":29,"tag":65,"props":6137,"children":6138},{"style":3648},[6139],{"type":34,"value":5728},{"type":29,"tag":65,"props":6141,"children":6142},{"style":301},[6143],{"type":34,"value":6119},{"type":29,"tag":65,"props":6145,"children":6146},{"style":301},[6147],{"type":34,"value":6148}," -d",{"type":29,"tag":65,"props":6150,"children":6151},{"style":301},[6152],{"type":34,"value":6124},{"type":29,"tag":65,"props":6154,"children":6155},{"class":67,"line":170},[6156],{"type":29,"tag":65,"props":6157,"children":6158},{"style":72},[6159],{"type":34,"value":6160},"# Force delete even if test has unmerged changes\n",{"type":29,"tag":65,"props":6162,"children":6163},{"class":67,"line":197},[6164,6168,6172,6177],{"type":29,"tag":65,"props":6165,"children":6166},{"style":3648},[6167],{"type":34,"value":5728},{"type":29,"tag":65,"props":6169,"children":6170},{"style":301},[6171],{"type":34,"value":6119},{"type":29,"tag":65,"props":6173,"children":6174},{"style":301},[6175],{"type":34,"value":6176}," -D",{"type":29,"tag":65,"props":6178,"children":6179},{"style":301},[6180],{"type":34,"value":6124},{"type":29,"tag":65,"props":6182,"children":6183},{"class":67,"line":214},[6184],{"type":29,"tag":65,"props":6185,"children":6186},{"style":72},[6187],{"type":34,"value":6188},"# rename the current branch to test\n",{"type":29,"tag":65,"props":6190,"children":6191},{"class":67,"line":231},[6192,6196,6200,6204],{"type":29,"tag":65,"props":6193,"children":6194},{"style":3648},[6195],{"type":34,"value":5728},{"type":29,"tag":65,"props":6197,"children":6198},{"style":301},[6199],{"type":34,"value":6119},{"type":29,"tag":65,"props":6201,"children":6202},{"style":301},[6203],{"type":34,"value":5880},{"type":29,"tag":65,"props":6205,"children":6206},{"style":301},[6207],{"type":34,"value":6124},{"type":29,"tag":65,"props":6209,"children":6210},{"class":67,"line":248},[6211],{"type":29,"tag":65,"props":6212,"children":6213},{"style":72},[6214],{"type":34,"value":6215},"# list all the remote branches\n",{"type":29,"tag":65,"props":6217,"children":6218},{"class":67,"line":258},[6219,6223,6227],{"type":29,"tag":65,"props":6220,"children":6221},{"style":3648},[6222],{"type":34,"value":5728},{"type":29,"tag":65,"props":6224,"children":6225},{"style":301},[6226],{"type":34,"value":6119},{"type":29,"tag":65,"props":6228,"children":6229},{"style":301},[6230],{"type":34,"value":6231}," -a\n",{"type":29,"tag":65,"props":6233,"children":6234},{"class":67,"line":275},[6235],{"type":29,"tag":65,"props":6236,"children":6237},{"style":72},[6238],{"type":34,"value":6239},"# checkout to the branch test\n",{"type":29,"tag":65,"props":6241,"children":6242},{"class":67,"line":317},[6243,6247,6252],{"type":29,"tag":65,"props":6244,"children":6245},{"style":3648},[6246],{"type":34,"value":5728},{"type":29,"tag":65,"props":6248,"children":6249},{"style":301},[6250],{"type":34,"value":6251}," checkout",{"type":29,"tag":65,"props":6253,"children":6254},{"style":301},[6255],{"type":34,"value":6124},{"type":29,"tag":1431,"props":6257,"children":6258},{},[6259],{"type":29,"tag":1435,"props":6260,"children":6261},{},[6262],{"type":34,"value":6263},"When you create a new branch, git only creates another pointer to the last commit, you need to checkout to the branch and add new code and commit.",{"type":29,"tag":37,"props":6265,"children":6267},{"id":6266},"_3-revert-to-previous",[6268],{"type":34,"value":6269},"3- Revert to previous",{"type":29,"tag":1431,"props":6271,"children":6272},{},[6273,6278,6316],{"type":29,"tag":1435,"props":6274,"children":6275},{},[6276],{"type":34,"value":6277},"So you committed changes, just to realize that you screwed up, how to fix it now?",{"type":29,"tag":1435,"props":6279,"children":6280},{},[6281,6283],{"type":34,"value":6282},"You can either reset:\n",{"type":29,"tag":1431,"props":6284,"children":6285},{},[6286,6296,6306],{"type":29,"tag":1435,"props":6287,"children":6288},{},[6289,6291],{"type":34,"value":6290},"Affect only the remote repo, not the local one: ",{"type":29,"tag":61,"props":6292,"children":6293},{"className":8},[6294],{"type":34,"value":6295},"git reset --soft HEAD~1",{"type":29,"tag":1435,"props":6297,"children":6298},{},[6299,6301],{"type":34,"value":6300},"The most direct, dangerous, and frequently used option. When passed --hard The Commit History ref pointers are updated to the specified commit: ",{"type":29,"tag":61,"props":6302,"children":6303},{"className":8},[6304],{"type":34,"value":6305},"git reset --hard HEAD~1",{"type":29,"tag":1435,"props":6307,"children":6308},{},[6309,6311],{"type":34,"value":6310},"This is the default operating mode. The ref pointers are updated. The Staging Index is reset to the state of the specified commit: ",{"type":29,"tag":61,"props":6312,"children":6313},{"className":8},[6314],{"type":34,"value":6315},"git reset --mixed HEAD~1",{"type":29,"tag":1435,"props":6317,"children":6318},{},[6319,6321,6326],{"type":34,"value":6320},"Or you can revert: ",{"type":29,"tag":61,"props":6322,"children":6323},{"className":8},[6324],{"type":34,"value":6325},"git revert HEAD~3",{"type":34,"value":6327}," (Revert the changes specified by the fourth last commit in HEAD and create a new commit with the reverted changes).",{"type":29,"tag":30,"props":6329,"children":6330},{},[6331],{"type":34,"value":6332},"💡 Remove not commited changes from a branch and add them to a new one:",{"type":29,"tag":54,"props":6334,"children":6336},{"className":5714,"code":6335,"language":5716,"meta":8,"style":8},"git stash\ngit checkout -b new-branch\ngit stash popl\n",[6337],{"type":29,"tag":61,"props":6338,"children":6339},{"__ignoreMap":8},[6340,6352,6372],{"type":29,"tag":65,"props":6341,"children":6342},{"class":67,"line":68},[6343,6347],{"type":29,"tag":65,"props":6344,"children":6345},{"style":3648},[6346],{"type":34,"value":5728},{"type":29,"tag":65,"props":6348,"children":6349},{"style":301},[6350],{"type":34,"value":6351}," stash\n",{"type":29,"tag":65,"props":6353,"children":6354},{"class":67,"line":78},[6355,6359,6363,6367],{"type":29,"tag":65,"props":6356,"children":6357},{"style":3648},[6358],{"type":34,"value":5728},{"type":29,"tag":65,"props":6360,"children":6361},{"style":301},[6362],{"type":34,"value":6251},{"type":29,"tag":65,"props":6364,"children":6365},{"style":301},[6366],{"type":34,"value":5833},{"type":29,"tag":65,"props":6368,"children":6369},{"style":301},[6370],{"type":34,"value":6371}," new-branch\n",{"type":29,"tag":65,"props":6373,"children":6374},{"class":67,"line":99},[6375,6379,6384],{"type":29,"tag":65,"props":6376,"children":6377},{"style":3648},[6378],{"type":34,"value":5728},{"type":29,"tag":65,"props":6380,"children":6381},{"style":301},[6382],{"type":34,"value":6383}," stash",{"type":29,"tag":65,"props":6385,"children":6386},{"style":301},[6387],{"type":34,"value":6388}," popl\n",{"type":29,"tag":37,"props":6390,"children":6392},{"id":6391},"_4-contribute",[6393],{"type":34,"value":6394},"4- Contribute",{"type":29,"tag":1431,"props":6396,"children":6397},{},[6398],{"type":29,"tag":1435,"props":6399,"children":6400},{},[6401],{"type":34,"value":6402},"You want to create a local copy of an opensource project from Github:",{"type":29,"tag":54,"props":6404,"children":6406},{"className":5714,"code":6405,"language":5716,"meta":8,"style":8},"# replace with the actual repo link\ngit clone https://github.com/user/repo.git\n",[6407],{"type":29,"tag":61,"props":6408,"children":6409},{"__ignoreMap":8},[6410,6418],{"type":29,"tag":65,"props":6411,"children":6412},{"class":67,"line":68},[6413],{"type":29,"tag":65,"props":6414,"children":6415},{"style":72},[6416],{"type":34,"value":6417},"# replace with the actual repo link\n",{"type":29,"tag":65,"props":6419,"children":6420},{"class":67,"line":78},[6421,6425,6430],{"type":29,"tag":65,"props":6422,"children":6423},{"style":3648},[6424],{"type":34,"value":5728},{"type":29,"tag":65,"props":6426,"children":6427},{"style":301},[6428],{"type":34,"value":6429}," clone",{"type":29,"tag":65,"props":6431,"children":6432},{"style":301},[6433],{"type":34,"value":5929},{"type":29,"tag":1431,"props":6435,"children":6436},{},[6437],{"type":29,"tag":1435,"props":6438,"children":6439},{},[6440,6442,6447,6449,6454,6456,6461,6463,6468,6469,6474],{"type":34,"value":6441},"You want to contribute to a project: - Find a project worth working on. - Fork it and clone it with ",{"type":29,"tag":61,"props":6443,"children":6444},{"className":8},[6445],{"type":34,"value":6446},"git clone",{"type":34,"value":6448},". - Open the project in your favourite IDE & create a new branch with ",{"type":29,"tag":61,"props":6450,"children":6451},{"className":8},[6452],{"type":34,"value":6453},"git checkout -b NewBranch",{"type":34,"value":6455},". - Make the changes to the project, then ",{"type":29,"tag":61,"props":6457,"children":6458},{"className":8},[6459],{"type":34,"value":6460},"git add",{"type":34,"value":6462}," & ",{"type":29,"tag":61,"props":6464,"children":6465},{"className":8},[6466],{"type":34,"value":6467},"git commit -m \"message\"",{"type":34,"value":6462},{"type":29,"tag":61,"props":6470,"children":6471},{"className":8},[6472],{"type":34,"value":6473},"git push origin NewBranch",{"type":34,"value":6475},". - Now go the remote repository and open a pull request , github will automatically detect if merging your new branch to the main one will cause any conflicts. - Wait for the admin code review, if approved cool 🎉 congratulations, if not refactor you code & repeat :)",{"type":29,"tag":37,"props":6477,"children":6479},{"id":6478},"_5-final-notes",[6480],{"type":34,"value":6481},"5. Final notes",{"type":29,"tag":1431,"props":6483,"children":6484},{},[6485],{"type":29,"tag":1435,"props":6486,"children":6487},{},[6488],{"type":34,"value":6489},"You want to visualize your commits history:",{"type":29,"tag":54,"props":6491,"children":6493},{"className":5714,"code":6492,"language":5716,"meta":8,"style":8},"git log\n",[6494],{"type":29,"tag":61,"props":6495,"children":6496},{"__ignoreMap":8},[6497],{"type":29,"tag":65,"props":6498,"children":6499},{"class":67,"line":68},[6500,6504],{"type":29,"tag":65,"props":6501,"children":6502},{"style":3648},[6503],{"type":34,"value":5728},{"type":29,"tag":65,"props":6505,"children":6506},{"style":301},[6507],{"type":34,"value":6508}," log\n",{"type":29,"tag":1431,"props":6510,"children":6511},{},[6512,6517],{"type":29,"tag":1435,"props":6513,"children":6514},{},[6515],{"type":34,"value":6516},"Git has become an industry standard today, and while this article is not an in-depth tutorial about the system, I hope it gets you starting, and don't forget to check the external links and do your own research and experiment!",{"type":29,"tag":1435,"props":6518,"children":6519},{},[6520,6522],{"type":34,"value":6521},"This was a very quick introduction about branches, to learn about them in detail please visit: ",{"type":29,"tag":2708,"props":6523,"children":6526},{"href":6524,"rel":6525},"https://learngitbranching.js.org/",[2712],[6527],{"type":34,"value":6524},{"type":29,"tag":1475,"props":6529,"children":6530},{},[6531],{"type":34,"value":1479},{"title":8,"searchDepth":78,"depth":78,"links":6533},[6534,6535,6536,6537,6538,6539],{"id":5619,"depth":78,"text":5622},{"id":5685,"depth":78,"text":5688},{"id":6027,"depth":78,"text":6030},{"id":6266,"depth":78,"text":6269},{"id":6391,"depth":78,"text":6394},{"id":6478,"depth":78,"text":6481},"content:blog:git.md","blog/git.md",1708620389400]