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!