{"id":20737151,"url":"https://github.com/pxls00/vue-message-plugin-ts","last_synced_at":"2025-04-24T01:42:04.954Z","repository":{"id":148379192,"uuid":"619500623","full_name":"pxls00/vue-message-plugin-ts","owner":"pxls00","description":"Vue message plugin base on Vue 3 + Typescript + Pinia, Docs page⬇️","archived":false,"fork":false,"pushed_at":"2023-06-09T17:52:54.000Z","size":476,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-30T00:03:26.259Z","etag":null,"topics":["composition-api","jest","modular-architecture","npm-package","pinia","ts-jest","typescript","unit-testing","vue","vue-test-utils"],"latest_commit_sha":null,"homepage":"https://vue-message-plugin-205f7.web.app/","language":"TypeScript","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/pxls00.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":"2023-03-27T09:08:55.000Z","updated_at":"2023-09-03T03:52:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0066e79-fc65-4f69-a4a4-cf502409177a","html_url":"https://github.com/pxls00/vue-message-plugin-ts","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pxls00%2Fvue-message-plugin-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pxls00%2Fvue-message-plugin-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pxls00%2Fvue-message-plugin-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pxls00%2Fvue-message-plugin-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pxls00","download_url":"https://codeload.github.com/pxls00/vue-message-plugin-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250071633,"owners_count":21370050,"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":["composition-api","jest","modular-architecture","npm-package","pinia","ts-jest","typescript","unit-testing","vue","vue-test-utils"],"created_at":"2024-11-17T06:13:41.381Z","updated_at":"2025-04-24T01:42:04.948Z","avatar_url":"https://github.com/pxls00.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-message-plugin-ts\n\nA message plugin base on Vue with Typescript support\n\n\u003e supports only Vue 3\n\n![Preview](https://github.com/pxls00/vue-message-plugin-ts/blob/master/preview.png)\n\n[Docs page | Live Demo](https://vue-message-plugin-205f7.web.app/)\n\n## Installation\n\nyou can install the package yarn:\n\n```bash\nyarn add vue-message-plugin-ts\n```\n\nor npm:\n\n```bash\nnpm i vue-message-plugin-ts\n```\n\n## Register Plugin\n\n```js\nimport { createApp, h } from 'vue'\nimport Message from 'vue-message-plugin-ts'\nimport 'vue-message-plugin-ts/dist/style.css'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(Message)\n// or\napp.use(Message, options?: { position?: IMessagesOption } as IMessagesOption)\n\napp.mount('#app')\n```\n\n## Usage\n\n```js\n// App.vue\n\u003ctemplate\u003e\n  \u003capp-messages /\u003e\n  \u003ccomponent :is=\"layoutName\"\u003e\n    \u003cRouterView /\u003e\n  \u003c/component\u003e\n\u003c/template\u003e\n```\n\nUsage in components\n\n```js\n// Component.vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { inject } from 'vue'\n\nconst message = inject('message')\n\nfunction errorAction () {\n  message.addNewMessage({\n    title: 'Action error',\n    type: 'error',\n    duration: 5000,\n  })\n}\n\nfunction startWait () {\n  message.startWait()\n}\n\nfunction stopWait () {\n  message.stopWait()\n}\n\n\u003c/script\u003e\n```\n\n\n## Messages API\n### MessagesOption\n| Attribute | Descripttion | Type | Optional value | Default |\n| --- | --- | --- | --- | --- |\n| position | Messages display position | string | ‘top-left’, ‘top-center’, ‘top-right’, ‘right-center’, ‘bottom-right’, ‘botom-center’, ‘bottom-left’, ‘left-center’ | ‘top-right’ |\n\n\u003cbr /\u003e\n\n### Messages\n| Attribute | Descripttion | Type | Optional value | Default |\n| --- | --- | --- | --- | --- |\n| addNewMessage | Adding a new message | (message: IMessageItem) ⇒ void | IMessageItem | — |\n| removeMessage | Remove message by id | (id: TMessageId) ⇒ void | TMessageId | — |\n| startWait | Wait loader message | (message?: IMessageItem) ⇒ void | IMessageItem |  |\n| stopWait | Stop wait loader message | (id?: TMessageId) ⇒ void | TMessageId |  |\n\n\u003cbr /\u003e\n\n### Message for create (Message)\n| Attribute | Descripttion | Type | Optional value | Default | required |\n| --- | --- | --- | --- | --- | --- |\n| body | Body of message | TMessageField\u003cT\u003e | — | — | — | true |\n| duration | Duration of message, if you don't add duration then you have to remove it yourself | number | — | — | false |\n| type | Type of message | TMessageTypes | ‘error’, ‘success’, ‘warning’, ‘custom’, ‘wait’ | — | true |\n| img | Icon image of message | TMessageField  | — | — | false |\n| class | Class of message | TMessageClass | — | — | false |\n| key?: string | Key of message | string | — | — | false |\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n### Types List\n- type TMessageField = string | {value: string | any, class: TMessageClass}\n- type TMessageTypes = ‘error’ | ‘success’ | ‘warning’ | ‘custom’ | ‘wait’\n- type TMessageClass = string | string[]\n- type TMessageId = number | string\n\n### Template, Slot names\n| Name | Descripttion | Value |\n| --- | --- | --- |\n| message__img-wait | Message slot name for wait messages icon image | IMessageItem |\n| message__img-success | Message slot name for success messages icon image | IMessageItem |\n| message__img-error | Message slot name for error messages icon image | IMessageItem |\n| message__img-warning | Message slot name for warning messages icon image | IMessageItem |\n| message__img-custom | Message slot name for custom messages icon image | IMessageItem |\n| message__title-wait | Message slot name for wait messages title | IMessageItem |\n| message__title-success | Message slot name for success messages title | IMessageItem |\n| message__title-warning | Message slot name for warning messages title | IMessageItem |\n| message__title-error | Message slot name for error messages title | IMessageItem |\n| message__title-custom | Message slot name for custom messages title | IMessageItem |\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Tip !!\nYou can add wait message with method startWait and this method creates default message, if you want to add custom wait message you can use method addNewMessage() and then if you want to stop this custom message u can use stopWait agait but with argument id that has been given when created message so you can create default wait message also custom wait message \n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## License\n\nLicensed as [MIT](https://github.com/pxls00/vue-message-plugin-ts/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpxls00%2Fvue-message-plugin-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpxls00%2Fvue-message-plugin-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpxls00%2Fvue-message-plugin-ts/lists"}