\n \n \n \n
\n ![](\"https://img.shields.io/npm/v/vue-toasted.svg?style=flat-square\"/)
![](\"https://img.shields.io/npm/dm/vue-toasted.svg?style=flat-square\"/)
\n ![](\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\"/){kind=icon}
\n ![](\"https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square\"/){kind=icon}
\n ![](\"http://img.badgesize.io/shakee93/vue-toasted/master/dist/vue-toasted.min.js?compression=gzip&style=flat-square\"/)
![](\"http://npm.packagequality.com/shield/vue-toasted.svg?style=flat-square\"/)
\n
\n ![](\"https://shakee93.github.io/vue-toasted/assets/images/vue-toasted-demo-x3.gif\")
\n
\n \n ![](\"https://shakee93.github.io/vue-toasted/assets/images/action-preview.jpg\")
\n \n
You can have single or multiple actions in the toast. take a look at the example below
\nCheck below Vue Router section for router integration
\n\n**Parameters**|**Type's**|**Default**|**Description**\n-----|-----|-----|-----\ntext*|String|-| name of action\nhref|String|`null`| url of action\nicon|String|`null`| name of material for action\ntarget|String|`null`| target of url\nclass|String/Array|`null`| custom css class for the action\npush|Object |`null`| Vue Router push parameters\nonClick|Function(e,toastObject) |`null`| onClick Function of action\n\n##### Examples\n```javascript\n{\n // you can pass a single action as below\n action : {\n text : 'Cancel',\n onClick : (e, toastObject) => {\n toastObject.goAway(0);\n }\n },\n\n // you can pass a multiple actions as an array of actions\n action : [\n {\n text : 'Cancel',\n onClick : (e, toastObject) => {\n toastObject.goAway(0);\n }\n },\n {\n text : 'Undo',\n // router navigation\n push : { \n \tname : 'somewhere',\n \t// this will prevent toast from closing\n \tdontClose : true\n }\n }\n ]\n}\n```\n\n\n## API\n\n### Options\n\nbelow are the options you can pass to create a toast\n\n**Option**|**Type's**|**Default**|**Description**\n-----|-----|-----|-----\nposition|String|'top-right'|Position of the toast container![\"IE](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png\")
](http://godban.github.io/browsers-support-badges/)IE / Edge | [![\"Firefox\"](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png\")
](http://godban.github.io/browsers-support-badges/)Firefox | [![\"Chrome\"](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png\")
](http://godban.github.io/browsers-support-badges/)Chrome | [![\"Safari\"](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png\")
](http://godban.github.io/browsers-support-badges/)Safari | [![\"Opera\"](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png\")
](http://godban.github.io/browsers-support-badges/)Opera | [![\"iOS](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png\")
](http://godban.github.io/browsers-support-badges/)iOS Safari | [![\"Chrome](\"https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png\")
](http://godban.github.io/browsers-support-badges/)Chrome for Android |\n| --------- | --------- | --------- | --------- | --------- | --------- | --------- |\n| IE10, IE11, Edge| last 7 versions| last 7 versions| last 7 versions| last 7 versions| last 3 versions| last 3 versions\n\nPlease Report If You have Found any Issues.\n\n### Mobile Responsiveness\n\nOn Mobile Toasts will be on full width. according to the position the toast will either be on top or bottom.\n\n\n### Credits\n\n+ Inspired and developed from [materialize-css](https://github.com/Dogfalo/materialize) toast.\n+ Uses [hammerjs](http://hammerjs.github.io/) for touch events\n+ Uses lightweight and fast [animejs](http://animejs.com/) for animations.\n+ Whoever contributes to this project :wink:\n\nEnjoy Toasting !!\n","maintainers":[{"name":"shakee93","email":"shakee.zats@gmail.com"}],"time":{"modified":"2022-06-28T20:34:54.312Z","created":"2017-03-02T17:01:04.090Z","1.0.0":"2017-03-02T17:01:04.090Z","1.0.1":"2017-03-02T17:04:58.488Z","1.0.11":"2017-03-03T08:29:56.247Z","1.0.12":"2017-03-03T13:16:48.149Z","1.0.14":"2017-03-03T19:56:28.443Z","1.0.15":"2017-03-06T08:04:25.695Z","1.0.16":"2017-03-07T12:50:16.131Z","1.0.20":"2017-03-11T20:31:43.146Z","1.0.21":"2017-03-14T08:13:44.196Z","1.0.22":"2017-03-17T09:52:10.855Z","1.0.23":"2017-03-18T09:12:11.860Z","1.0.24":"2017-03-25T19:37:23.729Z","1.0.25":"2017-03-29T05:33:53.130Z","1.0.26":"2017-03-29T19:10:14.258Z","1.0.27":"2017-04-03T17:45:20.929Z","1.0.28":"2017-06-05T12:38:47.872Z","1.0.3":"2017-07-24T10:46:24.051Z","1.0.31":"2017-08-01T19:45:08.240Z","1.0.32":"2017-08-01T20:20:26.727Z","1.0.33":"2017-08-02T08:27:19.502Z","1.0.33-alpha.1":"2017-08-02T08:46:24.531Z","1.1.0":"2017-08-02T10:12:48.495Z","1.1.1":"2017-08-15T06:05:07.037Z","1.1.12":"2017-08-15T14:56:20.173Z","1.1.13":"2017-08-25T18:15:05.836Z","1.1.14":"2017-08-25T18:22:39.877Z","1.1.15":"2017-08-28T12:48:00.674Z","1.1.16":"2017-09-02T18:53:42.592Z","1.1.17":"2017-09-06T12:27:56.640Z","1.1.18":"2017-09-16T07:20:55.631Z","1.1.19":"2017-09-23T17:42:29.874Z","1.1.20":"2017-10-03T09:34:58.334Z","1.1.21":"2017-10-03T19:31:49.522Z","1.1.22":"2017-10-27T09:31:55.433Z","1.1.23":"2017-11-20T07:54:05.611Z","1.1.24":"2017-11-23T10:04:03.397Z","1.1.25":"2018-10-05T17:11:38.328Z","1.1.26":"2018-12-02T07:46:41.599Z","1.1.27":"2019-05-17T10:42:15.809Z","1.1.28":"2020-03-12T09:34:39.623Z"},"author":{"name":"Shakeeb Sadikeen","email":"shakee.zats@gmail.com"},"readmeFilename":"README.md","users":{"shakee93":true,"shay-altman":true,"gurunate":true},"keywords":["toast","vue","vue-toasted","toasted","responsive","touch-compatible","touch","vue-toast","vue-toastr","toastr"],"homepage":"https://github.com/shakee93/vue-toasted#readme","repository":{"type":"git","url":"git+https://github.com/shakee93/vue-toasted.git"},"bugs":{"url":"https://github.com/shakee93/vue-toasted/issues"},"license":"MIT"}