Passing Content in Component using Slots

In this lesson, let’s learn about slots in Component and how we can use them to pass the content into the Components.

Consider you are working with the Bootstrap framework, where to display an alert box you have to put the following mark-up in your HTML.

<div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>

And this gives you a simple alert box in the HTML with basic styling.

There are different colors of text boxes for different class attached to the alert box, For details read Bootstrap Alert

We are looking to make a Vue Component version of this Alert Box wherein we can get the same output with a shorter element and along with a relevant font-awesome icon just before the content.

So <alert-success>Here is our success message<.alert-success> Will give you the following output.

alert-success-bootstrap-vue

Let’s see how we can achieve this with Vue Component.

        Vue.component('alert-success',{
            template: `<div class="alert alert-success" role="alert">
                        <i class="fa fa-check-circle"></i> <slot></slot>
                        </div>`
        });

        let app = new Vue({
            el: '#app',
        });

We have defined the basic markup of Bootstrap Alert inside the template of our component. And in the content we have a font-awesome icon defined followed by slot element.

As you’ll see above, we just add the slot where we want our content to go – and that’s it. We’re done!

In our HTML we can now use the following markup anywhere in your HTML to show success alert box.

<alert-sucess>Your content</alert-sucess>

You can now build similar Bootstrap alert component for other alert boxes.

Related Articles

If you like our content, please consider buying me a coffee.

Thank you for your support!

Buy me a coffeeBuy me a coffee

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Leave a reply:

    Your email address will not be published.

    Site Footer