[{"data":1,"prerenderedAt":1490},["Reactive",2],{"content-query-AXclfgCD07":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"createdAt":10,"updatedAt":10,"thumbnail":11,"thumbnailMobile":12,"social":13,"author":14,"tags":16,"readingTime":19,"body":24,"_type":1485,"_id":1486,"_source":1487,"_file":1488,"_extension":1489},"/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":15},"Zakaria",[17,18],"coding tips","vue tips",{"text":20,"minutes":21,"time":22,"words":23},"2 min read",1.585,95100,317,{"type":25,"children":26,"toc":1479},"root",[27,35,42,47,52,454,459,543,549,554,558,806,810,815,821,826,830,1301,1305,1418,1424,1429,1463,1468,1473],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32],{"type":33,"value":34},"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":28,"tag":36,"props":37,"children":39},"h2",{"id":38},"basic-slot-based-layouts",[40],{"type":33,"value":41},"Basic Slot-Based Layouts",{"type":28,"tag":29,"props":43,"children":44},{},[45],{"type":33,"value":46},"The first approach involves creating layout components with slots for dynamic content insertion.",{"type":28,"tag":29,"props":48,"children":49},{},[50],{"type":33,"value":51},"Implementation:",{"type":28,"tag":53,"props":54,"children":58},"pre",{"className":55,"code":56,"language":57,"meta":7,"style":7},"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",[59],{"type":28,"tag":60,"props":61,"children":62},"code",{"__ignoreMap":7},[63,75,96,114,133,150,167,194,211,228,245,255,272,314,348,356,375,393,407,420,429,438],{"type":28,"tag":64,"props":65,"children":68},"span",{"class":66,"line":67},"line",1,[69],{"type":28,"tag":64,"props":70,"children":72},{"style":71},"--shiki-default:#546E7A;--shiki-default-font-style:italic",[73],{"type":33,"value":74},"\u003C!-- layouts/DashboardLayout.vue -->\n",{"type":28,"tag":64,"props":76,"children":78},{"class":66,"line":77},2,[79,85,91],{"type":28,"tag":64,"props":80,"children":82},{"style":81},"--shiki-default:#89DDFF",[83],{"type":33,"value":84},"\u003C",{"type":28,"tag":64,"props":86,"children":88},{"style":87},"--shiki-default:#F07178",[89],{"type":33,"value":90},"template",{"type":28,"tag":64,"props":92,"children":93},{"style":81},[94],{"type":33,"value":95},">\n",{"type":28,"tag":64,"props":97,"children":99},{"class":66,"line":98},3,[100,105,110],{"type":28,"tag":64,"props":101,"children":102},{"style":81},[103],{"type":33,"value":104},"  \u003C",{"type":28,"tag":64,"props":106,"children":107},{"style":87},[108],{"type":33,"value":109},"div",{"type":28,"tag":64,"props":111,"children":112},{"style":81},[113],{"type":33,"value":95},{"type":28,"tag":64,"props":115,"children":117},{"class":66,"line":116},4,[118,123,128],{"type":28,"tag":64,"props":119,"children":120},{"style":81},[121],{"type":33,"value":122},"    \u003C",{"type":28,"tag":64,"props":124,"children":125},{"style":87},[126],{"type":33,"value":127},"MainNav",{"type":28,"tag":64,"props":129,"children":130},{"style":81},[131],{"type":33,"value":132}," />\n",{"type":28,"tag":64,"props":134,"children":136},{"class":66,"line":135},5,[137,141,146],{"type":28,"tag":64,"props":138,"children":139},{"style":81},[140],{"type":33,"value":122},{"type":28,"tag":64,"props":142,"children":143},{"style":87},[144],{"type":33,"value":145},"SideNav",{"type":28,"tag":64,"props":147,"children":148},{"style":81},[149],{"type":33,"value":132},{"type":28,"tag":64,"props":151,"children":153},{"class":66,"line":152},6,[154,158,163],{"type":28,"tag":64,"props":155,"children":156},{"style":81},[157],{"type":33,"value":122},{"type":28,"tag":64,"props":159,"children":160},{"style":87},[161],{"type":33,"value":162},"main",{"type":28,"tag":64,"props":164,"children":165},{"style":81},[166],{"type":33,"value":95},{"type":28,"tag":64,"props":168,"children":170},{"class":66,"line":169},7,[171,176,181,186,190],{"type":28,"tag":64,"props":172,"children":173},{"style":81},[174],{"type":33,"value":175},"      \u003C",{"type":28,"tag":64,"props":177,"children":178},{"style":87},[179],{"type":33,"value":180},"slot",{"type":28,"tag":64,"props":182,"children":183},{"style":81},[184],{"type":33,"value":185},">\u003C/",{"type":28,"tag":64,"props":187,"children":188},{"style":87},[189],{"type":33,"value":180},{"type":28,"tag":64,"props":191,"children":192},{"style":81},[193],{"type":33,"value":95},{"type":28,"tag":64,"props":195,"children":197},{"class":66,"line":196},8,[198,203,207],{"type":28,"tag":64,"props":199,"children":200},{"style":81},[201],{"type":33,"value":202},"    \u003C/",{"type":28,"tag":64,"props":204,"children":205},{"style":87},[206],{"type":33,"value":162},{"type":28,"tag":64,"props":208,"children":209},{"style":81},[210],{"type":33,"value":95},{"type":28,"tag":64,"props":212,"children":214},{"class":66,"line":213},9,[215,220,224],{"type":28,"tag":64,"props":216,"children":217},{"style":81},[218],{"type":33,"value":219},"  \u003C/",{"type":28,"tag":64,"props":221,"children":222},{"style":87},[223],{"type":33,"value":109},{"type":28,"tag":64,"props":225,"children":226},{"style":81},[227],{"type":33,"value":95},{"type":28,"tag":64,"props":229,"children":231},{"class":66,"line":230},10,[232,237,241],{"type":28,"tag":64,"props":233,"children":234},{"style":81},[235],{"type":33,"value":236},"\u003C/",{"type":28,"tag":64,"props":238,"children":239},{"style":87},[240],{"type":33,"value":90},{"type":28,"tag":64,"props":242,"children":243},{"style":81},[244],{"type":33,"value":95},{"type":28,"tag":64,"props":246,"children":248},{"class":66,"line":247},11,[249],{"type":28,"tag":64,"props":250,"children":252},{"emptyLinePlaceholder":251},true,[253],{"type":33,"value":254},"\n",{"type":28,"tag":64,"props":256,"children":258},{"class":66,"line":257},12,[259,263,268],{"type":28,"tag":64,"props":260,"children":261},{"style":81},[262],{"type":33,"value":84},{"type":28,"tag":64,"props":264,"children":265},{"style":87},[266],{"type":33,"value":267},"script",{"type":28,"tag":64,"props":269,"children":270},{"style":81},[271],{"type":33,"value":95},{"type":28,"tag":64,"props":273,"children":275},{"class":66,"line":274},13,[276,282,288,293,298,304,309],{"type":28,"tag":64,"props":277,"children":279},{"style":278},"--shiki-default:#89DDFF;--shiki-default-font-style:italic",[280],{"type":33,"value":281},"import",{"type":28,"tag":64,"props":283,"children":285},{"style":284},"--shiki-default:#EEFFFF",[286],{"type":33,"value":287}," MainNav ",{"type":28,"tag":64,"props":289,"children":290},{"style":278},[291],{"type":33,"value":292},"from",{"type":28,"tag":64,"props":294,"children":295},{"style":81},[296],{"type":33,"value":297}," '",{"type":28,"tag":64,"props":299,"children":301},{"style":300},"--shiki-default:#C3E88D",[302],{"type":33,"value":303},"@/components/MainNav.vue",{"type":28,"tag":64,"props":305,"children":306},{"style":81},[307],{"type":33,"value":308},"'",{"type":28,"tag":64,"props":310,"children":311},{"style":81},[312],{"type":33,"value":313},";\n",{"type":28,"tag":64,"props":315,"children":317},{"class":66,"line":316},14,[318,322,327,331,335,340,344],{"type":28,"tag":64,"props":319,"children":320},{"style":278},[321],{"type":33,"value":281},{"type":28,"tag":64,"props":323,"children":324},{"style":284},[325],{"type":33,"value":326}," SideNav ",{"type":28,"tag":64,"props":328,"children":329},{"style":278},[330],{"type":33,"value":292},{"type":28,"tag":64,"props":332,"children":333},{"style":81},[334],{"type":33,"value":297},{"type":28,"tag":64,"props":336,"children":337},{"style":300},[338],{"type":33,"value":339},"@/components/SideNav.vue",{"type":28,"tag":64,"props":341,"children":342},{"style":81},[343],{"type":33,"value":308},{"type":28,"tag":64,"props":345,"children":346},{"style":81},[347],{"type":33,"value":313},{"type":28,"tag":64,"props":349,"children":351},{"class":66,"line":350},15,[352],{"type":28,"tag":64,"props":353,"children":354},{"emptyLinePlaceholder":251},[355],{"type":33,"value":254},{"type":28,"tag":64,"props":357,"children":359},{"class":66,"line":358},16,[360,365,370],{"type":28,"tag":64,"props":361,"children":362},{"style":278},[363],{"type":33,"value":364},"export",{"type":28,"tag":64,"props":366,"children":367},{"style":278},[368],{"type":33,"value":369}," default",{"type":28,"tag":64,"props":371,"children":372},{"style":81},[373],{"type":33,"value":374}," {\n",{"type":28,"tag":64,"props":376,"children":378},{"class":66,"line":377},17,[379,384,389],{"type":28,"tag":64,"props":380,"children":381},{"style":87},[382],{"type":33,"value":383},"  components",{"type":28,"tag":64,"props":385,"children":386},{"style":81},[387],{"type":33,"value":388},":",{"type":28,"tag":64,"props":390,"children":391},{"style":81},[392],{"type":33,"value":374},{"type":28,"tag":64,"props":394,"children":396},{"class":66,"line":395},18,[397,402],{"type":28,"tag":64,"props":398,"children":399},{"style":284},[400],{"type":33,"value":401},"    MainNav",{"type":28,"tag":64,"props":403,"children":404},{"style":81},[405],{"type":33,"value":406},",\n",{"type":28,"tag":64,"props":408,"children":410},{"class":66,"line":409},19,[411,416],{"type":28,"tag":64,"props":412,"children":413},{"style":284},[414],{"type":33,"value":415},"    SideNav",{"type":28,"tag":64,"props":417,"children":418},{"style":81},[419],{"type":33,"value":406},{"type":28,"tag":64,"props":421,"children":423},{"class":66,"line":422},20,[424],{"type":28,"tag":64,"props":425,"children":426},{"style":81},[427],{"type":33,"value":428},"  },\n",{"type":28,"tag":64,"props":430,"children":432},{"class":66,"line":431},21,[433],{"type":28,"tag":64,"props":434,"children":435},{"style":81},[436],{"type":33,"value":437},"};\n",{"type":28,"tag":64,"props":439,"children":441},{"class":66,"line":440},22,[442,446,450],{"type":28,"tag":64,"props":443,"children":444},{"style":81},[445],{"type":33,"value":236},{"type":28,"tag":64,"props":447,"children":448},{"style":87},[449],{"type":33,"value":267},{"type":28,"tag":64,"props":451,"children":452},{"style":81},[453],{"type":33,"value":95},{"type":28,"tag":29,"props":455,"children":456},{},[457],{"type":33,"value":458},"Usage:",{"type":28,"tag":53,"props":460,"children":462},{"className":55,"code":461,"language":57,"meta":7,"style":7},"\u003C!-- views/HomeView.vue -->\n\u003Ctemplate>\n  \u003CDashboardLayout>\n    \u003C!-- Your home view content here -->\n  \u003C/DashboardLayout>\n\u003C/template>\n",[463],{"type":28,"tag":60,"props":464,"children":465},{"__ignoreMap":7},[466,474,489,505,513,528],{"type":28,"tag":64,"props":467,"children":468},{"class":66,"line":67},[469],{"type":28,"tag":64,"props":470,"children":471},{"style":71},[472],{"type":33,"value":473},"\u003C!-- views/HomeView.vue -->\n",{"type":28,"tag":64,"props":475,"children":476},{"class":66,"line":77},[477,481,485],{"type":28,"tag":64,"props":478,"children":479},{"style":81},[480],{"type":33,"value":84},{"type":28,"tag":64,"props":482,"children":483},{"style":87},[484],{"type":33,"value":90},{"type":28,"tag":64,"props":486,"children":487},{"style":81},[488],{"type":33,"value":95},{"type":28,"tag":64,"props":490,"children":491},{"class":66,"line":98},[492,496,501],{"type":28,"tag":64,"props":493,"children":494},{"style":81},[495],{"type":33,"value":104},{"type":28,"tag":64,"props":497,"children":498},{"style":87},[499],{"type":33,"value":500},"DashboardLayout",{"type":28,"tag":64,"props":502,"children":503},{"style":81},[504],{"type":33,"value":95},{"type":28,"tag":64,"props":506,"children":507},{"class":66,"line":116},[508],{"type":28,"tag":64,"props":509,"children":510},{"style":71},[511],{"type":33,"value":512},"    \u003C!-- Your home view content here -->\n",{"type":28,"tag":64,"props":514,"children":515},{"class":66,"line":135},[516,520,524],{"type":28,"tag":64,"props":517,"children":518},{"style":81},[519],{"type":33,"value":219},{"type":28,"tag":64,"props":521,"children":522},{"style":87},[523],{"type":33,"value":500},{"type":28,"tag":64,"props":525,"children":526},{"style":81},[527],{"type":33,"value":95},{"type":28,"tag":64,"props":529,"children":530},{"class":66,"line":152},[531,535,539],{"type":28,"tag":64,"props":532,"children":533},{"style":81},[534],{"type":33,"value":236},{"type":28,"tag":64,"props":536,"children":537},{"style":87},[538],{"type":33,"value":90},{"type":28,"tag":64,"props":540,"children":541},{"style":81},[542],{"type":33,"value":95},{"type":28,"tag":36,"props":544,"children":546},{"id":545},"router-based-layouts",[547],{"type":33,"value":548},"Router-Based Layouts",{"type":28,"tag":29,"props":550,"children":551},{},[552],{"type":33,"value":553},"The second approach utilizes router metadata to assign specific layouts to routes.",{"type":28,"tag":29,"props":555,"children":556},{},[557],{"type":33,"value":51},{"type":28,"tag":53,"props":559,"children":563},{"className":560,"code":561,"language":562,"meta":7,"style":7},"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",[564],{"type":28,"tag":60,"props":565,"children":566},{"__ignoreMap":7},[567,575,599,607,636,657,673,681,709,738,759,767,779,786,794],{"type":28,"tag":64,"props":568,"children":569},{"class":66,"line":67},[570],{"type":28,"tag":64,"props":571,"children":572},{"style":71},[573],{"type":33,"value":574},"// index.js (Router Configuration)\n",{"type":28,"tag":64,"props":576,"children":577},{"class":66,"line":77},[578,584,589,594],{"type":28,"tag":64,"props":579,"children":581},{"style":580},"--shiki-default:#C792EA",[582],{"type":33,"value":583},"const",{"type":28,"tag":64,"props":585,"children":586},{"style":284},[587],{"type":33,"value":588}," routes ",{"type":28,"tag":64,"props":590,"children":591},{"style":81},[592],{"type":33,"value":593},"=",{"type":28,"tag":64,"props":595,"children":596},{"style":284},[597],{"type":33,"value":598}," [\n",{"type":28,"tag":64,"props":600,"children":601},{"class":66,"line":98},[602],{"type":28,"tag":64,"props":603,"children":604},{"style":81},[605],{"type":33,"value":606},"  {\n",{"type":28,"tag":64,"props":608,"children":609},{"class":66,"line":116},[610,615,619,623,628,632],{"type":28,"tag":64,"props":611,"children":612},{"style":87},[613],{"type":33,"value":614},"    path",{"type":28,"tag":64,"props":616,"children":617},{"style":81},[618],{"type":33,"value":388},{"type":28,"tag":64,"props":620,"children":621},{"style":81},[622],{"type":33,"value":297},{"type":28,"tag":64,"props":624,"children":625},{"style":300},[626],{"type":33,"value":627},"/",{"type":28,"tag":64,"props":629,"children":630},{"style":81},[631],{"type":33,"value":308},{"type":28,"tag":64,"props":633,"children":634},{"style":81},[635],{"type":33,"value":406},{"type":28,"tag":64,"props":637,"children":638},{"class":66,"line":135},[639,644,648,653],{"type":28,"tag":64,"props":640,"children":641},{"style":87},[642],{"type":33,"value":643},"    component",{"type":28,"tag":64,"props":645,"children":646},{"style":81},[647],{"type":33,"value":388},{"type":28,"tag":64,"props":649,"children":650},{"style":284},[651],{"type":33,"value":652}," DefaultLayout",{"type":28,"tag":64,"props":654,"children":655},{"style":81},[656],{"type":33,"value":406},{"type":28,"tag":64,"props":658,"children":659},{"class":66,"line":152},[660,665,669],{"type":28,"tag":64,"props":661,"children":662},{"style":87},[663],{"type":33,"value":664},"    children",{"type":28,"tag":64,"props":666,"children":667},{"style":81},[668],{"type":33,"value":388},{"type":28,"tag":64,"props":670,"children":671},{"style":284},[672],{"type":33,"value":598},{"type":28,"tag":64,"props":674,"children":675},{"class":66,"line":169},[676],{"type":28,"tag":64,"props":677,"children":678},{"style":81},[679],{"type":33,"value":680},"      {\n",{"type":28,"tag":64,"props":682,"children":683},{"class":66,"line":196},[684,689,693,697,701,705],{"type":28,"tag":64,"props":685,"children":686},{"style":87},[687],{"type":33,"value":688},"        path",{"type":28,"tag":64,"props":690,"children":691},{"style":81},[692],{"type":33,"value":388},{"type":28,"tag":64,"props":694,"children":695},{"style":81},[696],{"type":33,"value":297},{"type":28,"tag":64,"props":698,"children":699},{"style":300},[700],{"type":33,"value":627},{"type":28,"tag":64,"props":702,"children":703},{"style":81},[704],{"type":33,"value":308},{"type":28,"tag":64,"props":706,"children":707},{"style":81},[708],{"type":33,"value":406},{"type":28,"tag":64,"props":710,"children":711},{"class":66,"line":213},[712,717,721,725,730,734],{"type":28,"tag":64,"props":713,"children":714},{"style":87},[715],{"type":33,"value":716},"        name",{"type":28,"tag":64,"props":718,"children":719},{"style":81},[720],{"type":33,"value":388},{"type":28,"tag":64,"props":722,"children":723},{"style":81},[724],{"type":33,"value":297},{"type":28,"tag":64,"props":726,"children":727},{"style":300},[728],{"type":33,"value":729},"Home",{"type":28,"tag":64,"props":731,"children":732},{"style":81},[733],{"type":33,"value":308},{"type":28,"tag":64,"props":735,"children":736},{"style":81},[737],{"type":33,"value":406},{"type":28,"tag":64,"props":739,"children":740},{"class":66,"line":230},[741,746,750,755],{"type":28,"tag":64,"props":742,"children":743},{"style":87},[744],{"type":33,"value":745},"        component",{"type":28,"tag":64,"props":747,"children":748},{"style":81},[749],{"type":33,"value":388},{"type":28,"tag":64,"props":751,"children":752},{"style":284},[753],{"type":33,"value":754}," HomeView",{"type":28,"tag":64,"props":756,"children":757},{"style":81},[758],{"type":33,"value":406},{"type":28,"tag":64,"props":760,"children":761},{"class":66,"line":247},[762],{"type":28,"tag":64,"props":763,"children":764},{"style":81},[765],{"type":33,"value":766},"      },\n",{"type":28,"tag":64,"props":768,"children":769},{"class":66,"line":257},[770,775],{"type":28,"tag":64,"props":771,"children":772},{"style":284},[773],{"type":33,"value":774},"    ]",{"type":28,"tag":64,"props":776,"children":777},{"style":81},[778],{"type":33,"value":406},{"type":28,"tag":64,"props":780,"children":781},{"class":66,"line":274},[782],{"type":28,"tag":64,"props":783,"children":784},{"style":81},[785],{"type":33,"value":428},{"type":28,"tag":64,"props":787,"children":788},{"class":66,"line":316},[789],{"type":28,"tag":64,"props":790,"children":791},{"style":71},[792],{"type":33,"value":793},"  // Define other routes...\n",{"type":28,"tag":64,"props":795,"children":796},{"class":66,"line":350},[797,802],{"type":28,"tag":64,"props":798,"children":799},{"style":284},[800],{"type":33,"value":801},"]",{"type":28,"tag":64,"props":803,"children":804},{"style":81},[805],{"type":33,"value":313},{"type":28,"tag":29,"props":807,"children":808},{},[809],{"type":33,"value":458},{"type":28,"tag":29,"props":811,"children":812},{},[813],{"type":33,"value":814},"No changes required in component usage.",{"type":28,"tag":36,"props":816,"children":818},{"id":817},"dynamic-layout-selection",[819],{"type":33,"value":820},"Dynamic Layout Selection",{"type":28,"tag":29,"props":822,"children":823},{},[824],{"type":33,"value":825},"The third approach introduces a dynamic layout selector based on route metadata.",{"type":28,"tag":29,"props":827,"children":828},{},[829],{"type":33,"value":51},{"type":28,"tag":53,"props":831,"children":833},{"className":55,"code":832,"language":57,"meta":7,"style":7},"\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",[834],{"type":28,"tag":60,"props":835,"children":836},{"__ignoreMap":7},[837,845,860,899,915,930,945,952,994,1037,1078,1085,1115,1153,1198,1270,1286],{"type":28,"tag":64,"props":838,"children":839},{"class":66,"line":67},[840],{"type":28,"tag":64,"props":841,"children":842},{"style":71},[843],{"type":33,"value":844},"\u003C!-- layouts/TheAppLayout.vue -->\n",{"type":28,"tag":64,"props":846,"children":847},{"class":66,"line":77},[848,852,856],{"type":28,"tag":64,"props":849,"children":850},{"style":81},[851],{"type":33,"value":84},{"type":28,"tag":64,"props":853,"children":854},{"style":87},[855],{"type":33,"value":90},{"type":28,"tag":64,"props":857,"children":858},{"style":81},[859],{"type":33,"value":95},{"type":28,"tag":64,"props":861,"children":862},{"class":66,"line":98},[863,867,872,877,881,886,891,895],{"type":28,"tag":64,"props":864,"children":865},{"style":81},[866],{"type":33,"value":104},{"type":28,"tag":64,"props":868,"children":869},{"style":87},[870],{"type":33,"value":871},"component",{"type":28,"tag":64,"props":873,"children":874},{"style":580},[875],{"type":33,"value":876}," :is",{"type":28,"tag":64,"props":878,"children":879},{"style":81},[880],{"type":33,"value":593},{"type":28,"tag":64,"props":882,"children":883},{"style":81},[884],{"type":33,"value":885},"\"",{"type":28,"tag":64,"props":887,"children":888},{"style":300},[889],{"type":33,"value":890},"layout",{"type":28,"tag":64,"props":892,"children":893},{"style":81},[894],{"type":33,"value":885},{"type":28,"tag":64,"props":896,"children":897},{"style":81},[898],{"type":33,"value":95},{"type":28,"tag":64,"props":900,"children":901},{"class":66,"line":116},[902,906,911],{"type":28,"tag":64,"props":903,"children":904},{"style":81},[905],{"type":33,"value":122},{"type":28,"tag":64,"props":907,"children":908},{"style":87},[909],{"type":33,"value":910},"router-view",{"type":28,"tag":64,"props":912,"children":913},{"style":81},[914],{"type":33,"value":132},{"type":28,"tag":64,"props":916,"children":917},{"class":66,"line":135},[918,922,926],{"type":28,"tag":64,"props":919,"children":920},{"style":81},[921],{"type":33,"value":219},{"type":28,"tag":64,"props":923,"children":924},{"style":87},[925],{"type":33,"value":871},{"type":28,"tag":64,"props":927,"children":928},{"style":81},[929],{"type":33,"value":95},{"type":28,"tag":64,"props":931,"children":932},{"class":66,"line":152},[933,937,941],{"type":28,"tag":64,"props":934,"children":935},{"style":81},[936],{"type":33,"value":236},{"type":28,"tag":64,"props":938,"children":939},{"style":87},[940],{"type":33,"value":90},{"type":28,"tag":64,"props":942,"children":943},{"style":81},[944],{"type":33,"value":95},{"type":28,"tag":64,"props":946,"children":947},{"class":66,"line":169},[948],{"type":28,"tag":64,"props":949,"children":950},{"emptyLinePlaceholder":251},[951],{"type":33,"value":254},{"type":28,"tag":64,"props":953,"children":954},{"class":66,"line":196},[955,959,963,968,973,977,981,986,990],{"type":28,"tag":64,"props":956,"children":957},{"style":81},[958],{"type":33,"value":84},{"type":28,"tag":64,"props":960,"children":961},{"style":87},[962],{"type":33,"value":267},{"type":28,"tag":64,"props":964,"children":965},{"style":580},[966],{"type":33,"value":967}," setup",{"type":28,"tag":64,"props":969,"children":970},{"style":580},[971],{"type":33,"value":972}," lang",{"type":28,"tag":64,"props":974,"children":975},{"style":81},[976],{"type":33,"value":593},{"type":28,"tag":64,"props":978,"children":979},{"style":81},[980],{"type":33,"value":885},{"type":28,"tag":64,"props":982,"children":983},{"style":300},[984],{"type":33,"value":985},"ts",{"type":28,"tag":64,"props":987,"children":988},{"style":81},[989],{"type":33,"value":885},{"type":28,"tag":64,"props":991,"children":992},{"style":81},[993],{"type":33,"value":95},{"type":28,"tag":64,"props":995,"children":996},{"class":66,"line":213},[997,1001,1006,1011,1016,1021,1025,1029,1033],{"type":28,"tag":64,"props":998,"children":999},{"style":278},[1000],{"type":33,"value":281},{"type":28,"tag":64,"props":1002,"children":1003},{"style":81},[1004],{"type":33,"value":1005}," {",{"type":28,"tag":64,"props":1007,"children":1008},{"style":284},[1009],{"type":33,"value":1010}," computed",{"type":28,"tag":64,"props":1012,"children":1013},{"style":81},[1014],{"type":33,"value":1015}," }",{"type":28,"tag":64,"props":1017,"children":1018},{"style":278},[1019],{"type":33,"value":1020}," from",{"type":28,"tag":64,"props":1022,"children":1023},{"style":81},[1024],{"type":33,"value":297},{"type":28,"tag":64,"props":1026,"children":1027},{"style":300},[1028],{"type":33,"value":57},{"type":28,"tag":64,"props":1030,"children":1031},{"style":81},[1032],{"type":33,"value":308},{"type":28,"tag":64,"props":1034,"children":1035},{"style":81},[1036],{"type":33,"value":313},{"type":28,"tag":64,"props":1038,"children":1039},{"class":66,"line":230},[1040,1044,1048,1053,1057,1061,1065,1070,1074],{"type":28,"tag":64,"props":1041,"children":1042},{"style":278},[1043],{"type":33,"value":281},{"type":28,"tag":64,"props":1045,"children":1046},{"style":81},[1047],{"type":33,"value":1005},{"type":28,"tag":64,"props":1049,"children":1050},{"style":284},[1051],{"type":33,"value":1052}," useRoute",{"type":28,"tag":64,"props":1054,"children":1055},{"style":81},[1056],{"type":33,"value":1015},{"type":28,"tag":64,"props":1058,"children":1059},{"style":278},[1060],{"type":33,"value":1020},{"type":28,"tag":64,"props":1062,"children":1063},{"style":81},[1064],{"type":33,"value":297},{"type":28,"tag":64,"props":1066,"children":1067},{"style":300},[1068],{"type":33,"value":1069},"vue-router",{"type":28,"tag":64,"props":1071,"children":1072},{"style":81},[1073],{"type":33,"value":308},{"type":28,"tag":64,"props":1075,"children":1076},{"style":81},[1077],{"type":33,"value":313},{"type":28,"tag":64,"props":1079,"children":1080},{"class":66,"line":247},[1081],{"type":28,"tag":64,"props":1082,"children":1083},{"emptyLinePlaceholder":251},[1084],{"type":33,"value":254},{"type":28,"tag":64,"props":1086,"children":1087},{"class":66,"line":257},[1088,1092,1097,1101,1106,1111],{"type":28,"tag":64,"props":1089,"children":1090},{"style":580},[1091],{"type":33,"value":583},{"type":28,"tag":64,"props":1093,"children":1094},{"style":284},[1095],{"type":33,"value":1096}," route ",{"type":28,"tag":64,"props":1098,"children":1099},{"style":81},[1100],{"type":33,"value":593},{"type":28,"tag":64,"props":1102,"children":1104},{"style":1103},"--shiki-default:#82AAFF",[1105],{"type":33,"value":1052},{"type":28,"tag":64,"props":1107,"children":1108},{"style":284},[1109],{"type":33,"value":1110},"()",{"type":28,"tag":64,"props":1112,"children":1113},{"style":81},[1114],{"type":33,"value":313},{"type":28,"tag":64,"props":1116,"children":1117},{"class":66,"line":274},[1118,1122,1127,1131,1135,1140,1144,1149],{"type":28,"tag":64,"props":1119,"children":1120},{"style":580},[1121],{"type":33,"value":583},{"type":28,"tag":64,"props":1123,"children":1124},{"style":284},[1125],{"type":33,"value":1126}," layout ",{"type":28,"tag":64,"props":1128,"children":1129},{"style":81},[1130],{"type":33,"value":593},{"type":28,"tag":64,"props":1132,"children":1133},{"style":1103},[1134],{"type":33,"value":1010},{"type":28,"tag":64,"props":1136,"children":1137},{"style":284},[1138],{"type":33,"value":1139},"(",{"type":28,"tag":64,"props":1141,"children":1142},{"style":81},[1143],{"type":33,"value":1110},{"type":28,"tag":64,"props":1145,"children":1146},{"style":580},[1147],{"type":33,"value":1148}," =>",{"type":28,"tag":64,"props":1150,"children":1151},{"style":81},[1152],{"type":33,"value":374},{"type":28,"tag":64,"props":1154,"children":1155},{"class":66,"line":316},[1156,1161,1166,1171,1176,1181,1186,1190,1194],{"type":28,"tag":64,"props":1157,"children":1158},{"style":580},[1159],{"type":33,"value":1160},"  const",{"type":28,"tag":64,"props":1162,"children":1163},{"style":284},[1164],{"type":33,"value":1165}," layout",{"type":28,"tag":64,"props":1167,"children":1168},{"style":81},[1169],{"type":33,"value":1170}," =",{"type":28,"tag":64,"props":1172,"children":1173},{"style":284},[1174],{"type":33,"value":1175}," route",{"type":28,"tag":64,"props":1177,"children":1178},{"style":81},[1179],{"type":33,"value":1180},"?.",{"type":28,"tag":64,"props":1182,"children":1183},{"style":284},[1184],{"type":33,"value":1185},"meta",{"type":28,"tag":64,"props":1187,"children":1188},{"style":81},[1189],{"type":33,"value":1180},{"type":28,"tag":64,"props":1191,"children":1192},{"style":284},[1193],{"type":33,"value":890},{"type":28,"tag":64,"props":1195,"children":1196},{"style":81},[1197],{"type":33,"value":313},{"type":28,"tag":64,"props":1199,"children":1200},{"class":66,"line":350},[1201,1206,1210,1215,1220,1225,1230,1234,1239,1244,1249,1254,1258,1262,1266],{"type":28,"tag":64,"props":1202,"children":1203},{"style":278},[1204],{"type":33,"value":1205},"  return",{"type":28,"tag":64,"props":1207,"children":1208},{"style":284},[1209],{"type":33,"value":1165},{"type":28,"tag":64,"props":1211,"children":1212},{"style":81},[1213],{"type":33,"value":1214}," ?",{"type":28,"tag":64,"props":1216,"children":1217},{"style":81},[1218],{"type":33,"value":1219}," `",{"type":28,"tag":64,"props":1221,"children":1222},{"style":300},[1223],{"type":33,"value":1224},"The",{"type":28,"tag":64,"props":1226,"children":1227},{"style":81},[1228],{"type":33,"value":1229},"${",{"type":28,"tag":64,"props":1231,"children":1232},{"style":284},[1233],{"type":33,"value":890},{"type":28,"tag":64,"props":1235,"children":1236},{"style":81},[1237],{"type":33,"value":1238},"}",{"type":28,"tag":64,"props":1240,"children":1241},{"style":300},[1242],{"type":33,"value":1243},"Layout",{"type":28,"tag":64,"props":1245,"children":1246},{"style":81},[1247],{"type":33,"value":1248},"`",{"type":28,"tag":64,"props":1250,"children":1251},{"style":81},[1252],{"type":33,"value":1253}," :",{"type":28,"tag":64,"props":1255,"children":1256},{"style":81},[1257],{"type":33,"value":297},{"type":28,"tag":64,"props":1259,"children":1260},{"style":300},[1261],{"type":33,"value":109},{"type":28,"tag":64,"props":1263,"children":1264},{"style":81},[1265],{"type":33,"value":308},{"type":28,"tag":64,"props":1267,"children":1268},{"style":81},[1269],{"type":33,"value":313},{"type":28,"tag":64,"props":1271,"children":1272},{"class":66,"line":358},[1273,1277,1282],{"type":28,"tag":64,"props":1274,"children":1275},{"style":81},[1276],{"type":33,"value":1238},{"type":28,"tag":64,"props":1278,"children":1279},{"style":284},[1280],{"type":33,"value":1281},")",{"type":28,"tag":64,"props":1283,"children":1284},{"style":81},[1285],{"type":33,"value":313},{"type":28,"tag":64,"props":1287,"children":1288},{"class":66,"line":377},[1289,1293,1297],{"type":28,"tag":64,"props":1290,"children":1291},{"style":81},[1292],{"type":33,"value":236},{"type":28,"tag":64,"props":1294,"children":1295},{"style":87},[1296],{"type":33,"value":267},{"type":28,"tag":64,"props":1298,"children":1299},{"style":81},[1300],{"type":33,"value":95},{"type":28,"tag":29,"props":1302,"children":1303},{},[1304],{"type":33,"value":458},{"type":28,"tag":53,"props":1306,"children":1308},{"className":55,"code":1307,"language":57,"meta":7,"style":7},"\u003C!-- src/App.vue -->\n\u003Ctemplate>\n  \u003Cdiv id=\"app\">\n    \u003CTheAppLayout />\n  \u003C/div>\n\u003C/template>\n",[1309],{"type":28,"tag":60,"props":1310,"children":1311},{"__ignoreMap":7},[1312,1320,1335,1372,1388,1403],{"type":28,"tag":64,"props":1313,"children":1314},{"class":66,"line":67},[1315],{"type":28,"tag":64,"props":1316,"children":1317},{"style":71},[1318],{"type":33,"value":1319},"\u003C!-- src/App.vue -->\n",{"type":28,"tag":64,"props":1321,"children":1322},{"class":66,"line":77},[1323,1327,1331],{"type":28,"tag":64,"props":1324,"children":1325},{"style":81},[1326],{"type":33,"value":84},{"type":28,"tag":64,"props":1328,"children":1329},{"style":87},[1330],{"type":33,"value":90},{"type":28,"tag":64,"props":1332,"children":1333},{"style":81},[1334],{"type":33,"value":95},{"type":28,"tag":64,"props":1336,"children":1337},{"class":66,"line":98},[1338,1342,1346,1351,1355,1359,1364,1368],{"type":28,"tag":64,"props":1339,"children":1340},{"style":81},[1341],{"type":33,"value":104},{"type":28,"tag":64,"props":1343,"children":1344},{"style":87},[1345],{"type":33,"value":109},{"type":28,"tag":64,"props":1347,"children":1348},{"style":580},[1349],{"type":33,"value":1350}," id",{"type":28,"tag":64,"props":1352,"children":1353},{"style":81},[1354],{"type":33,"value":593},{"type":28,"tag":64,"props":1356,"children":1357},{"style":81},[1358],{"type":33,"value":885},{"type":28,"tag":64,"props":1360,"children":1361},{"style":300},[1362],{"type":33,"value":1363},"app",{"type":28,"tag":64,"props":1365,"children":1366},{"style":81},[1367],{"type":33,"value":885},{"type":28,"tag":64,"props":1369,"children":1370},{"style":81},[1371],{"type":33,"value":95},{"type":28,"tag":64,"props":1373,"children":1374},{"class":66,"line":116},[1375,1379,1384],{"type":28,"tag":64,"props":1376,"children":1377},{"style":81},[1378],{"type":33,"value":122},{"type":28,"tag":64,"props":1380,"children":1381},{"style":87},[1382],{"type":33,"value":1383},"TheAppLayout",{"type":28,"tag":64,"props":1385,"children":1386},{"style":81},[1387],{"type":33,"value":132},{"type":28,"tag":64,"props":1389,"children":1390},{"class":66,"line":135},[1391,1395,1399],{"type":28,"tag":64,"props":1392,"children":1393},{"style":81},[1394],{"type":33,"value":219},{"type":28,"tag":64,"props":1396,"children":1397},{"style":87},[1398],{"type":33,"value":109},{"type":28,"tag":64,"props":1400,"children":1401},{"style":81},[1402],{"type":33,"value":95},{"type":28,"tag":64,"props":1404,"children":1405},{"class":66,"line":152},[1406,1410,1414],{"type":28,"tag":64,"props":1407,"children":1408},{"style":81},[1409],{"type":33,"value":236},{"type":28,"tag":64,"props":1411,"children":1412},{"style":87},[1413],{"type":33,"value":90},{"type":28,"tag":64,"props":1415,"children":1416},{"style":81},[1417],{"type":33,"value":95},{"type":28,"tag":36,"props":1419,"children":1421},{"id":1420},"conclusion",[1422],{"type":33,"value":1423},"Conclusion",{"type":28,"tag":29,"props":1425,"children":1426},{},[1427],{"type":33,"value":1428},"Each approach offers its own advantages:",{"type":28,"tag":1430,"props":1431,"children":1432},"ul",{},[1433,1445,1454],{"type":28,"tag":1434,"props":1435,"children":1436},"li",{},[1437,1443],{"type":28,"tag":1438,"props":1439,"children":1440},"strong",{},[1441],{"type":33,"value":1442},"Slot-Based Layouts",{"type":33,"value":1444},": Simple and direct, suitable for smaller applications or when layout customization is minimal.",{"type":28,"tag":1434,"props":1446,"children":1447},{},[1448,1452],{"type":28,"tag":1438,"props":1449,"children":1450},{},[1451],{"type":33,"value":548},{"type":33,"value":1453},": Provides better organization and scalability, particularly for applications with multiple layouts and complex routing requirements.",{"type":28,"tag":1434,"props":1455,"children":1456},{},[1457,1461],{"type":28,"tag":1438,"props":1458,"children":1459},{},[1460],{"type":33,"value":820},{"type":33,"value":1462},": Offers maximum flexibility by dynamically selecting layouts based on route metadata. Ideal for large-scale applications with varying layout needs.",{"type":28,"tag":29,"props":1464,"children":1465},{},[1466],{"type":33,"value":1467},"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":28,"tag":29,"props":1469,"children":1470},{},[1471],{"type":33,"value":1472},"By implementing custom layouts effectively, you can enhance code maintainability and improve the overall user experience of your Vue.js applications.",{"type":28,"tag":1474,"props":1475,"children":1476},"style",{},[1477],{"type":33,"value":1478},"html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":77,"depth":77,"links":1480},[1481,1482,1483,1484],{"id":38,"depth":77,"text":41},{"id":545,"depth":77,"text":548},{"id":817,"depth":77,"text":820},{"id":1420,"depth":77,"text":1423},"markdown","content:blog:vue layouts.md","content","blog/vue layouts.md","md",1708620390889]