{"id":22927447,"url":"https://github.com/tylermercer/vue-modal-flows","last_synced_at":"2026-04-29T15:01:18.843Z","repository":{"id":114840194,"uuid":"295048941","full_name":"tylermercer/vue-modal-flows","owner":"tylermercer","description":"A Vue plugin for managing modal flows","archived":false,"fork":false,"pushed_at":"2020-09-27T00:41:15.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-19T22:08:23.266Z","etag":null,"topics":["modality","vue","vue-plugin"],"latest_commit_sha":null,"homepage":"https://vue-modal-flows.netlify.app/","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/tylermercer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-13T00:20:22.000Z","updated_at":"2023-03-08T19:03:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"d3ca3a16-b94c-453e-afbf-5f1f76bb7e92","html_url":"https://github.com/tylermercer/vue-modal-flows","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tylermercer/vue-modal-flows","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylermercer%2Fvue-modal-flows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylermercer%2Fvue-modal-flows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylermercer%2Fvue-modal-flows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylermercer%2Fvue-modal-flows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tylermercer","download_url":"https://codeload.github.com/tylermercer/vue-modal-flows/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylermercer%2Fvue-modal-flows/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32430803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: 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":["modality","vue","vue-plugin"],"created_at":"2024-12-14T09:14:34.739Z","updated_at":"2026-04-29T15:01:18.815Z","avatar_url":"https://github.com/tylermercer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Modal Flows\nA Vue plugin for managing modal flows in Vue. Note that these flows are not necessarily modal *dialogs* (hence why they're referred to as \"flows\" in this library). A modal flow is one where the user cannot switch to another part of the application and then return--the user must either finish the task represented by the modal flow, or cancel it.\n\nSee\n[this article](https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1)\nfor an excellent discussion of modality and its value\nin creating intuitive user experiences.\n\n## Usage\n\n### Setup\n\n```js\nconst flows = [\n  {\n    key: 'example-flow-key'\n    component: ExampleFlow\n  },\n  {\n    key: 'add-tag',\n    component: AddTagFlow\n  },\n  {\n    key: 'edit-post',\n    component: EditPostFlow\n  }\n]\n\nVue.use(VueFlows, {\n  hideCovered: false, //This determines whether the old UI is hidden while the flow is active. Default is true\n  flows,\n})\n\nnew Vue({\n  render: h =\u003e h(VueFlowsRoot(App)),\n}).$mount('#app')\n```\n\n**Important note** This library can be used in conjunction\nwith Vue Router, but navigating between routes is disabled\nwhen a modal is open. This is because navigating out of a\nmodal flow without cancelling or completing it is contrary\nto the entire point of modal flows (as explained above),\nand because competing with Vue Router to correctly manage\nthe window history in that case (i.e. allowing the user to\nreturn back to the modal after navigating away) is more\ncomplexity than I felt it was worth. This may change in the\nfuture.\n\n### Flows\n\nFlows are just Vue components. They may optionally do any\nof the following:\n* Expose a `payload` prop to take info from the flow callee.\n* Emit a `'close-flow'` event to indicate that the flow\nis complete and should close. This event can take a value\n(the flow result) that is returned to the callee as the Promise result (see below).\n\nNote: the recommended practice is to include a value with\nthe 'close-flow' event when the task associated with the\nflow is completed, and include no value when the task is\ncancelled. See\n[MultiplierFlow.vue](/src/demo/MultiplierFlow.vue)\nfor an example of this.\n\n### Starting a flow\n\nStarting a flow is as simple as calling `$flows.start`.\nThe method accepts the flow key, an optional payload, and\nreturns a promise that resolves when the flow returns a\nresult.\n\nFor example:\n\n```js\n//Inside component's method block\nasync exampleFunction() {\n  const result = await this.$flows.start(\n    'example-flow-key',\n    { 'this is': 'a payload' }\n  )\n  console.log(result);\n},\n```\n\n## Q \u0026 A\n### Couldn't I just use Vue Router to do this?\nThe advantage of using Flows over Vue Router is twofold:\n* The application interface and state prior to launching the\nmodal flow is preserved, and restored when the modal flow is\ncancelled or completed.\n* Flows can be started with a callback to be called when the\nflow is completed or cancelled. The `oncomplete` callback can\nreceive a result from the modal flow.\n\n### How do I associate a specific URL with a flow?\nMy recommendation is to set vue-router to use\n[history mode](https://router.vuejs.org/guide/essentials/history-mode.html)\nand then use `window.location.hash` to set the URL hash when\nloading the flow. To handle loading that flow when going\ndirectly to its URL, check if there's a hash when you load\nthe page. If there is, open the associated flow. (This can\nbe done in your route component's `created` function, for\nexample.)\n\n### How do I navigate to another route from within a flow?\nGo read\n[this article on modality](https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1).\nNavigating to another route from inside a flow breaks that\nflow's modality. Consider restructuring your application\nso that modality is used correctly. Your users will thank you.\n🙂\n\nIf for whatever reason you are still convinced you need to\nnavigate to another route from inside a flow, my recommendation\nis to close the flow (and any parent flows) using a\n`'close-flow'` event(s) and do the navigation from the non-flow\ncomponent that launched it.\n\n## Development\n### Project setup\n```\nyarn install\n```\n\n#### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n#### Compiles and minifies for production\n```\nyarn build\n```\n\n#### Lints and fixes files\n```\nyarn lint\n```\n\n#### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylermercer%2Fvue-modal-flows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylermercer%2Fvue-modal-flows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylermercer%2Fvue-modal-flows/lists"}