Vue.js 2 Toast

https://github.com/ankurk91/vue-toast-notification

by Ankur Kumar

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification@1"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-toast-notification@1/dist/theme-bootstrap.css">
<div id="app">
  <h1>
    Vue 2 toast
  </h1>
  <button @click="open">
    Show toast
  </button>
  <hr>
  <a target="_blank" href="https://ankurk91.github.io/vue-toast-notification">More examples</a>
</div>

CSS

body {
  font-family: Arial, Verdana, sans-sarif;
  background: #f8f8f8;
}

JavaScript

Vue.use(VueToast, {
  // global options
});

var app = new Vue({
  el: "#app",
  methods: {
    open() {
      this.$toast.open({
        message: "Test message from Vue",
        type: "success",
        duration: 5000,
        dismissible: true
      })
    }
  }
})