Use Slot in Vue Ant Design

Ant design vue provides the modern ui with the high quality vue components to make the web development faster.

Slot is one of the best feature provide by Vue. This is a placeholder, a space to fill with some content. There are ways to use the slot in our applications.

But, how can we use the slot to pass the text, a custom markup, a component to the vue ant design components.

Let’s go with an example.

A card component takes many properties as of various types boolean, string, object, array and slot.

Card Api — https://vue.ant.design/components/card/#API

Sample Card Component

<Card v-bind:bordered=”false”>
    <Badge :count="129" slot="extra" :offset="[-10,0]">
      <Avatar :size="64" style="backgroundColor:#0057ff">TKZ/Avatar>
    </Badge>
</Card>

So, to use the slot as the property of the component, we need to pass data to the component as children and add the “slot=<name of the property>” in our example, we are using the “extra” placeholder in the card component.

Take a look the card component in action

My Name is Tarun Kalra. I am a Sr. Frontend Developer at Publicis.Sapient
If you enjoyed this article, please clap n number of times and share it! Thanks for your time.