Blog Detail

13

Oct
Mosha Vue Toastify - A Vue 3 toast or Notification Library cover image

Mosha Vue Toastify - A Vue 3 toast or Notification Library

Mosha Vue Toastify is a lightweight and fun Vue 3 toast, notification library introduced by Baidi Liu. It has an elegant UI and is easy to use. You can view its demo here.

Features

  • Super easy to set up.
  • 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 the remaining time
  • A lot more coming!

installation

You can install this package via Npm or Yarn.

With NPM:

npm install mosha-vue-toastify

With Yarn:

$ yarn add mosha-vue-toastify

Usage

After the installation, You've to import this component into your file or vue component.

<template>
  <button @click="toast">Toast it!</button>
</template>
<script lang='ts'>
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'

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

Configuration

The createToast function accepts 2 arguments:

First argument:

  • It can be just a string or an object like this: { title: 'some title', description: 'some good description'}. By the way, the description now accepts HTML, for more customization, we recommend trying out the custom component approach
  • It can also accept a Vue 3 component or a VNode if you need more customization, e.g.
  // without props
  import { createToast } from 'mosha-vue-toastify';
  import CustomizedContent from "./CustomizedContent.vue";
  import 'mosha-vue-toastify/dist/style.css';

  export default defineComponent({
    setup () {
      const toast = () => {
          createToast(CustomizedContent)
      }
      return { toast }
    }
  })
  // with props
  import { createToast, withProps } from 'mosha-vue-toastify';
  import CustomizedContent from "./CustomizedContent.vue";
  import 'mosha-vue-toastify/dist/style.css';

  export default defineComponent({
    setup () {
      const toast = () => {
          createToast(withProps(CustomizedContent, { yourFavProp: 'bruh' }))
      }
      return { toast }
    }
  })

Second argument: The second argument is an options object.

name type default description
type 'info', 'danger', 'warning', 'success', 'default' default Give the toast different styles and icons.
timeout number 5000 How many ms do you want the toggle to close itself? Note: passing -1 to the timeout will stop the modal from closing.
position 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center' 'top-right' Where do you want the toast to appear?
showCloseButton boolean true Do you wanna show the close button ?
showIcon boolean false Do you wanna show the icon ?
transition 'bounce', 'zoom', 'slide' 'bounce' Which animation do you want?
hideProgressBar boolean false Do we wanna hide the fancy progress bar?
swipeClose boolean true Allows the user swipe close the toast
toastBackgroundColor string default color Customize the background color of the toast.
onClose function N/A This function will be called at the end of the toast's lifecycle

Programatically closing The createToast function returns an object that contains a close funtion that allows the user to programatically dismiss the toast. See below:

    import { createToast } from 'mosha-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'mosha-vue-toastify/dist/style.css';

    export default defineComponent({
      setup () {
        const toast = () => {
            // This close function can be used to close the toast
            const { close } = createToast(CustomizedContent)
            // close()
        }

        return { toast }
      }
    })

To clear all the toasts, use the clearToasts function. See below

    import { createToast, clearToasts } from 'mosha-vue-toastify';
    import CustomizedContent from "./CustomizedContent.vue";
    import 'mosha-vue-toastify/dist/style.css';

    export default defineComponent({
      setup () {
        const clear = () => {
          // clears all the toasts
          clearToasts()
        }

        return { clear }
      }
    })

Github: mosha-vue-toastify

Website: Mosha Vue Toastify

Published at : 13-10-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project