[{"data":1,"prerenderedAt":308},["ShallowReactive",2],{"article-slots-in-vue":3,"authors":292},{"id":4,"title":5,"author":6,"body":7,"date":282,"description":283,"extension":284,"meta":285,"navigation":286,"path":287,"seo":288,"stem":289,"thumbnail":290,"__hash__":291},"article\u002Farticle\u002Fslots-in-vue.md","Slots in Vue","ashwin",{"type":8,"value":9,"toc":279},"minimark",[10,14,17,20,26,61,68,88,91,108,114,128,138,141,146,149,154,220,224,254,272,275],[11,12,13],"p",{},"Let's learn how to use slots in Vue.js today.",[11,15,16],{},"Slots are a powerful tool for creating reusable or SFC(Single File Component) in Vue. Slots give you an outlet to place content in new places or make components more generic.",[11,18,19],{},"Here's a simple slot example:",[11,21,22],{},[23,24,25],"code",{},"simpleComponent.vue",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-jsx shiki shiki-themes material-theme-darker","\u003Cdiv>\n  \u003Ch2>I'm a title\u003C\u002Fh2>\n  \u003Cslot>Only displayed if no slot content\u003C\u002Fslot>\n\u003C\u002Fdiv>\n","jsx","",[23,34,35,43,49,55],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,42],{},"\u003Cdiv>\n",[36,44,46],{"class":38,"line":45},2,[36,47,48],{},"  \u003Ch2>I'm a title\u003C\u002Fh2>\n",[36,50,52],{"class":38,"line":51},3,[36,53,54],{},"  \u003Cslot>Only displayed if no slot content\u003C\u002Fslot>\n",[36,56,58],{"class":38,"line":57},4,[36,59,60],{},"\u003C\u002Fdiv>\n",[11,62,63,64,67],{},"Now let's use this component in ",[23,65,66],{},"main.vue"," file",[27,69,71],{"className":29,"code":70,"language":31,"meta":32,"style":32},"\u003Csimple-component>\n  \u003Cp>This will go in the slot\u003C\u002Fp>\n\u003C\u002Fsimple-component>\n",[23,72,73,78,83],{"__ignoreMap":32},[36,74,75],{"class":38,"line":39},[36,76,77],{},"\u003Csimple-component>\n",[36,79,80],{"class":38,"line":45},[36,81,82],{},"  \u003Cp>This will go in the slot\u003C\u002Fp>\n",[36,84,85],{"class":38,"line":51},[36,86,87],{},"\u003C\u002Fsimple-component>\n",[11,89,90],{},"The output would be:",[27,92,96],{"className":93,"code":94,"language":95,"meta":32,"style":32},"language-jsdoc shiki shiki-themes material-theme-darker","I'm title\nThis will go in the slot\n","jsdoc",[23,97,98,103],{"__ignoreMap":32},[36,99,100],{"class":38,"line":39},[36,101,102],{},"I'm title\n",[36,104,105],{"class":38,"line":45},[36,106,107],{},"This will go in the slot\n",[11,109,110,111,113],{},"If the slot content is not added in ",[23,112,66],{}," the output would be:",[27,115,117],{"className":93,"code":116,"language":95,"meta":32,"style":32},"I'm title\nOnly displayed if no slot content\n",[23,118,119,123],{"__ignoreMap":32},[36,120,121],{"class":38,"line":39},[36,122,102],{},[36,124,125],{"class":38,"line":45},[36,126,127],{},"Only displayed if no slot content\n",[129,130,131],"blockquote",{},[11,132,133,134,137],{},"If no Content is provided, it would fallback to default slot content if there is any mentioned in ",[23,135,136],{},"simpleComponent"," as in this case.",[139,140],"br",{},[142,143,145],"h2",{"id":144},"multiple-slots","Multiple Slots",[11,147,148],{},"Now let's look at a scenario where there are different designs and how multiple slots utilise them.",[11,150,151],{},[23,152,153],{},"appLayout.vue",[27,155,157],{"className":29,"code":156,"language":31,"meta":32,"style":32},"\u003Cdiv class=\"container\">\n  \u003Cheader>\n    \u003Cslot name=\"header\">\u003C\u002Fslot>\n  \u003C\u002Fheader>\n  \u003Cmain>\n    \u003Cslot>Default content\u003C\u002Fslot>\n  \u003C\u002Fmain>\n  \u003Cfooter>\n    \u003Cslot name=\"footer\">\u003C\u002Fslot>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n",[23,158,159,164,169,174,179,185,191,197,203,209,215],{"__ignoreMap":32},[36,160,161],{"class":38,"line":39},[36,162,163],{},"\u003Cdiv class=\"container\">\n",[36,165,166],{"class":38,"line":45},[36,167,168],{},"  \u003Cheader>\n",[36,170,171],{"class":38,"line":51},[36,172,173],{},"    \u003Cslot name=\"header\">\u003C\u002Fslot>\n",[36,175,176],{"class":38,"line":57},[36,177,178],{},"  \u003C\u002Fheader>\n",[36,180,182],{"class":38,"line":181},5,[36,183,184],{},"  \u003Cmain>\n",[36,186,188],{"class":38,"line":187},6,[36,189,190],{},"    \u003Cslot>Default content\u003C\u002Fslot>\n",[36,192,194],{"class":38,"line":193},7,[36,195,196],{},"  \u003C\u002Fmain>\n",[36,198,200],{"class":38,"line":199},8,[36,201,202],{},"  \u003Cfooter>\n",[36,204,206],{"class":38,"line":205},9,[36,207,208],{},"    \u003Cslot name=\"footer\">\u003C\u002Fslot>\n",[36,210,212],{"class":38,"line":211},10,[36,213,214],{},"  \u003C\u002Ffooter>\n",[36,216,218],{"class":38,"line":217},11,[36,219,60],{},[11,221,222],{},[23,223,66],{},[27,225,227],{"className":29,"code":226,"language":31,"meta":32,"style":32},"\u003Capp-layout>\n  \u003Ch1 slot=\"header\">Page title\u003C\u002Fh1>\n  \u003Cp>the main content.\u003C\u002Fp>\n  \u003Cp slot=\"footer\">Contact info\u003C\u002Fp>\n\u003C\u002Fapp-layout>\n",[23,228,229,234,239,244,249],{"__ignoreMap":32},[36,230,231],{"class":38,"line":39},[36,232,233],{},"\u003Capp-layout>\n",[36,235,236],{"class":38,"line":45},[36,237,238],{},"  \u003Ch1 slot=\"header\">Page title\u003C\u002Fh1>\n",[36,240,241],{"class":38,"line":51},[36,242,243],{},"  \u003Cp>the main content.\u003C\u002Fp>\n",[36,245,246],{"class":38,"line":57},[36,247,248],{},"  \u003Cp slot=\"footer\">Contact info\u003C\u002Fp>\n",[36,250,251],{"class":38,"line":181},[36,252,253],{},"\u003C\u002Fapp-layout>\n",[11,255,256,257,260,261,264,265,268,269,271],{},"Now if you see, the ",[23,258,259],{},"header"," value is mentioned for slot value for ",[23,262,263],{},"h1"," tag and value ",[23,266,267],{},"footer"," for slot value ",[23,270,11],{}," tag. And default slot will hold the p tag with \"the main content\" content.",[11,273,274],{},"Hope you found this short article useful. If so hit the 👍🏻❤️",[276,277,278],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":32,"searchDepth":45,"depth":45,"links":280},[281],{"id":144,"depth":45,"text":145},"2020-05-12T04:50:58.236Z","Slots are a powerful tool for creating reusable components in Vue.js.","md",{},true,"\u002Farticle\u002Fslots-in-vue",{"title":5,"description":283},"article\u002Fslots-in-vue","\u002Fimg\u002Fframe-14.jpg","fGkhenIkUUJBN6VcGJjunOkKYQyldiaEcu8l_DI-UeU",{"id":293,"extension":294,"meta":295,"stem":306,"__hash__":307},"author\u002Fauthor\u002FauthorDetails.json","json",{"body":296},[297,301],{"id":6,"fullName":298,"description":299,"image":300},"Ashwin K Shenoy","Hi! I am Ashwin, an Software Engineer and Consultant based out of Bengaluru, India.","https:\u002F\u002Fsimpletech.xyz\u002Fimg\u002Fauthor\u002Fashwin.jpg",{"id":302,"fullName":303,"description":304,"image":305},"paul","Paul Shan","Hello! I am Paul, a front end engineer and consultant based out of Bengaluru, India.","https:\u002F\u002Fashwinshenoy.com\u002Fimg\u002Fashwin2.jpg","author\u002FauthorDetails","k8atXxcwAcv_rjC8llPba18X62upiKWYGU5dL4-S4lw",1782187479717]