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: 3 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 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T23:49:17.000Z (over 1 year ago)
• Last Synced: 2024-05-31T00:06:38.277Z (5 months ago)
• Topics: composition-api, hacktoberfest, vue
• Language: TypeScript
• Size: 334 KB
• Stars: 18
• 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

[![npm version](https://badge.fury.io/js/vue-router-compositions.svg)](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!