"Alert Component From Scratch" source.

Alert.vue

<template>
    <div class="Alert Alert--{{ type | capitalize }}" 
         v-show="show"
         transition="fade"
    >
        <slot></slot>

        <span class="Alert__close" 
              v-show="important" 
              @click="show = false"
        >
            x
        </span>
    </div>
</template>

<script>
    export default {
        props: {
            type: { default: 'info' },
            timeout: { default: 3000 },
            important: { 
                type: Boolean,
                default: false
            }
        },

       data() {
           return { show: true };
       },

       ready() {
           if (! this.important) {
               setTimeout(
                    () => this.show = false,
                    this.timeout
               )
           }
       }
    }
</script>

<style>
    .Alert {
        padding: 10px;
        position: relative;
    }

    .Alert--Info {
        background: #e3e3e3;    
    }

    .Alert--Success {
        background: green;
        color: white;
    }

    .Alert__close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .fade-transition {
        transition: opacity .4s ease;
    }

    .fade-leave {
        opacity: 0;    
    }
</style>

Gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.browserify('main.js');
});

main.js

import Vue from 'Vue';
import Alert from './components/Alert.vue';

new Vue({
    el: 'body',

    components: { Alert }
})