vue-router-compositions

A util package for Vue-Router and Vue Composition API.

Installation

$ npm install vue-router-compositions

Basic Usage Examples

useRouteParam

Reactive route param. Updated from route param value, with a setter that apply route change.

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.

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:

import { useNavigateItem } from "vue-router-compositions";

export default {
  template: '<el-table :data="rows" @row-click="navigateItem"/>',
  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

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!