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

Related tags

mosha-vue-toastify
Overview

Mosha Vue Toastify

Build Status

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

English | 简体中文

alt text

Talk is cheap, show me the demo

Try it out in the playground in the documentation

Features

  • Super easy to setup! try follow this
  • 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:

name type default description
type 'info', 'danger', 'warning', 'success', 'default' 'default' Give the toast different styles and icons.
timeout number 5000 How many ms you want the toggle to close itself?
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

Support

Give this project a if you like it. Any suggestions are welcome!

Issues
Releases(v1.0.17)
Owner
Baidi Liu
Too fast to live, too young to die.
Baidi Liu
Yet another toast notification plugin for Vue.js :tulip:

Vue Toast Notification Yet another Vue.js Toast notification plugin. Demo or JSFiddle Installation # yarn yarn add vue-toast-notification # npm npm i

Ankur Kumar 263 Jul 26, 2021
🖖 Responsive Touch Compatible Toast plugin for VueJS 2+

Introduction Vue Toasted is one of the best toast plugins available for VueJS. It's used by VueJS, Laravel, NuxtJS and trusted by many more organizati

Shakeeb Sadikeen 2k Jul 25, 2021
Vue 3 notification library 💬

Vue 3 notification library ??

Evgeny Kirpichyov 24 Jun 29, 2021
A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

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

Baidi Liu 44 Jul 14, 2021
A Vue.JS plugin for Snackbars based on Google Material

Vue Snackbar A Vue.JS plugin for creating and displaying snackbars following the material design policies created by Google. Install Install from npm:

Felipe J. L. Rita 36 Feb 9, 2021
Vue.js 2 library for showing notifications

Vue.js notifications Demo http://vue-notification.yev.io/ Setup npm install --save vue-notification Add dependencies to your main.js: import Vue

Yev Vlasenko 2.1k Jul 25, 2021
A Toast widget for Vue 1 & 2

Vue-Easy-Toast A toast plugin for vue/vue2. DEMO Note: Since 1.x.x, only Vue 2 is supported. For Vue 1 users please stick to version 0.x.x Issue/PR is

xiuxiuxiu 117 May 26, 2021
A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

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

Baidi Liu 47 Jul 22, 2021
🔥 Simple, extendable, dependency free notification plugin. 🔥

Vue Toastify I wanted a notification plugin which I can use by passing props from the server and can also be called at run time. With this component i

null 144 Jul 17, 2021
Notification/Toast Component Using Vue3

Easy to use, customisable notification/toast library built using Vue3.

Daf Coe 15 May 24, 2021
🍞 Provide your component and let us toast the rest

?? vue-my-toasts A Vue toast plugin that finally lets you create your own toast component. You can see a demo of the default behaviour here. ❓ Why ano

Yaël Guilloux 72 Jul 22, 2021
toasts for vuejs

vue-toast Toasts for Vue 2. (Vue 1) Usage Install: npm i vue-toast Import: import 'vue-toast/dist/vue-toast.min.css' import VueToast from 'vue-toast'

Alexandr 152 Dec 7, 2020
Basic Vue toast service that uses Vuetify Snackbar component.

Vuetify Toast Snackbar Basic Vue toast service with queue support that uses Vuetify Snackbar component. Inspired by https://github.com/pzs/vuetify-toa

Vitaly Kasymov 124 May 16, 2021
🥖A simple and flexible stacking, positioning & dismissal API for authored toast style notifications in Vue.js

?? A simple and flexible implementation of toast style notifications for Vue.js. Breadstick A simple and flexible implementation of toast style notifi

Jonathan Bakebwa 107 Jun 25, 2021