Gathering detailed insights and metrics for vue-toasted
Installations
npm install vue-toastedDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
12.14.1
NPM Version
6.13.4
Releases
8
Contributors
24
Unable to fetch Contributors
Languages
3
JavaScript
SCSS
Vue
JavaScript (84.19%)
SCSS (15.66%)
Vue (0.15%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
17,596,415
Last Day
8,382
Last Week
46,389
Last Month
201,167
Last Year
2,413,972
GitHub Statistics
MIT License
2,215 Stars
158 Commits
195 Forks
23 Watchers
17 Branches
24 Contributors
Updated on Mar 11, 2025
Bundle Size
55.89 kB
Minified
18.86 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.28
Package Id
vue-toasted@1.1.28
Size
113.60 kB
NPM Version
6.13.4
Node Version
12.14.1
Published on
Mar 12, 2020
Total Downloads
Cumulative downloads
Total Downloads
17,596,415
Dev Dependencies
25
animejsautoprefixerbabel-clibabel-corebabel-loaderbabel-preset-es2015babel-preset-latestcross-envcss-loaderes6-object-assignextract-text-webpack-pluginfile-loaderhammerjsnode-sasspostcss-loaderrequirejssass-loadershortidstyle-loadervue-loadervue-style-loadervue-template-compilerwebpackwebpack-bundle-analyzerwebpack-dev-server
Introduction
Vue Toasted is One of the Best Toast plugin available for VueJS. it is used by VueJS, Laravel, NuxtJS and trusted by many more organizations it is responsive, touch compatible, easy to use, attractive and feature rich with icons, actions etc...
Interactive Demo
Checkout the Interactive Demo here.
Menu
Installation
Install using npm
1# install it via npm 2npm install vue-toasted --save
Install using yarn
1# install it via yarn 2yarn add vue-toasted
Direct usage with html
1<!-- Insert the vue core before vue-toasted --> 2<script src="https://unpkg.com/vue-toasted"></script> 3 4<script> 5 Vue.use(Toasted) 6</script>
Nuxt ???? Officially uses vue-toasted for their toast module.
installation guide ???? @nuxtjs/toast
Usage
It is simple. couple of lines all what you need.
1// register the plugin on vue 2import Toasted from 'vue-toasted'; 3 4Vue.use(Toasted) 5 6// you can also pass options, check options reference below 7Vue.use(Toasted, Options) 8
1// you can call like this in your component 2this.$toasted.show('hello billo') 3 4// and also 5Vue.toasted.show('hola billo');
All Good Now you have this cool toast in your project..
Icons :fire:
Material Icons, Fontawesome and Material Design Icons are supported. you will have to import the icon packs into your project. example using icons
1{ 2 // pass the icon name as string 3 icon : 'check' 4 5 // or you can pass an object 6 icon : { 7 name : 'watch', 8 after : true // this will append the icon to the end of content 9 } 10}
Actions :fire:
You can have single or multiple actions in the toast. take a look at the example below
Check below Vue Router section for router integration
| Parameters | Type's | Default | Description |
|---|---|---|---|
| text* | String | - | name of action |
| href | String | null | url of action |
| icon | String | null | name of material for action |
| target | String | null | target of url |
| class | String/Array | null | custom css class for the action |
| push | Object | null | Vue Router push parameters |
| onClick | Function(e,toastObject) | null | onClick Function of action |
Examples
1{ 2 // you can pass a single action as below 3 action : { 4 text : 'Cancel', 5 onClick : (e, toastObject) => { 6 toastObject.goAway(0); 7 } 8 }, 9 10 // you can pass a multiple actions as an array of actions 11 action : [ 12 { 13 text : 'Cancel', 14 onClick : (e, toastObject) => { 15 toastObject.goAway(0); 16 } 17 }, 18 { 19 text : 'Undo', 20 // router navigation 21 push : { 22 name : 'somewhere', 23 // this will prevent toast from closing 24 dontClose : true 25 } 26 } 27 ] 28}
API
Options
below are the options you can pass to create a toast
| Option | Type's | Default | Description |
|---|---|---|---|
| position | String | 'top-right' | Position of the toast container ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'] |
| duration | Number | null | Display time of the toast in millisecond |
| keepOnHover | Boolean | false | When mouse is over a toast's element, the corresponding duration timer is paused until the cursor leaves the element |
| action | Object, Array | null | Add single or multiple actions to toast explained here |
| fullWidth | Boolean | false | Enable Full Width |
| fitToScreen | Boolean | false | Fits to Screen on Full Width |
| className | String, Array | null | Custom css class name of the toast |
| containerClass | String, Array | null | Custom css classes for toast container |
| iconPack | String | 'material' | Icon pack type to be used ['material', 'fontawesome', 'mdi', 'custom-class', 'callback'] |
| Icon | String, Object | null | Material icon name as string. explained here |
| type | String | 'default' | Type of the Toast ['success', 'info', 'error'] |
| theme | String | 'toasted-primary' | Theme of the toast you prefer ['toasted-primary', 'outline', 'bubble'] |
| onComplete | Function | null | Trigger when toast is completed |
| closeOnSwipe | Boolean | true | Closes the toast when the user swipes it |
| singleton | Boolean | false | Only allows one toast at a time. |
Methods
Methods available on Toasted...
1// you can pass string or html to message 2Vue.toasted.show( 'my message', { /* some option */ })
| Method | Parameter's | Description |
|---|---|---|
| show | message, options | show a toast with default style |
| success | message, options | show a toast with success style |
| info | message, options | show a toast with info style |
| error | message, options | show a toast with error style |
| register | name, message, options | register your own toast with options explained here |
| clear | - | clear all toasts |
Toast Object
Each Toast Returns a Toast Object where you can manipulate the toast.
1 2// html element of the toast 3el : HtmlElement 4 5// change text or html of the toast 6text : Function(text) 7 8// fadeAway the toast. default delay will be 800ms 9goAway : Function(delay = 800) 10
using the toast object
1let myToast = this.$toasted.show("Holla !!"); 2myToast.text("Changing the text !!!").goAway(1500);
Vue Router
Adding vue-router to vue-toasted where you can use it on toast actions.
1 2// your app router instance 3var router = new VueRouter({ 4 mode: 'history', 5 routes: [{ 6 path: '/foo', 7 name : 'foo-name' 8 }], 9 linkActiveClass: "active" 10}); 11 12// pass it to vue toasted as below.. 13Vue.use(Toasted, { 14 router 15});
Custom Toast Registration
You can register your own toasts like below and it will be available all over the application.
Toasted.register methods api details...
| Parameters | Type's | Default | Description |
|---|---|---|---|
| name* | String | - | name of your toast |
| message* | String/Function(payload) | - | Toast Body Content |
| options | String/Object | {} | Toast Options as Object or either of these strings ['success', 'info', 'error'] |
Take a look at the below examples
Simple Example
1import Toasted from 'vue-toasted'; 2Vue.use(Toasted); 3 4// Lets Register a Global Error Notification Toast. 5Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', { 6 type : 'error', 7 icon : 'error_outline' 8})
After Registering your toast you can easily access it in the vue component like below
1// this will show a toast with message 'Oops.. Something Went Wrong..' 2// all the custom toasts will be available under `toasted.global` 3this.$toasted.global.my_app_error();
Advanced Example
You can also pass message as a function. which will give you more power. Lets think you need to pass a custom message to the error notification we built above.
1this.$toasted.global.my_app_error({ 2 message : 'Not Authorized to Access' 3});
you can register a toast with payload like below on the example.
1import Toasted from 'vue-toasted'; 2Vue.use(Toasted); 3 4// options to the toast 5let options = { 6 type : 'error', 7 icon : 'error_outline' 8}; 9 10// register the toast with the custom message 11Vue.toasted.register('my_app_error', 12 (payload) => { 13 14 // if there is no message passed show default message 15 if(! payload.message) { 16 return "Oops.. Something Went Wrong.." 17 } 18 19 // if there is a message show it with the message 20 return "Oops.. " + payload.message; 21 }, 22 options 23)
Browsers support
 IE / Edge |  Firefox |  Chrome |  Safari |  Opera |  iOS Safari |  Chrome for Android |
|---|---|---|---|---|---|---|
| IE10, IE11, Edge | last 7 versions | last 7 versions | last 7 versions | last 7 versions | last 3 versions | last 3 versions |
Please Report If You have Found any Issues.
Mobile Responsiveness
On Mobile Toasts will be on full width. according to the position the toast will either be on top or bottom.
Credits
- Inspired and developed from materialize-css toast.
- Uses hammerjs for touch events
- Uses lightweight and fast animejs for animations.
- Whoever contributes to this project :wink:
Enjoy Toasting !!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 12/16 approved changesets -- score normalized to 7
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 26 are checked with a SAST tool
Reason
99 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-x3m3-4wpv-5vgc
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-pgr8-jg6h-8gw6
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.7
/10
Last Scanned on 2025-03-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More