vue-url-parameters

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.

Install

Public package installation

You can install the package via npm:

$ npm install vue-url-parameters

Usage

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'
    }
  }
}

Casting of attributes

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.

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

$ npm run test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact [email protected] instead of using the issue tracker.

Credits

• Runar Jørgensen
• Christoffer Martinsen
• All Contributors

License

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