Introduction

Vue-route-values is a library that allows you to manage route params and route query params directly within your template —using vue-router— without any other scaffolding. That’s perfect for handle route query params for pagination, filtering, sorting, tracking, etc. Using the route params directly as regular reactive values instead of using them as readonly values, gives you the ability to have a verbose URL ready to share at anytime.

In short, RouteParamValue and RouteQueryValue components handle their corresponding values —you only need to declare the name they have within the route/URL— and exposes its current value together with some helper functions to mutate it:

• value
• set(newValue)
• resetToDefault()

This example will handle a route like /items?page=2 or /items (page=1 as default):

<template>
	<RouteQueryValue
		name="page"
		type="number"
		:defaultValue="1"
		#default="{ value, set }"
	>
		<Paginator
			:value="value"
			@input="set"
		/>
	</RouteQueryValue>
</template>

On the other hand, you can use RouteValues to handle multiple route params or route query params at once. Check this example that handles a route like /:username/friends?page=2&sort=name:

<template>
	<RouteValues
		:optsByName="{
			username: {
				where: 'params',
			},
			page: {
				type: 'number',
				defaultValue: 1,
			},
			sort: {
				defaultValue: 'option1',
			},
		}"
		#default="{ username, page, sort, set }"
	>
		<div class="flex-row">
			<p>Username: <b>{{ username }}</b></p>
			<Paginator
				:value="page"
				@input="set('page', $event)"
			/>
			<SelectInput
				:value="sort"
				:options="sortOptions"
				@input="set('sort', $event)"
			/>
		</div>
	</RouteValues>
</template>

Finally, you can use the factory mixin routeValuesMixin to use this route values directly within a custom component —it will add every route value as a computed value with a setter—. This example is equivalent to the previous one with a route like /:username/friends?page=2&sort=name:

<template>
	<div class="flex-row">
		<p>Username: <b>{{ username }}</b></p>
		<Paginator v-model="page" />
		<SelectInput
			v-model="sort"
			:options="sortOptions"
		/>
	</div>
</template>

<script>
import { routeValuesMixin } from 'vue-route-values'
import { Paginator, SelectInput } from './components'

export default {
    name: 'RouteValuesMixinDemo',
    components: { Paginator, SelectInput },
    mixins: [routeValuesMixin([
        { where: 'params', name: 'username' },
        { name: 'page', type: 'number', defaultValue: 1 },
        { name: 'sort', defaultValue: 'option1' },
    ])],
    created () {
        this.sortOptions = [
            { key: 'option1', label: 'Option 1' },
            { key: 'option2', label: 'Option 2' },
            { key: 'option3', label: 'Option 3' },
        ]
    },
}
</script>