{"id":43394699,"url":"https://github.com/webkong/vue3-toast","last_synced_at":"2026-02-02T14:20:51.252Z","repository":{"id":96027803,"uuid":"317807541","full_name":"webkong/vue3-toast","owner":"webkong","description":"A vue.js 3.0 toast plugin. Support composition API.","archived":false,"fork":false,"pushed_at":"2023-08-17T06:58:20.000Z","size":132,"stargazers_count":13,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-08T13:14:52.701Z","etag":null,"topics":["composition-api","plugin","toast","vue-plugin","vue3","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webkong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-12-02T09:11:19.000Z","updated_at":"2023-11-22T02:25:28.000Z","dependencies_parsed_at":"2024-11-15T12:46:14.410Z","dependency_job_id":null,"html_url":"https://github.com/webkong/vue3-toast","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"b9978c67f4dbf18c4bd867461d558e9bcc22bec0"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/webkong/vue3-toast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkong%2Fvue3-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkong%2Fvue3-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkong%2Fvue3-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkong%2Fvue3-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webkong","download_url":"https://codeload.github.com/webkong/vue3-toast/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webkong%2Fvue3-toast/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29012804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T12:48:30.580Z","status":"ssl_error","status_checked_at":"2026-02-02T12:46:38.384Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["composition-api","plugin","toast","vue-plugin","vue3","vuejs3"],"created_at":"2026-02-02T14:20:50.435Z","updated_at":"2026-02-02T14:20:51.243Z","avatar_url":"https://github.com/webkong.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue3-toast-single\n\n![Vue 3.x](https://img.shields.io/badge/vue-3.x-green.svg \"Vue 3 Compatible\")\n\nA toast plugin for vue3. Support composition API.\n\nSee the [example](https://blog.webkong.cn/vue3-toast/example/index.html).\n\n**Note:**\n\nIssue/PR is welcomed, I'll response as soon as possible.\n\nIf you like this plugin, can give a star.\n\n## Usage\n\n### install\n`npm install vue3-toast-single --save`\n\n### Quickstart\n```javascript\n// import \nimport Toast from 'vue3-toast-single'\nimport 'vue3-toast-single/dist/toast.css'\n\nconst app = createApp(App);\n\napp.use(Toast, { verticalPosition: \"bottom\", duration: 1500 });\napp.mount(\"#app\");\n\n// Usage\n\n{\n  // ....\n methods: {\n    clickHandler() {\n      this.$wkToast('A toast.');\n    },\n  },\n  // ...\n}\n\n{\n  // ...\n  setup() {\n        const toast = Vue.inject(\"WKToast\");\n        const clickHandler = () =\u003e {\n          toast(\"A toast.\");\n        };\n        return {\n          clickHandler,\n        };\n      },\n  // ...\n}\n```\n\n### Config\n\n`toast` or `$wkToast` takes 2 parameter: `(message, [options])`\n\n#### Options\n\nParameter | Type |Default| Description\n--------- | ---- | ------|-----------\nclassName | `string`, `array` | | Self-defined class names to pass through. There are 3 pre-defined classes: `wk-info`, `wk-warn`,`wk-alert`, to toast with different background color\nhorizontalPosition | `string` | `center` | Position horizontal of toast. There are 3 pre-defined positions: `left`, `right` and `center`\nverticalPosition | `string` | `bottom` | Position vertical of toast. There are 2 pre-defined positions: `top` and `bottom`\nduration | `number` | 3000 | The duration one toast will last, in milliseconds\ncloseable | `boolean` | `false` | `true` or `false`. If `true`, the toast can be closed manually\ntransition | `string` | `slide-down` | Built-in transitions: `fade`, `slide-[up/down/left/right]`. See also [Transitions](http://v1.vuejs.org/guide/transitions.html)\n\n#### Styling\n\nBesides minimum styling, *vue3-toast-single* try not to be opinionated about the appearance. It is a simply a `div`(class=\"wk-wrapper\") wrapped a `span`(class=\"wk-content\"). Apply your css freely with them or with your own classes passed in as `className`.  \n\n#### config example\n```javascript\n// global\napp.use(Toast, { verticalPosition: \"bottom\", duration: 1500 });\n\n// local\nthis.$wkToast('A toast', {\n  className: ['my-toast', 'toast-warning'],\n  horizontalPosition: 'right',\n  verticalPosition: 'top',\n  duration: 3000,\n  transition: 'transition'\n})\n```\n\n#### TODO\n- [ ] Add a queue mode\n- [ ] emoji\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkong%2Fvue3-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebkong%2Fvue3-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebkong%2Fvue3-toast/lists"}