A vue mixin that simplifies working with url parameters. The package is developed for the purpose of allowing the key and values of a vue filter to be defined with url parameters.

Public package installation

You can install the package via npm:

$ npm install vue-url-parameters

Import the package into your vue component.

import vueUrlParameters from 'vue-url-parameters';

Apply the mixin:

mixins: [vueUrlParameters],

Retrieve values from url on component init:

// searchParams should be replaced with an object containing your properties
this.searchParams = this.getFiltersFromUrl(this.searchParams);

Trigger update of url hash when a filter changes, or in the method responsible for sending a request.

this.updateUrlHash(this.searchParams);

Example structure of an object (searchParams) that can be used with this package.

data() {
  return {
    searchParams: {
      q: null,
      type: 'all'
    }
  }
}

When you fetch attributes from the url, you can pass in a second parameter to the getFiltersFromUrl() function in order to case the attributes automatically:

this.getFiltersFromUrl(this.searchParams, true)

Strings that can be cast to a numeric value will be cast to a float. Strings that equals either true or false will be cast to a boolean.

Please see CHANGELOG for more information what has changed recently.

$ npm run test

Please see CONTRIBUTING for details.

If you discover any security related issues, please contact admin@sempro.no instead of using the issue tracker.

• Runar Jørgensen
• Christoffer Martinsen
• All Contributors

The MIT License (MIT). Please see License File for more information.