A light-weight and easy to use toast notification in Vue.js – mosha-vue-toastify


Category: Vue.js Vue.js Notifications | August 2, 2021
Author: szboynono
Official Page: Go to website
Last Update: August 2, 2021
License: MIT

toast notification vuejs

Description:

A fully customizable, light weight and easy to use toast notification in Vue.js with option to show the progress bar to the user and display remaining time.

Features:

  • Super easy to setup
  • Swipe to close
  • Support for Composition API
  • Written in typescript, full typescript support
  • Super light weight
  • Define behavior per toast
  • Fun progress bar to display remaining time

You might be interested in:

How to use it?

1. Install the toast notification component with npm or yarn.

#npm
npm install mosha-vue-toastify

#yarn
yarn add mosha-vue-toastify

2. Import the required component in your file.

import { defineComponent } from 'vue'
// import the library
import { createToast } from 'mosha-vue-toastify';
// import the styling for the toast
import 'mosha-vue-toastify/dist/style.css'

3. Then, create the the template for toast notification:

<template>
  <button @click="toast">Toast it!</button>
</template>

4. The Vue.js code that will do the rest.

export default defineComponent({
  name: 'HelloWorld',
  setup () {
    const toast = () => {
        createToast('Wow, easy')
    }
    return { toast }
  }
})