How To Use Vuejs Slots – A Definitive Guide

Vusjs slots are useful for creating reusable components. It provides powerful ways to pass HTML from a parent component to a child component using a slot element in the child component. In this tutorial, you will learn how to use vuejs slots. At present, you need basic knowledge of vuejs and its components. Official documentation can be found here.

# Using VueJS Slots

To begin with, create two components App.vue and Button.vue. Using slot element in Button.vue will allow App.vue to pass dynamic DOM to the Button.vue. Moreover, slots can be used with many ways, but we’ll discuss it further. For now, let’s create simple functionality using slots.

/* src > App.vue */

<template>
    <div id="app">
        <Button>Test</Button>
        <Button>Test 2</Button>
    </div>
</template>

<script>
import Button from "@/Button";

export default {
    components: {
        Button
    }
}
</script>

/* src > Button.vue */

<template>
    <button>
        <slot></slot>
    </button>
</template>

<script>

export default {
    name: 'Button',
}
</script>

As you can see, passing data into Button directive into App.vue component will reflect changes inside Button.vue component. But what if, you pass nothing into Button directive? Of course, you can define default properties into slots too.

# Default Values

Defining default or fallback value will automatically render content if the parent component omits to pass any content inside a slot. To begin with, let’s define fallback content into a slot in Button.vue. After that, define add blank Button directive into App.vue to check. Button directive will render default content. Not only strings but also templates can be rendered using slots.

Similarly, omitting to define slots into a child component, using any content inside the child component from the parent component will automatically be discarded.

/* src > Button.vue */

<template>
    <button>
        <slot>Default</slot>
    </button>
</template>

<script>

export default {
    name: 'Button',
}
</script>

/* src > App.vue */

<template>
    <div id="app">
        <Button></Button>
        <Button>Test</Button>
    </div>
</template>

<script>
import Button from "@/Button";

export default {
    components: {
        Button
    }
}
</script>

# Vuejs Slots Names – Using Multiple Slots

Furthermore, multiple slots can be added to child components. In that case, there is a specific attribute called the name. Every name attribute contains a unique name, to determine which content to be rendered from a parent component. Obviously, omitting the name attribute will be used as default slot. Let’s create one more component called Layout.vue.

/* src > Layout.vue */

<template>
    <div>
        <div class="heading">
            <slot name="heading"></slot>
        </div>
        <div class="container">
            <slot></slot>
        </div>
        <div class="copyright">
            <slot name="copyright"></slot>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Layout',
}
</script>

/* src > App.vue */

<template>
    <div id="app">
        <layout>
            <template v-slot:heading>
                This is heading
            </template>
            This is default slot, without defining name
            <template v-slot:copyright>
                This is heading
            </template>
        </layout>
    </div>
</template>

<script>
import Layout from "@/Layout";

export default {
    components: {
        Layout
    }
}
</script>

As you can see in App.vue template there is v-slot with name property which is defined in Layout.vue. Besides, there is a slot without name which will automatically injected as a default slot.

# Using Shorthand

Additionally, shorthand properties also available for v-slot. You can use # character to define shorthand. Keep in mind, that an argument is necessary when using shorthand. For example, when using a default slot for shorthand, you must assign #default argument.

/* src > App.vue */
    
<template>
    <div id="app">
        <layout>
            <template #heading>
                This is heading
            </template>
            <template #default>
                This is default slot, with shorthand    
            </template>            
            <template #copyright>
                This is heading
            </template>
        </layout>
    </div>
</template>

<script>
import Layout from "@/Layout";

export default {
    components: {
        Layout
    }
}
</script>

Thank you very much for reading this tutorial. Please support with sharing or comment. Have a great day!