Vue Notifications

We use a Vue component to display messages based on success or failure in our Laravel application. We use a Vue Transition wrapper component for these notifications to be precise.

Vue provides a transition wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:

  • Conditional rendering (using v-if)
  • Conditional display (using v-show)
  • Dynamic components
  • Component root nodes


In our case we use the v-show directive to display messages based on input from our other components like so

// Notify the user
EventBus.$emit('showSuccess', 'module copied!');

which would be connected to

showSuccess: function() {
    this.showSuccessHandler = true;
    setTimeout( this.hide, 4000);
hide: function() {
    this.showSuccessHandler = false;
    this.showErrorHandler = false;

We did not apply any transition classes like v-enter or v-enter-active

As for the template block showing the success message we use:

<transition name="fadeswing">
  <div class="message-handler error row" v-show="showErrorHandler">
      <div class="col-md-2 text-center"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></div>
      <div class="col-md-8">{{ message }}</div>
      <div class="col-md-2 text-center"><i class="fa fa-times" aria-hidden="true" @click="hide()"></i></span></div>
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.