https://github.com/greenpress/vue-router-compositions
VueRouter Composition-API utils library
https://github.com/greenpress/vue-router-compositions
composition-api hacktoberfest vue
Last synced: 4 months ago
JSON representation
VueRouter Composition-API utils library
- Host: GitHub
- URL: https://github.com/greenpress/vue-router-compositions
- Owner: greenpress
- License: mit
- Created: 2020-06-11T17:28:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T23:49:17.000Z (over 2 years ago)
- Last Synced: 2024-12-22T18:38:24.962Z (10 months ago)
- Topics: composition-api, hacktoberfest, vue
- Language: TypeScript
- Size: 334 KB
- Stars: 19
- Watchers: 3
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - vue-router-compositions - VueRouter Composition-API utils library (Packages)
README
# vue-router-compositions
[](https://badge.fury.io/js/vuex-composition-helpers)
A util package for Vue-Router and Vue Composition API.
## Installation
```shell
$ npm install vue-router-compositions
```
### Basic Usage Examples
#### useRouteParam
Reactive route param.
Updated from route param value, with a setter that apply route change.
```js
import { useRouteParam } from "vue-router-compositions";
export default {
setup() {
const { articleId } = useRouteParam("articleId");
// "articleId" is a computed property from current route:
doSomethingWithRouteParam(articleId.value);
return {
someAction() {
// this actions will set up a route change accordingly
articleId.value = "new-article-ID";
},
};
},
};
```
#### useQueryParam
Reactive query param.
Updated from route param value, with a setter that apply route change.
```js
import { useQueryParam } from "vue-router-compositions";
export default {
setup() {
const { page } = useQueryParam("page", "1");
const { sort } = useQueryParam("sort", "ascending", ["ascending", "descending"]);
return {
changePage(newPage) {
// will trigger a query route change.
page.value = newPage;
},
changeSort(isAscending) {
// trying to set a value that not included on the enumOptions will be ignored.
sort.value = isAscending ? "ascending" : "descending";
},
};
},
};
```
#### useNavigateItem
Helper function to create a navigation method for your entities.
Let's say you're using a table of some kind, and you want to subscribe to a row click event.
In common cases, the "click" event will send the row's entity item as the event payload.
In case you want to trigger a route change to navigate to this item's screen, you can use this method as the example below:
```js
import { useNavigateItem } from "vue-router-compositions";
export default {
template: '',
setup() {
const { navigateItem } = useNavigateItem("article", "articleId", "rowId");
return {
rows: [
{ rowId: "1234", title: "first article" },
{ rowId: "2345", title: "second article" },
{ rowId: "4567", title: "third article" },
],
navigateItem,
};
},
};
```
#### useRouteDispatcher
Create a reactive dispatcher from a router param
```js
import { useRouteDispatcher } from "vue-router-compositions";
const fetchArticle = (articleId) => fetch(`/articles/${articleId}`).then((res) => res.json());
export default {
setup() {
const { result, loading, error, promise, param } = useRouteDispatcher("articleId", fetchArticle);
return {
// all values are reactive
param,
result,
loading,
error,
promise,
};
},
};
```
Enjoy!