Vue Notification Alert For (Success, Error, Warning)

In this post I am going to share simple vue script which you to create notification alert messages on your website page with different different purposes like success, error, warning, info etc. You can publish alert notification on any action and display top right corder of the page with dismiss button.

Vue Notification Alert

HTML

<div id="app">
  <h1>TEST Notification</h1>
  <notification :notice="notice"></notification>
</div>


CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 100%/1.6 sans-serif;
}
#app {
  display: flex;
  height: 100vh;
}
h1 {
  margin: auto;
}
.Notification {
  width: 320px;
  position: fixed;
  z-index: 100;
  top: 1em;
  right: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.Notification .notice {
  background: #fff;
  box-shadow: 0 0 1em -0.5em #000, -0.5em 1em 5em -1em rgba(0,0,0,0.7);
  padding: 1em;
  position: relative;
}
.Notification .close {
  cursor: pointer;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  stroke: #ccc;
}
.Notification .close:hover {
  stroke: #000;
}
.Notification .title {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 0.7rem;
}
.Notification .body {
  line-height: 1.4;
  color: #333;
  font-size: 90%;
}
.notice {
  border-left: 0.5em solid transparent;
}
.notice.success {
  border-color: #03a9f4;
}
.notice.danger {
  border-color: #ec4758;
}
.notice.warning {
  border-color: #f7a54a;
}
.notice.primary {
  border-color: #18a689;
}
.notice.info {
  border-color: #21b9bb;
}
.type {
  font-size: 80%;
}
.type.success {
  color: #03a9f4;
}
.type.danger {
  color: #ec4758;
}
.type.warning {
  color: #f7a54a;
}
.type.primary {
  color: #18a689;
}
.type.info {
  color: #21b9bb;
}


JS

const TEST = [ 
  {
    title: 'Notification title',
    body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam explicabo repellat blanditiis, aperiam beatae eos dolor voluptas eveniet!',
    type: 'success'
  },{
    title: 'Notification title',
    body: 'Amet laborum aspernatur atque. Assumenda, impedit. Adipisci impedit laudantium odio, veritatis earum magni non voluptatem provident, sint iste voluptate ipsum repellendus accusamus.',
    type: 'danger'
  },{
    title: 'Notification title',
    body: 'Architecto ratione iste laboriosam inventore atque facere, iusto sunt error autem facilis voluptas culpa assumenda aliquam cumque! Unde explicabo est odit sit.',
    type: 'warning'
  },{
    title: 'Notification title',
    body: 'Labore id praesentium necessitatibus corporis odit ratione quos eum delectus porro, eos suscipit cum earum officia expedita deleniti. Laborum itaque libero rerum!',
    type: 'primary'
  },{
    title: 'Notification title',
    body: 'Vitae corporis fugit aspernatur praesentium impedit iste eaque adipisci ratione, animi porro libero deserunt, est dolore omnis ullam. Quod nobis incidunt cum.',
    type: 'info'
  },{
    title: 'Notification title',
    body: 'Ducimus minima obcaecati tempore eaque libero aliquam commodi natus rerum cupiditate, doloribus culpa vitae dolorum? Culpa distinctio, deleniti hic dolores officia quo?',
    type: 'danger'
  },{
    title: 'Notification title',
    body: 'Repellendus quod aliquid ad, quae harum similique facilis aliquam. Dolorum deserunt alias officia atque dolor, voluptas harum. Inventore reiciendis reprehenderit provident!',
    type: 'primary'
  } 
];
 
function randomInt(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  rand = Math.round(rand);
  return rand;
};
 
Vue.component('notification', {
  template: 
  `
  <div class="Notification" v-show="notice">
    <div class="notice" :class="notice.type">
      <svg @click="notice=!notice" class="close" width="20" height="20" viewbox="0 0 20 20" stroke-width="2">
        <line x1="3" y1="3" x2="17" y2="17"></line>
        <line x1="3" y1="17" x2="17" y2="3"></line>
      </svg>
      <div class="title">
        <i class="type" :class="notice.type">{{notice.type}}</i>
        {{notice.title}}
      </div>
      <div class="body">{{notice.body}}</div>
    </div>
  </div>
  `,
  props: {
     notice: {
      type: [Object, Array]
    },
  },
});
 
setInterval(() => ( vm.$data.index = randomInt(0, 6) ), randomInt(100, 5000) );
const vm = new Vue({
  el: "#app",
  data: {
    index: 0
  },
  computed: {
    notice() {return TEST[this.index]}
  },
  methods: {}
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by dimaZubkov. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.