A lightweight toast or notification or snack bar for vue3

Mosha Vue Toastify

A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

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
• A lot more coming!

Installation

With NPM:

$ npm install mosha-vue-toastify

With Yarn:

$ yarn add mosha-vue-toastify

The gist

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

<script lang='ts'>
import { defineComponent } from 'vue'
import { createToast } from 'mosha-vue-toastify';
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, the first argument can be just a string or a object like this { title: 'some title', description: 'some good description'}, the second argument is an options object.

Options: