Description:
Yet another Vue 3 toast component to display customizable toast messages in order. This means that the new messages will be queued until the previous ones are hidden.
How to use it:
1. Install and import the vue-toast-notification.
import {createApp} from 'vue';
import VueToast from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css';
// import 'vue-toast-notification/dist/theme-sugar.css';
2. Register the component.
const app = createApp({});
app.use(VueToast);
app.mount('#app');
3. Display a basic toast message on the screen.
let instance = app.$toast.open('Basic Toast');
4. Change the notification type. All possible types:
- success
- info
- warning
- error
- default
let instance = app.$toast.open({
message: 'Error Message',
type: 'error'
});
// or app.$toast.success(message,?options) app.$toast.error(message,?options) app.$toast.warning(message,?options) app.$toast.info(message,?options) app.$toast.default(message,?options)
5. Change the position of toast messages.
- top
- bottom
- top-right (default)
- bottom-right
- top-left
- bottom-left
app.$toast.open({
message: 'Error Message',
position: 'top-right'
});
6. Set the time to wait before auto-dismissing the toast message. Default: 3 seconds.
app.$toast.open({
message: 'Error Message',
duration: '3000'
});
7. Determine if the toast message is closable. Default: true.
app.$toast.open({
message: 'Error Message',
dismissible: false
});
8. Determine if the toast messages should be queued. Default: false.
app.$toast.open({
message: 'Error Message',
queue: true
});
9. Execute a function when you click/tap the toast message.
app.$toast.open({
message: 'Error Message',
onClick: FUNCTION
});
10. Execute a function when the toast has been dismissed.
app.$toast.open({
message: 'Error Message',
onDismiss: FUNCTION
});
11. More API methods.
// Force dismiss specific toast instance.dismiss(); // Dismiss all opened toast immediately app.$toast.clear();
Preview:
Changelog:
v3.0.4 (05/21/2022)
- Bugfix
v3.0.2 (05/06/2022)
- Bugfix
v3.0.1 (05/01/2022)
- Add missing type for typescript usage
v3.0.0 (12/24/2021)
- Allow Composition API usage
- Use named export in browser environment
v2.0.1 (08/30/2021)
- Fix: Composition API usage
v2.0.0 (08/30/2021)
- Drop support for Vue 2.x, add support for Vue 3.x
- Drop Internet Explorer support
v0.6.2 (05/30/2021)
- Fix: SSR issue
v0.6.1 (02/15/2021)
- Add ability to keep toast opened
v0.6.0 (09/21/2020)
- Rename close() method to dismiss()
- Rename onClose prop to onDismiss
- Using BEM naming convention in CSS classes
v0.5.4 (09/21/2020)
- Bugfix
v0.5.3 (09/20/2020)
- Bugfix
v0.5.0 (08/08/2020)
- Bugfix
- CSS classes has been prefixed with v-, if you were overriding any css class then revisit your code
v0.4.1 (06/25/2020)
- Bugfix
Download Details:
Author: ankurk91
Live Demo: https://ankurk91.github.io/vue-toast-notification/
Download Link: https://github.com/ankurk91/vue-toast-notification/archive/master.zip
Official Website: https://github.com/ankurk91/vue-toast-notification
Install & Download:
# Yarn
$ yarn add vue-toast-notification
# NPM
$ npm install vue-toast-notification --save