Vue Slots
Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates
Scaling Up Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API
Vue Reference Vue Built-in Attributes Vue Built-in AttributesVue ‘is’ AttributeVue ‘key’ AttributeVue ‘ref’ Attribute Vue Built-in Components Vue Built-in Components<KeepAlive><Teleport><Transition><TransitionGroup> Vue Built-in Elements Vue Built-in Elements<component><slot><template> Vue Component Instance Vue Component Instance$attrs$data$el$parent$props$refs$root$slots$emit()$forceUpdate()$nextTick()$watch() Vue Directives Vue Directivesv-bindv-cloakv-forv-htmlv-ifv-else-ifv-elsev-memov-modelv-onv-oncev-prev-showv-slotv-text Vue Instance Options Vue Instance Optionsdatamethodscomputedwatchpropsemitsexpose Vue Lifecycle Hooks Vue Lifecycle HooksbeforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmountederrorCapturedrenderTrackedrenderTriggeredactivateddeactivatedserverPrefetch
Vue Examples Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate ❮ PreviousNext ❯ Slots are a powerful feature in Vue that allow for more flexible and reusable components.
We use slots in Vue to send content from the parent into the <template> of a child component.
Slots So far we have just used components inside <template> as self-closing tags like this:
App.vue:
<template> <slot-comp /> </template> Instead, we can use opening and closing tags, and put some content inside, like for example a text:
App.vue:
<template> <slot-comp>Hello World!</slot-comp> </template> But to receive ‘Hello World!’ inside the component and display it on our page, we need to use the <slot> tag inside the component. The <slot> tag acts as a placeholder for the content, so that after the application is built the <slot> will be replaced by the content sent to it.
Example SlotComp.vue:
<template> <div> <p>SlotComp.vue</p> <slot></slot> </div> </template> Run Example » SlotComp.vue:
<template> <div> <p>SlotComp.vue</p> <slot></slot> </div> </template> Run Example »
Slots as Cards Slots can also be used to wrap around larger chunks of dynamic html content to get a card-like appearance.
Earlier we have sent data as props to create content inside components, now we can just send the HTML content directly inside the <slot> tag as it is.
Example App.vue:
<template> <h3>Slots in Vue</h3> <p>We create card-like div boxes from the foods array.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> <p>{{x.desc}}</p> </slot-comp> </div> </template> As the content enters the component where the <slot> is, we use a div around the <slot> and style the <div> locally to create a card-like appearance around the content without affecting other divs in our application.
SlotComp.vue:
<template> <div> <!– This div makes the card-like appearance –> <slot></slot> </div> </template> <script></script> <style scoped> div { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px; margin: 10px; } </style> Run Example » App.vue:
<template> <h3>Slots in Vue</h3> <p>We create card-like div boxes from the foods array.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> <p>{{x.desc}}</p> </slot-comp> </div> </template> As the content enters the component where the <slot> is, we use a div around the <slot> and style the <div> locally to create a card-like appearance around the content without affecting other divs in our application.
SlotComp.vue:
<template> <div> <!– This div makes the card-like appearance –> <slot></slot> </div> </template> <script></script> <style scoped> div { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px; margin: 10px; } </style> Run Example » Components that produce a card-like frame around content can be reused to create different elements, but with the same card-like frame around.
In this example we use the same component as for the food items to create a footer.
Example App.vue:
<template> <h3>Reusable Slot Cards</h3> <p>We create card-like div boxes from the foods array.</p> <p>We also create a card-like footer by reusing the same component.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> </slot-comp> </div> <footer> <slot-comp> <h4>Footer</h4> </slot-comp> </footer> </template> Run Example » App.vue:
<template> <h3>Reusable Slot Cards</h3> <p>We create card-like div boxes from the foods array.</p> <p>We also create a card-like footer by reusing the same component.</p> <div id=“wrapper”> <slot-comp v-for=“x in foods”> <img v-bind:src=“x.url”> <h4>{{x.name}}</h4> </slot-comp> </div> <footer> <slot-comp> <h4>Footer</h4> </slot-comp> </footer> </template> Run Example »
Fallback Content If a component is created without content we can have fallback content in the <slot>.
Example The first component in this application has no content provided, so the fallback content is rendered.
App.vue:
<template> <h3>Slots Fallback Content</h3> <p>A component without content provided can have fallback content in the slot tag.</p> <slot-comp> <!– Empty –> </slot-comp> <slot-comp> <h4>This content is provided from App.vue</h4> </slot-comp> </template> SlotComp.vue:
<template> <div> <slot> <h4>This is fallback content</h4> </slot> </div> </template> Run Example » The first component in this application has no content provided, so the fallback content is rendered.
App.vue:
<template> <h3>Slots Fallback Content</h3> <p>A component without content provided can have fallback content in the slot tag.</p> <slot-comp> <!– Empty –> </slot-comp> <slot-comp> <h4>This content is provided from App.vue</h4> </slot-comp> </template> SlotComp.vue:
<template> <div> <slot> <h4>This is fallback content</h4> </slot> </div> </template> Run Example »
Vue Exercises ❮ PreviousNext ❯ ★+1 W3schools PathfinderTrack your progress - it’s free! Log in Sign Up If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:[email protected]
Report Error If you want to report an error, or if you want to make a suggestion, send us an e-mail:[email protected]
HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples
