Query String Binding for AlpineJS

This is a simple plugin for AlpineJS that binds a property to a specified url query parameter.

Installation

You can install this package via NPM:

npm install @invoate/alpine-query-string

or by CDN:

<!-- Plugin --><scriptsrc="https://unpkg.com/@invoate/alpine-query-string/dist/alpine-query-string.min.js" defer></script><!-- AlpineJS --><scriptsrc="https://unpkg.com/alpinejs/dist/cdn.min.js" defer></script>

Setup

First you must register the plugin with Alpine.

importAlpinefrom"alpinejs"importqueryStringfrom"@invoate/alpine-query-string"Alpine.plugin(queryString)Alpine.start()

Usage

In your views, you can now use the x-query-string directive.

<divx-data="{ selected: 'option' }" x-query-string.param="selected"><!-- When `selected` changes ?param=value will be appended to the url --><!-- Visiting this page with ?param=value will set `selected` to `value` --></div>

When the first modifier is not set the parameter name will default to the name of the property

<divx-data="{ selected: 'option' }" x-query-string="selected"><!-- ?selected=value will be appended to the url --></div>

Credits

• Oliver Lumby
• All Contributors

License

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