{"id":13592009,"url":"https://github.com/ankurk91/vue-toast-notification","last_synced_at":"2025-03-20T12:07:27.663Z","repository":{"id":37412695,"uuid":"157054235","full_name":"ankurk91/vue-toast-notification","owner":"ankurk91","description":"Yet another toast notification plugin for Vue.js :tulip:","archived":false,"fork":false,"pushed_at":"2024-10-30T07:35:50.000Z","size":1510,"stargazers_count":650,"open_issues_count":5,"forks_count":76,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-03-13T11:06:40.254Z","etag":null,"topics":["hacktoberfest","notification","notify","toast","vue","vue-toast"],"latest_commit_sha":null,"homepage":"https://ankurk91.github.io/vue-toast-notification","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankurk91.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-11T06:37:40.000Z","updated_at":"2025-03-08T04:48:45.000Z","dependencies_parsed_at":"2024-01-22T20:15:03.910Z","dependency_job_id":"4323ba92-bd26-41b7-9932-df213e5b7209","html_url":"https://github.com/ankurk91/vue-toast-notification","commit_stats":{"total_commits":126,"total_committers":11,"mean_commits":"11.454545454545455","dds":"0.10317460317460314","last_synced_commit":"28ac7b69f87ee60ea11d1354b8b09375ca5dc20e"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-toast-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-toast-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-toast-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-toast-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankurk91","download_url":"https://codeload.github.com/ankurk91/vue-toast-notification/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244609429,"owners_count":20480782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","notification","notify","toast","vue","vue-toast"],"created_at":"2024-08-01T16:01:04.798Z","updated_at":"2025-03-20T12:07:27.646Z","avatar_url":"https://github.com/ankurk91.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Notification, Snackbar and Toast","Notification"],"readme":"# Vue Toast Notification\n\n[![downloads](https://badgen.net/npm/dt/vue-toast-notification)](https://npm-stat.com/charts.html?package=vue-toast-notification\u0026from=2019-11-01)\n[![js-delivr](https://data.jsdelivr.com/v1/package/npm/vue-toast-notification/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-toast-notification)\n[![npm-version](https://badgen.net/npm/v/vue-toast-notification)](https://www.npmjs.com/package/vue-toast-notification)\n[![github-tag](https://badgen.net/github/tag/ankurk91/vue-toast-notification)](https://github.com/ankurk91/vue-toast-notification/tags)\n[![build](https://github.com/ankurk91/vue-toast-notification/workflows/build/badge.svg)](https://github.com/ankurk91/vue-toast-notification/actions)\n[![license](https://badgen.net/github/license/ankurk91/vue-toast-notification)](https://yarnpkg.com/en/package/vue-toast-notification)\n![TypeScript](https://badgen.net/badge/icon/Typed?icon=typescript\u0026label\u0026labelColor=blue\u0026color=555555)\n\nYet another Vue.js Toast notification plugin.\n\n## [Demo](https://ankurk91.github.io/vue-toast-notification) or [JSFiddle](https://jsfiddle.net/ankurk91/4kqhsavp/)\n\n### Version matrix\n\n| Vue.js version | Package version |                                                              Branch |\n|:---------------|:---------------:|--------------------------------------------------------------------:| \n| 2.x            |       1.x       | [1.x](https://github.com/ankurk91/vue-toast-notification/tree/v1.x) |\n| 3.x            |       3.x       |                                                              `main` |\n\n## Installation\n\n```bash\nnpm install vue-toast-notification@^3\n```\n\n## Usage\n\n### Plugin usage\n\nInstall the plugin\n\n```js\nimport {createApp} from 'vue';\nimport ToastPlugin from 'vue-toast-notification';\n// Import one of the available themes\n//import 'vue-toast-notification/dist/theme-default.css';\nimport 'vue-toast-notification/dist/theme-bootstrap.css';\n\nconst app = createApp({});\napp.use(ToastPlugin);\napp.mount('#app');\n```\n\nThen use in your components\n\n```js\nexport default {\n    mounted() {\n        let instance = this.$toast.open('You did it!');\n\n        // Force dismiss specific toast\n        instance.dismiss();\n\n        // Dismiss all opened toast immediately\n        this.$toast.clear();\n    }\n}\n```\n\n### Composition API usage\n\n```js\nimport {useToast} from 'vue-toast-notification';\nimport 'vue-toast-notification/dist/theme-sugar.css';\n\nconst $toast = useToast();\nlet instance = $toast.success('You did it!');\n\n// Force dismiss specific toast\ninstance.dismiss();\n\n// Dismiss all opened toast immediately\n$toast.clear();\n```\n\n## Available options\n\nThe API methods accepts these options:\n\n| Attribute    |   Type   |    Default     | Description                                                                   |\n|:-------------|:--------:|:--------------:|:------------------------------------------------------------------------------|\n| message      |  String  |       --       | Message text/html (required)                                                  |\n| type         |  String  |   `success`    | One of `success`, `info`, `warning`, `error`, `default`                       |\n| position     |  String  | `bottom-right` | One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left` |\n| duration     |  Number  |     `3000`     | Visibility duration in milliseconds, set to `0` to keep toast visible         |\n| dismissible  | Boolean  |     `true`     | Allow user dismiss by clicking                                                |\n| onClick      | Function |       --       | Do something when user clicks                                                 |\n| onDismiss    | Function |       --       | Do something after toast gets dismissed                                       |\n| queue        | Boolean  |    `false`     | Wait for existing to dismiss before showing new                               |\n| pauseOnHover | Boolean  |     `true`     | Pause the timer when mouse on over a toast                                    |\n\n## API methods\n\n### `this.$toast.open(options)`\n\nThis is generic method, you can use this method to make any kind of toast.\n\n```js\n// Can accept a message as string and apply rest of options from defaults\nthis.$toast.open('Howdy!');\n\n// Can accept an Object of options\nthis.$toast.open({\n    message: 'Something went wrong!',\n    type: 'error',\n    // all of other options may go here\n});\n```\n\n### `this.$toast.success(message,?options)`\n\nThere are some proxy methods to make it more readable.\n\n```js\nthis.$toast.success('Profile saved.', {\n    // optional options Object\n})\n```\n\n### `this.$toast.error(message,?options)`\n\n### `this.$toast.warning(message,?options)`\n\n### `this.$toast.info(message,?options)`\n\n### `this.$toast.default(message,?options)`\n\n## Global options\n\nYou can set options for all the instances during plugin initialization\n\n```js\napp.use(VueToast, {\n    // One of the options\n    position: 'top'\n})\n```\n\nFurther you can override option when creating new instances\n\n```js\nthis.$toast.success('Order placed.', {\n    // override the global option\n    position: 'bottom'\n})\n```\n\n## Install in non-module environments (without webpack)\n\n```html\n\u003c!-- Vue.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3\"\u003e\u003c/script\u003e\n\u003c!-- Lastly add this package --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-toast-notification@3\"\u003e\u003c/script\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/vue-toast-notification@3/dist/theme-sugar.css\" rel=\"stylesheet\"\u003e\n\u003c!-- Init the plugin --\u003e\n\u003cscript\u003e\n    const app = Vue.createApp({});\n    app.use(VueToast.ToastPlugin);\n    app.mount('#app');\n\u003c/script\u003e\n```\n\n## Run examples on your localhost\n\n* Clone this repo\n* Make sure you have node-js `\u003e=20.16` and [pnpm](https://pnpm.io/) `\u003e=9.3` pre-installed\n* Install dependencies - `pnpm install`\n* Run webpack dev server - `pnpm start`\n* This should open the demo page in your default web browser\n\n## Acknowledgements\n\n* Buefy [Toast](https://buefy.org/documentation/toast) component\n\n## License\n\n[MIT](LICENSE.txt) License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-toast-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankurk91%2Fvue-toast-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-toast-notification/lists"}