ankurk91 / Vue Toast Notification
Licence: mit
Yet another toast notification plugin for Vue.js 🌷
Stars: ✭ 205
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Toast Notification
Notiflix
Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.
Stars: ✭ 172 (-16.1%)
Mutual labels: toast, notification
Vue Toasted
🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
Stars: ✭ 2,091 (+920%)
Mutual labels: toast, notification
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (+123.41%)
Mutual labels: toast, notification
denbun
Adjust showing frequency of Android app messages, and to be more user friendly 🐦
Stars: ✭ 17 (-91.71%)
Mutual labels: toast, notification
Reapop
📮 A simple and customizable React notifications system
Stars: ✭ 1,155 (+463.41%)
Mutual labels: toast, notification
Toast
To use it in PCL or .NetStandard projects write this line of code : CrossToastPopUp.Current.ShowToastMessage("Message");
Stars: ✭ 51 (-75.12%)
Mutual labels: toast, notification
Fftoast
A very powerful iOS message notifications and AlertView extensions. It can be easily realized from the top of the screen, the bottom of the screen and the middle of the screen pops up a notification. You can easily customize the pop-up View.
Stars: ✭ 649 (+216.59%)
Mutual labels: toast, notification
Bot toast
A really easy to use flutter toast library
Stars: ✭ 551 (+168.78%)
Mutual labels: toast, notification
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+3857.56%)
Mutual labels: toast, notification
Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Stars: ✭ 6,170 (+2909.76%)
Mutual labels: toast, notification
SimpleToast
SimpleToast is a simple, lightweight, flexible and easy to use library to show toasts / popup notifications inside iOS or MacOS applications in SwiftUI. Because of the flexibility to show any content it is also possible to use the library for showing simple modals.
Stars: ✭ 131 (-36.1%)
Mutual labels: toast, notification
Nativescript Feedback
📢 Non-blocking textual feedback for your NativeScript app
Stars: ✭ 127 (-38.05%)
Mutual labels: toast, notification
MaterialToast
A fully and highly customizable material designed Toast for Android.
Stars: ✭ 31 (-84.88%)
Mutual labels: toast, notification
toast-swift
A Swift Toast view - iOS 14 style and newer - built with UIKit. 🍞
Stars: ✭ 85 (-58.54%)
Mutual labels: toast, notification
mosha-vue-toastify
A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.
Stars: ✭ 185 (-9.76%)
Mutual labels: toast, notification
Vue Toastify
🔥 Simple, extendable, dependency free notification plugin. 🔥
Stars: ✭ 126 (-38.54%)
Mutual labels: toast, notification
Noty
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-33.66%)
Mutual labels: toast, notification
Notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Stars: ✭ 2,562 (+1149.76%)
Mutual labels: toast
Flash
⚡️A highly customizable, powerful and easy-to-use alerting library for Flutter.
Stars: ✭ 174 (-15.12%)
Mutual labels: toast
Vue Toast Notification
Yet another Vue.js Toast notification plugin.
Demo or JSFiddle
Installation
# yarn
yarn add vue-toast-notification
# npm
npm install vue-toast-notification
Usage
import Vue from 'vue';
import VueToast from 'vue-toast-notification';
// Import one of the available themes
//import 'vue-toast-notification/dist/theme-default.css';
import 'vue-toast-notification/dist/theme-sugar.css';
Vue.use(VueToast);
//Vue.$toast.open({/* options */});
let instance = Vue.$toast.open('You did it!');
// Force dismiss specific toast
instance.dismiss();
// Dismiss all opened toast immediately
Vue.$toast.clear();
Available options
The API methods accepts these options:
Attribute | Type | Default | Description |
---|---|---|---|
message | String | -- | Message text/html (required) |
type | String | success |
One of success , info , warning , error , default
|
position | String | bottom-right |
One of top , bottom , top-right , bottom-right ,top-left , bottom-left
|
duration | Number | 3000 |
Visibility duration in milliseconds, set 0 to keep toast visible |
dismissible | Boolean | true |
Allow user dismiss by clicking |
onClick | Function | -- | Do something when user clicks |
onDismiss | Function | -- | Do something after toast gets dismissed |
queue | Boolean | false |
Wait for existing to dismiss before showing new |
pauseOnHover | Boolean | true |
Pause the timer when mouse on over a toast |
API methods
Vue.$toast.open(options)
This is generic method, you can use this method to make any kind of toast.
// Can accept a message as string and apply rest of options from defaults
Vue.$toast.open('Howdy!');
// Can accept an Object of options
Vue.$toast.open({
message: 'Something went wrong!',
type: 'error',
// all of other options may go here
});
Vue.$toast.success(message,?options)
There are some proxy methods to make it more readable.
Vue.$toast.success('Profile saved.', {
// optional options Object
})
Vue.$toast.error(message,?options)
Vue.$toast.warning(message,?options)
Vue.$toast.info(message,?options)
Vue.$toast.default(message,?options)
Global options
You can set options for all the instances during plugin initialization
Vue.use(VueToast, {
// One of the options
position: 'top'
})
Further you can override option when creating new instances
Vue.$toast.success('Order placed.', {
// override the global option
position: 'bottom'
})
Install in non-module environments (without webpack)
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-toast-notification"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-toast-notification/dist/theme-sugar.css" rel="stylesheet">
<!-- Init the plugin -->
<script>
Vue.use(VueToast);
</script>
Run examples on your localhost
- Clone this repo
- Make sure you have node-js
>=10.13
and yarn>=1.x
pre-installed - Install dependencies -
yarn install
- Run webpack dev server -
yarn start
- This should open the demo page at
http://localhost:9000
in your default web browser
Acknowledgements
- Buefy Toast component
License
MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].