🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

v-toaster is a Vue.js toaster component used for displaying various types of toast messages (info, success, warning, error) in the application.

Notification

Documentation

v-toaster v-toaster

v-toaster

A Vue.js component

Installation

Using yarn

yarn add v-toaster

Using npm

npm i --save v-toaster

Demo

DEMO

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'  import Toaster from 'v-toaster'  // You need a specific loader for CSS files like https://github.com/webpack/css-loader import 'v-toaster/dist/v-toaster.css'  // optional set default imeout, the default is 10000 (10 seconds). Vue.use(Toaster, {timeout: 5000})

Browser

<!-- Include after Vue --> <link rel="stylesheet" href="v-toaster/dist/v-toaster.css"></link> <script src="v-toaster/dist/v-toaster.js"></script> <script>   Vue.use(VToaster, {timeout: 5000}) </script>

Usage example

// in your component this.$toaster // ... this.$toaster.success('Your toaster success message.') // or custom timeout this.$toaster.success('Your toaster success message.', {timeout: 8000})  this.$toaster.info('Your toaster info message.') this.$toaster.error('Your toaster error message.') this.$toaster.warning('Your toaster warning message.')  // or custom add method this.$toaster.add('Your toaster theme message.', {theme: 'info', timeout: 10000}) // ...

License

This project is licensed under MIT License


You May Also Like