{"id":16440815,"url":"https://github.com/idevelopthings/vue-frontend-utils","last_synced_at":"2025-10-27T03:31:15.919Z","repository":{"id":65024510,"uuid":"580925861","full_name":"iDevelopThings/vue-frontend-utils","owner":"iDevelopThings","description":"A collection of utility functions for Vue.js frontend development, including an event emitter and a modal system.","archived":false,"fork":false,"pushed_at":"2023-01-27T16:51:31.000Z","size":166,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-24T19:59:36.428Z","etag":null,"topics":["eventbus","events","modal","typescript","vite","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-frontend-utils","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iDevelopThings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-21T20:07:35.000Z","updated_at":"2023-06-29T13:18:11.000Z","dependencies_parsed_at":"2023-02-15T11:01:35.957Z","dependency_job_id":null,"html_url":"https://github.com/iDevelopThings/vue-frontend-utils","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-frontend-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-frontend-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-frontend-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-frontend-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iDevelopThings","download_url":"https://codeload.github.com/iDevelopThings/vue-frontend-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238431560,"owners_count":19471410,"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":["eventbus","events","modal","typescript","vite","vuejs"],"created_at":"2024-10-11T09:13:08.232Z","updated_at":"2025-10-27T03:31:15.487Z","avatar_url":"https://github.com/iDevelopThings.png","language":"TypeScript","readme":"# vue-frontend-utils\n\nA collection of utility functions for use in Vue.js frontend applications.\n\n## Description\n\n`vue-frontend-utils` is a collection of utility functions designed to make it easier to develop Vue.js frontend applications.\n\nWith a simple event emitter and a powerful modal system, `vue-frontend-utils` can help you add powerful functionality to your projects with minimal code. The library is fully type-safe, thanks to the\nuse of the vite/ts compiler API.\n\n## Features\n\n### Event emitter:\n\nEasily send and receive messages within your Vue.js application using the EventBus. \n\nDefine events with strong typing using the `defineEvent` function and subscribe/invoke them using the returned event instance\n\n### Modal system:\n\nCreate and manage modals in your Vue.js application with ease. \n\nUse the `defineModal` and `modal` functions to define and access modals, and use methods like `show`, `hide`, `isOpen`, and `isHidden` to control them. \nSet global event handlers for when modals are opened and closed using the `whenOpened` and `whenClosed` methods.\n\n## Installation\n\nTo install vue-frontend-utils, you can use npm:\n\n```shell\nnpm install vue-frontend-utils\n```\n\nOr, if you prefer yarn:\n\n```shell\nyarn add vue-frontend-utils\n```\n\n### Vue\n\n```typescript\nimport {createApp} from \"vue\";\nimport App from \"./App.vue\";\nimport {VueFrontendUtils} from \"vue-frontend-utils\";\n\nconst app = createApp(App);\napp.use(VueFrontendUtils);\napp.mount(\"#app\");\n```\n\n### Note:\nIt's recommended to create two additional files to hold Modals/Events, then importing these inside your main ts file, for example:\n\n#### Modals.ts\n```typescript\nimport {defineModal} from \"vue-frontend-utils\";\n\ndefineModal\u003c{ message:string }\u003e('success');\n```\n#### Events.ts\n```typescript\nimport {defineEvent} from \"vue-frontend-utils\";\n\ndefineEvent\u003c{ message: string }\u003e(\"something:else\");\n```\n\n#### Main.ts\n```typescript\nimport {createApp} from \"vue\";\nimport App from \"./App.vue\";\nimport {VueFrontendUtils} from \"vue-frontend-utils\";\nimport \"./Modals.ts\";\nimport \"./Events.ts\";\n\nconst app = createApp(App);\napp.use(VueFrontendUtils);\napp.mount(\"#app\");\n```\n\n#### Opting into type generation:\n\nIn your vite.config file, you need to add the following plugin:\n\n```typescript\nimport {defineConfig} from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport {VueFrontendUtils} from \"vue-frontend-utils/dist/vite\";\n\nexport default defineConfig({\n\tplugins : [\n\t\tVueFrontendUtils({srcPathFromRoot : \"src\"}),\n\t\tvue()\n\t]\n});\n```\n\n\n## Usage\n\n### Event Bus:\n\nTo use the EventBus feature in your Vue.js application, you will first need to import it:\n\n```typescript \nimport {defineEvent, event} from 'vue-frontend-utils';\n```\n\nThen, you can define an event:\n\n```typescript \nconst someEvent = defineEvent\u003cstring\u003e('someEvent');\n```\n\nYou can then use the event to emit and listen for events:\n\n```typescript \nsomeEvent.subscribe((data) =\u003e {\n\t// handle the event\n});\n\nsomeEvent.invoke('some data');\n```\n\n### Modal System\n\nTo use the modal system, you will first need to import it:\n\n```typescript \nimport {defineModal, modal} from 'vue-frontend-utils';\n```\n\nThen, you can define a modal:\n\n```typescript \nconst myModal = defineModal\u003cstring\u003e('myModal');\n```\n\nYou can then use the modal to show, hide, and check the status of the modal:\n\n```typescript \nmyModal.show();\nmyModal.hide();\nconsole.log(myModal.isOpen()); // true or false\nconsole.log(myModal.isHidden()); // true or false\n```\n\nYou can also use the whenOpened and whenClosed methods to set global event handlers for when the modal is opened and closed:\n\n```typescript \nmyModal.whenOpened(() =\u003e {\n\tconsole.log('modal opened');\n});\n\nmyModal.whenClosed(() =\u003e {\n\tconsole.log('modal closed');\n});\n```\n\n### useAsyncHandler\n\nFully type safe handler, which stores it's current state, handles timeouts/cancellation and much more. \n\n```typescript\nasync function getUserFromApi(id: string) {\n\tconst req = await fetch(\"...\");\n\treturn await req.json();\n}\n\nconst getUser = useAsyncHandler(getUserFromApi);\n\ngetUser.start(\"user id\"); // Start the handler\ngetUser.stop(); // Cancels the active promise if running\n\ngetUser.isProcessing(); // true/false\n\ngetUser.hasResult(); // true when your function completes and returns a value(non error)\ngetUser.hasError(); // true when your function returns an error/times out or you call .stop()\ngetUser.wasCancelled(); // true when you call .stop() or timed out\ngetUser.wasTimeout(); // true when you use .withTimeout(x) and it hits the deadline\n\ngetUser.result(); // The return value of your function(non error)\ngetUser.error(); // The error(if any)\n\ngetUser.withTimeout(200); // Set a deadline in ms\n\n```\n\n## License\n\n`vue-frontend-utils` is open-source software licensed under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidevelopthings%2Fvue-frontend-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidevelopthings%2Fvue-frontend-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidevelopthings%2Fvue-frontend-utils/lists"}