❤
npm
Sign UpSign In

vue-toaster-snackbar
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

vue-toaster-snackbar

Vue Toaster Snackbar is one of the best plugin available with toast and snackbar custom features.

Features

  • Snackbar, Block and Action Blocks(WIP)
  • Packed with Responsiveness and Style (Customisable)
  • Progress Bar (enable/disable)
  • Progress Bar pause on mouseover and resume on mouseleave
  • Timeout (default: 3 seconds, infinite: 0)
  • On click actions with custom emit event and value

Getting Started

Install using npm or yarn

# Install using npm 
npm install vue-toaster-snackbar
 
# or Install with yarn 
yarn add vue-toaster-snackbar
 
# register the plugin on vue ./main.js or ./main.ts    
import ToastSnackbar from 'vue-toaster-snackbar';  
import "vue-toaster-snackbar/public/toast.scss";  
 
Vue.use(ToastSnackbar)  
 
# declare the component in ./App.vue   
<template>
  <div id="app">
    <Toast></Toast>
    ....
  </div>
</template>
 

Direct Installation

CodeSandbox example

<!DOCTYPE html>
<html>  
  <head>  
    <title>ToastSnackbar Vue app</title>  
    <script src="https://unpkg.com/vue"></script>  
    <script src="https://unpkg.com/vue-toaster-snackbar@1.0.2/dist/vueToaster.umd.js"></script>  
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-toaster-snackbar@1.0.2/public/toast.css" />  
  </head>
  <body>
    <div id="app">
      <Toast></Toast>
      {{ message }}
      <button v-on:click="clickMe">Click me!</button>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!"
        },
        methods: {
          clickMe() {
            this.$toast.snackbar("success", "This is a success message");
          }
        },
      });
    </script>
  </body>
</html>

Usage

  • Use the following commands from any component to trigger Toast,
# Snackbar   
this.$toast.snackbar("success", "This is a success message")
this.$toast.snackbar("info", "This is an info message")
this.$toast.snackbar("warning", "This is a warning message")
this.$toast.snackbar("error", "This is an error message")  
 
# Block   
this.$toast.block("success", "Success", "This is a success message description")
this.$toast.block("info", "Info", "This is an info message description")
this.$toast.block("warning", "Warning", "This is a warning message description")
this.$toast.block("error", "Error", "This is an error message description")  
 
# Custom 
 
// Custom Message Structure
ToastMessage  = {
  toastType: string; // snackbar or block
  message: string; // toast message
  description?: string; // toast description if toastType is block
  position: string; // topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, topFull, bottomFull
  timeout: number; // default 3000, 0 is infinite
  status?: string; // success, info, warning, error
  showProgress?: boolean; // true/false
  emitEventName?: string; // event name to trigger on click emit  
  emitEventValue?: unknown; // value to be emitted on click
}
 
this.$toast.custom(ToastMessage)  
 
# Listen and execute your action from any component 
this.$root.$on("emitEventName", (value) => {
      console.log(value);
      .....
      routing or any custom actions based on value
});
 

Coming soon 😍

Support

Give me a Star⭐️

Buy me a ☕️!

ko-fi

License

Released under the MIT License

Readme

Keywords

Package Sidebar

Install

npm i vue-toaster-snackbar

Repository

github.com/zxqp/vue-toaster-snackbar

Homepage

github.com/zxqp/vue-toaster-snackbar/#readme

Weekly Downloads

13

Version

1.0.4

License

MIT

Unpacked Size

491 kB

Total Files

47

Last publish

Collaborators

  • sureshbabusakthi
Try on RunKit
Report malware