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

link https://vuejs.org/v2/guide/transitions.html

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>
  </div>
</transition>