{"id":13824113,"url":"https://github.com/greenpress/vue-router-compositions","last_synced_at":"2025-07-08T19:30:49.005Z","repository":{"id":42800449,"uuid":"271607165","full_name":"greenpress/vue-router-compositions","owner":"greenpress","description":"VueRouter Composition-API utils library","archived":false,"fork":false,"pushed_at":"2023-03-04T23:49:17.000Z","size":342,"stargazers_count":19,"open_issues_count":7,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-22T18:38:24.962Z","etag":null,"topics":["composition-api","hacktoberfest","vue"],"latest_commit_sha":null,"homepage":null,"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/greenpress.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}},"created_at":"2020-06-11T17:28:40.000Z","updated_at":"2024-11-20T13:58:59.000Z","dependencies_parsed_at":"2024-01-08T08:56:41.530Z","dependency_job_id":null,"html_url":"https://github.com/greenpress/vue-router-compositions","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"394a126badcff8936165f0444ef78c9f64b63cae"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/greenpress/vue-router-compositions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpress%2Fvue-router-compositions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpress%2Fvue-router-compositions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpress%2Fvue-router-compositions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpress%2Fvue-router-compositions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greenpress","download_url":"https://codeload.github.com/greenpress/vue-router-compositions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpress%2Fvue-router-compositions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264333831,"owners_count":23592300,"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","hacktoberfest","vue"],"created_at":"2024-08-04T09:00:56.936Z","updated_at":"2025-07-08T19:30:48.751Z","avatar_url":"https://github.com/greenpress.png","language":"TypeScript","funding_links":[],"categories":["Packages","Components \u0026 Libraries","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities"],"readme":"# vue-router-compositions\n\n[![npm version](https://badge.fury.io/js/vue-router-compositions.svg)](https://badge.fury.io/js/vuex-composition-helpers)\n\nA util package for Vue-Router and Vue Composition API.\n\n## Installation\n\n```shell\n$ npm install vue-router-compositions\n```\n\n### Basic Usage Examples\n\n#### useRouteParam\n\nReactive route param.\nUpdated from route param value, with a setter that apply route change.\n\n```js\nimport { useRouteParam } from \"vue-router-compositions\";\n\nexport default {\n  setup() {\n    const { articleId } = useRouteParam(\"articleId\");\n    // \"articleId\" is a computed property from current route:\n    doSomethingWithRouteParam(articleId.value);\n    return {\n      someAction() {\n        // this actions will set up a route change accordingly\n        articleId.value = \"new-article-ID\";\n      },\n    };\n  },\n};\n```\n\n#### useQueryParam\n\nReactive query param.\nUpdated from route param value, with a setter that apply route change.\n\n```js\nimport { useQueryParam } from \"vue-router-compositions\";\n\nexport default {\n  setup() {\n    const { page } = useQueryParam(\"page\", \"1\");\n    const { sort } = useQueryParam(\"sort\", \"ascending\", [\"ascending\", \"descending\"]);\n\n    return {\n      changePage(newPage) {\n        // will trigger a query route change.\n        page.value = newPage;\n      },\n      changeSort(isAscending) {\n        // trying to set a value that not included on the enumOptions will be ignored.\n        sort.value = isAscending ? \"ascending\" : \"descending\";\n      },\n    };\n  },\n};\n```\n\n#### useNavigateItem\n\nHelper function to create a navigation method for your entities.\n\nLet's say you're using a table of some kind, and you want to subscribe to a row click event.\nIn common cases, the \"click\" event will send the row's entity item as the event payload.\nIn case you want to trigger a route change to navigate to this item's screen, you can use this method as the example below:\n\n```js\nimport { useNavigateItem } from \"vue-router-compositions\";\n\nexport default {\n  template: '\u003cel-table :data=\"rows\" @row-click=\"navigateItem\"/\u003e',\n  setup() {\n    const { navigateItem } = useNavigateItem(\"article\", \"articleId\", \"rowId\");\n\n    return {\n      rows: [\n        { rowId: \"1234\", title: \"first article\" },\n        { rowId: \"2345\", title: \"second article\" },\n        { rowId: \"4567\", title: \"third article\" },\n      ],\n      navigateItem,\n    };\n  },\n};\n```\n\n#### useRouteDispatcher\n\nCreate a reactive dispatcher from a router param\n\n```js\nimport { useRouteDispatcher } from \"vue-router-compositions\";\n\nconst fetchArticle = (articleId) =\u003e fetch(`/articles/${articleId}`).then((res) =\u003e res.json());\n\nexport default {\n  setup() {\n    const { result, loading, error, promise, param } = useRouteDispatcher(\"articleId\", fetchArticle);\n\n    return {\n      // all values are reactive\n      param,\n      result,\n      loading,\n      error,\n      promise,\n    };\n  },\n};\n```\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenpress%2Fvue-router-compositions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreenpress%2Fvue-router-compositions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenpress%2Fvue-router-compositions/lists"}