Vue Component Exercise : Bulma Message Component

As a part of Learning Vue, This is a beginner exercise where I will take the message component on Bulma framework and will convert it into Vue Component.

Here is how the bulma message component looks like.

<article class="message">
<div class="message-header">

Hello World

&nbsp;

</div>
<div class="message-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.</div>
</article>

With Vue Component we will try to make this simpler, so that we can define a message component in our HTML with something simple like

<message title="Hello World" body="Lorem ipsum blah blah blah"/>

Also we will get the close button on the message component to dismiss the Message box from the screen via Vue.

Here is how our component looks like

Vue.component('message',{
        template: `<div><article class="message" v-show="isVisible">
                    <div class="message-header">
                      <p>{{title}}</p>
                      <button @click="isVisible = false" class="delete" aria-label="delete"></button>
                    </div>
                    <div class="message-body">
                        {{body}}
                    </div>
                </article>
                
                <button v-show="!isVisible" @click="isVisible = true"> Show Message </button></div>`,

        props: ['title', 'body'],
        
        data(){
            return {
                isVisible : true
            }
        }

    });

As you notice, we have defined the template of our component as same as the bulma message component and have properties title and body to display.
To be able to display title and body we have to accept the properties via props declaration.

To make the dismiss button working, we have defined a data property isVisible which is true by default and on the click action of the button we make it false.

v-show directive is used to show or hide the message box.

Code:

https://github.com/tushargugnani/vue-examples/blob/master/bulma-message.html

Working Demo:

https://tushargugnani.github.io/vue-examples/bulma-message.html