https://github.com/indentno/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.
https://github.com/indentno/vue-url-parameters
js mixin parameters url url-parameters vue vue-mixin
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/indentno/vue-url-parameters
- Owner: indentno
- License: mit
- Created: 2017-08-01T10:43:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-16T09:59:17.000Z (over 7 years ago)
- Last Synced: 2025-03-18T16:12:25.534Z (7 months ago)
- Topics: js, mixin, parameters, url, url-parameters, vue, vue-mixin
- Language: JavaScript
- Size: 12.7 KB
- Stars: 12
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-url-parameters
[](https://npmjs.com/package/vue-url-parameters)
[](LICENSE.md)
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:
```bash
$ npm install vue-url-parameters
```
## Usage
Import the package into your vue component.
```js
import vueUrlParameters from 'vue-url-parameters';
```
Apply the mixin:
```js
mixins: [vueUrlParameters],
```
Retrieve values from url on component init:
```js
// 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.
```js
this.updateUrlHash(this.searchParams);
```
**Example structure of an object (searchParams) that can be used with this package.**
```js
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:
```js
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](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
$ npm run test
```
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please contact [admin@sempro.no](mailto:admin@sempro.no) instead of using the issue tracker.
## Credits
- [Runar Jørgensen](https://github.com/ventrec)
- [Christoffer Martinsen](https://github.com/mrtnsn)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.