{"id":13271,"date":"2025-08-20T07:41:14","date_gmt":"2025-08-20T07:41:14","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13271"},"modified":"2025-08-21T13:29:45","modified_gmt":"2025-08-21T13:29:45","slug":"show-slot-only-if-it-has-content","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/show-slot-only-if-it-has-content","title":{"rendered":"Only Show Slot If It Has Content"},"content":{"rendered":"<h3>Use v-if and $slots in your child component<\/h3>\n<p>In Vue 2 or Vue 3 (Options API), you can check if the slot has content using this.$slots.default.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-13276\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092332\/child-compont.png\" alt=\"child-compont\" width=\"480\" height=\"270\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092332\/child-compont.png 480w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092332\/child-compont-300x169.png 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/p>\n<h3>Explanation:<\/h3>\n<ul>\n<li>v-if=&#8221;$slots.default&#8221; checks if the default slot has been passed content.<\/li>\n<li>This prevents the from rendering if nothing was passed in the parent.<\/li>\n<\/ul>\n<h2>Example:<\/h2>\n<p><strong>Parent Component<\/strong><br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-13277\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092512\/parant-comp.png\" alt=\"\" width=\"463\" height=\"229\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092512\/parant-comp.png 463w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092512\/parant-comp-300x148.png 300w\" sizes=\"(max-width: 463px) 100vw, 463px\" \/><\/p>\n<p><strong>Child Component<\/strong><\/p>\n<ul>\n<li>The <strong>first <\/strong>ChildComponent will render the slot content.<\/li>\n<li>The <strong>second <\/strong>ChildComponent will render nothing inside the div, because there\u2019s no slot content.<\/li>\n<\/ul>\n<p><strong>Notes:<\/strong><\/p>\n<ul>\n<li>This works for <strong>default slots<\/strong>. For named slots, you can use $slots[&#8216;name&#8217;].<\/li>\n<li>In script setup (Vue 3 Composition API), you can use useSlots():<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-13279\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092801\/default-img.png\" alt=\"\" width=\"465\" height=\"266\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092801\/default-img.png 465w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/08\/20092801\/default-img-300x172.png 300w\" sizes=\"(max-width: 465px) 100vw, 465px\" \/><\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/top-21-amazing-vuejs-projects\" target=\"_blank\">VueJs Projects<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use v-if and $slots in your child component In Vue 2 or Vue 3 (Options API), you can check if the slot has content using this.$slots.default. Explanation: v-if=&#8221;$slots.default&#8221; checks if the default slot has been passed content. This prevents the from rendering if nothing was passed in the parent. Example: Parent Component Child Component The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-13271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13271"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13271"}],"version-history":[{"count":6,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13271\/revisions"}],"predecessor-version":[{"id":13314,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13271\/revisions\/13314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13275"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}