DEV Community

Cover image for πŸ› οΈ Vue Tip: Creating Reusable Components with Slots
Abanoub George
Abanoub George

Posted on

πŸ› οΈ Vue Tip: Creating Reusable Components with Slots

πŸ› οΈ Vue Tip: Creating Reusable Components with Slots

In Vue.js, creating reusable components is essential for building maintainable and scalable applications. One powerful feature that Vue offers for enhancing reusability is slots. Slots allow you to compose components in a flexible and versatile manner, enabling you to pass content from a parent component to a child component.

What Are Slots?

Slots in Vue.js are placeholders inside your components that can be filled with content provided by the parent component. They make it possible to create highly reusable and configurable components.

Types of Slots

Vue provides three types of slots:

  1. Default Slot
  2. Named Slots
  3. Scoped Slots

Let's dive into each type with examples.

Default Slot

The default slot is the simplest form of slots. It allows you to pass content from the parent component to the child component.

Example:

Parent Component:

<template>
  <div>
    <Card>
      <p>This is some content for the card.</p>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue';
</script>
Enter fullscreen mode Exit fullscreen mode

Child Component (Card.vue):

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

In this example, the content inside the <Card> component in the parent is passed to the Card component and rendered within the <slot> element.

Named Slots

Named slots allow you to define multiple slots with different names, giving you more control over where the content is injected.

Example:

Parent Component:

<template>
  <div>
    <Card>
      <template #header>
        <h3>Card Header</h3>
      </template>
      <template #body>
        <p>This is the body of the card.</p>
      </template>
      <template #footer>
        <small>Card Footer</small>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from './Card.vue';
</script>
Enter fullscreen mode Exit fullscreen mode

Child Component (Card.vue):

<template>
  <div class="card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
}
.header, .body, .footer {
  margin-bottom: 8px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

With named slots, you can specify different sections of your component to be filled with content.

Scoped Slots

Scoped slots allow you to pass data from the child component back to the parent component, enabling more dynamic and flexible components.

Example:

Parent Component:

<template>
  <div>
    <ItemList :items="items">
      <template #default="slotProps">
        <li>{{ slotProps.item.name }} - {{ slotProps.item.price }}</li>
      </template>
    </ItemList>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ItemList from './ItemList.vue';

const items = ref([
  { name: 'Item 1', price: '$10' },
  { name: 'Item 2', price: '$20' },
]);
</script>
Enter fullscreen mode Exit fullscreen mode

Child Component (ItemList.vue):

<template>
  <ul>
    <slot :item="item" v-for="item in items" :key="item.name"></slot>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
});
</script>
Enter fullscreen mode Exit fullscreen mode

In this example, the child component (ItemList) passes each item object to the parent component, allowing the parent to render the items dynamically.

Conclusion

Using slots in Vue.js is a powerful way to create flexible and reusable components. Whether you're using default slots, named slots, or scoped slots, this feature can significantly enhance the modularity and maintainability of your application.

Read More

For more tips and tricks on Vue.js, check out my previous articles:

  1. Vue Once Watchers: Execute Callbacks Only Once
  2. Simpler Two-Way Binding in Vue with defineModel

Happy coding! πŸš€

Top comments (2)

Collapse
 
damian_cyrus profile image
Damian Cyrus

Thank you for this post, as well as for using the Compose API. I'm seeing a lot of developers write in the Options API, but I prefer it this way. ☺️

Collapse
 
arafatweb profile image
Arafat Hossain Ar

Thanks. I going to save it. Very much useful for me.