How do you deconstruct a vue js message?

Tip of the week

Created on: October 18, 2017

Updated on: October 18, 2017

A few months ago, I had the opportunity of implementing a vue js message in to our web development services project. The message that we are concerned with is a cookie policy message where a notification message is shown to the user kindly requesting that the customer can view our cookie policy on an adjacent web page. I wanted to share with you how our implementation could work for the web development services you provide as well.

Our message is contained within a vue component called message.vue this is shown in the screenshot below:

Picture containing cookie policy message

As you may know vuejs messaging is concerned with behaviour and this is what we will be focusing on in our tip of the week.

How we have structured our vue js template?

Vue components usually consist of the template, script and style all within the same file.

Template

<template>

    <article class="orm-message" v-show="isVisible">
        <button type="button"  class="alert-button" @click="hideModal"><i class="fa fa-times-circle-o" aria-hidden="true"></i></button>
        <div class="orm-body">
            <h4 class="alert-notify">{{ body }}
                <a href="https://ormrepo.co.uk/cookie" class="find-link">Click here to find out more</a>
                </h4>
        </div><!-- /.orm-body -->
    </article><!-- /.orm-message -->

</template>

We have an article and wrapped within that we have a button with an @click attached to the button. The @click contains a behavioural action and this spawns the hideModal method.

The body of the message contains the message that we wish to display to the potential customers for our web development services on offer. Just underneath the body of the message is the link that directs the customers to our cookie policy.

Script

<script>
    export default {

        props: ['body'],

        data() {
            return {
                isVisible: true
            };

        },

        mounted() {
            console.log('Component ready.')
        },

        methods: {
            hideModal() {
                this.isVisible = false;

            }
        }

    }
</script>

The script is shown as soon as the web page loads as you have seen in the screenshot at the top of the page.

On loading the hideModal isVisible is set to true. When the customer selects, the cross button the hideModal isVisible is set to false.

Style


.orm-message {
        background-color: #f3f3f3;
        color: #F8F8F8;
        min-height: 70px;
        border-radius: 2px;
        width: 100%;
    }

    .orm-body {
        padding-left: 200px;
    }

@media screen and (min-width: 981px) and (max-width: 1381px) {

    .orm-message {
        background-color: #f3f3f3;
        color: #F8F8F8;
        min-height: 70px;
        border-radius: 2px;
        width: 100%;
    }

    .orm-body {
        padding-left: 200px;
    }

}

Here we have the styling for our orm-message. This consists of various properties that we set on our element to provide a consistent feel to our application, in-line with our other web development services.

CSS styling helps to provide a more consistent feel to our application and we have included media queries which help to reduce the width and height of the message depending on the device that you are viewing the notification.

To conclude in our article you have seen the anatomy of a vue messaging system works, vuejs notifications are useful additions to any web development services specifically for applications.

Stay tuned for further tips and tricks from www.ormrepo.co.uk/blogs. The link also provides information about the web development services we offer.