Vue.js 3 Toast

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

by Ankur Kumar

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification@3"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-toast-notification@3/dist/theme-bootstrap.css">
<div id="app">
  <h1>
    Vue 3 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

const app = Vue.createApp({
  methods: {
    open() {
      this.$toast.open({
        message: "Test message from Vue",
        type: "success",
        duration: 1000 * 10,
        dismissible: true
      })
    }
  }

});
app.use(VueToast.ToastPlugin);
app.mount('#app')