{"id":16259572,"url":"https://github.com/tahul/vue-catch-hrefs","last_synced_at":"2025-10-24T18:03:05.290Z","repository":{"id":42827002,"uuid":"266433325","full_name":"Tahul/vue-catch-hrefs","owner":"Tahul","description":"🔗 Catch clicks on hrefs links (in v-html) and route them to vue-router","archived":false,"fork":false,"pushed_at":"2023-01-06T06:48:40.000Z","size":2463,"stargazers_count":5,"open_issues_count":13,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-19T04:27:08.356Z","etag":null,"topics":["dom","listen","path-formatter","redirection","vue-router"],"latest_commit_sha":null,"homepage":"https://yael.dev","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/Tahul.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}},"created_at":"2020-05-23T22:58:53.000Z","updated_at":"2023-05-25T15:09:52.000Z","dependencies_parsed_at":"2023-02-05T13:47:09.943Z","dependency_job_id":null,"html_url":"https://github.com/Tahul/vue-catch-hrefs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"f/vue-plugin-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fvue-catch-hrefs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fvue-catch-hrefs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fvue-catch-hrefs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tahul%2Fvue-catch-hrefs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tahul","download_url":"https://codeload.github.com/Tahul/vue-catch-hrefs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244022670,"owners_count":20385135,"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":["dom","listen","path-formatter","redirection","vue-router"],"created_at":"2024-10-10T16:03:40.602Z","updated_at":"2025-10-24T18:03:00.242Z","avatar_url":"https://github.com/Tahul.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./resources/vue-catch-hrefs.png\" width=\"400\"\u003e\n\u003c/p\u003e\n\n---\n\n# vue-catch-hrefs\n\nThis plugin aims to catch clicks on `\u003ca href=\"...\"\u003e` links referring to your app from user generated content in order to redirect them to your local vue-router.\n\nThis can be useful to parse links that you add to content from a headless cms, or from any API you consume.\n\nListening to the whole DOM allows us to trigger routing to the app from anywhere on the DOM, including outside your Vue app if it is bundled inside a page.\n\nYou can manipulate data and cancel events easily with the global event bus or with your path formatter.\n\n## Installation\n\nInstall the plugin from your favorite package manager.\n\n```bash\nnpm install vue-catch-hrefs\n```\n\nInstall the plugin in your app.\n\n```javascript\n// Setup your router somehow [...]\nimport router from \"./router\"\n// VueCatchHrefs imports\nimport VueCatchHrefs from \"vue-catch-hrefs\"\nimport pathFormatter from \"~/your-plugins-path/pathFormatter\"\n\nVue.use(VueCatchHrefs, pathFormatter)\n```\n\n## Usage\n\nThe plugin listens to your apps clicks on \u003ca\u003e elements.\n\nFrom that, it catches up the href location and matches it with your app url.\n\nIf it does, then the content of the href is routed to your vue-router instance.\n\nYou can catch the content of the matched link from anywhere in your app using the global event bus.\n\nYou can also format the path using your own parameters with your own formatter.\n\n### Global event bus\n\nThe event bus can be used to listen the anchor links on the page and redirect them to your router or trigger action in components with it.\n\n```javascript\n// ~/components/YourComponent.vue\nimport { routeEventBus } from \"vue-catch-hrefs\"\n\nexport default {\n  name: \"YourComponent\",\n\n  mounted() {\n    routeEventBus.$on(\"href\", ({ url, path, from, event }) =\u003e {\n      // Your data manipulation...\n      console.log({ \n         url,  // The URL object matched from the href attribute\n         path, // The path matched after formatting\n         from, // The \u003ca\u003e element matched\n         event // The MouseEvent caught\n      })\n    })\n  }\n}\n```\n\n### Path formatter\n\nThe path formatter can be used to manipulate the data and/or cancel the redirection.\n\nThe formatter must return a string value, corresponding to the path that will be sent to your router, or `false` that will cancel the redirection and fire the original click on the href.\n\nThe string returned will be sent to your vue-router as a `path` attribute.\n\n```javascript\n// ~/plugins/vue-catch-hrefs/path-formatter.js\nexport default (path, currentRoute) =\u003e {\n  // Remove the query params after the first one\n  if (path.indexOf(\"\u0026\") \u003e -1) {\n    path = path.substring(0, path.indexOf(\"\u0026\"))\n  }\n  \n  // If the link is an anchor path, cancel the redirection.\n  // This click will be handled through component event listener.\n  if (currentRoute.path + \"#\" === path) {\n    return false\n  }\n\n  // Return the path\n  return path\n}\n```\n\nOnce you have written your own path formatter, you have to add it to the plugin initialization.\n\nTo do so, pass it as a parameter in your `Vue.use` instruction.\n\n## Examples of usage\n\nI'm using this plugin on [Zouw.app](https://zouw.app) to parse timecodes used in YouTube HTML descriptions from the YouTube API.\n\nI'm also using it to re-route original YouTube links to my app.\n\nI can listen to the events from the caught links clicks with the global event bus, and interact with the YouTube player using the data inside the original YouTube URL.\n\nI also tried it on my personal website [yael.dev](https://yael.dev), which is rendering HTML content from DatoCMS with Nuxt, and it works.\n\n## Credits\n\n[Yaël GUILLOUX](mailto:yael.guilloux@gmail.com)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahul%2Fvue-catch-hrefs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftahul%2Fvue-catch-hrefs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahul%2Fvue-catch-hrefs/lists"}