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.

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