This is a simple plugin for AlpineJS that binds a property to a specified url query parameter.
You can install this package via NPM:
npm install @invoate/alpine-query-stringor by CDN:
<!-- Plugin -->
<script src="https://unpkg.com/@invoate/alpine-query-string/dist/alpine-query-string.min.js" defer></script>
<!-- AlpineJS -->
<script src="https://unpkg.com/alpinejs/dist/cdn.min.js" defer></script>First you must register the plugin with Alpine.
import Alpine from "alpinejs"
import queryString from "@invoate/alpine-query-string"
Alpine.plugin(queryString)
Alpine.start()In your views, you can now use the x-query-string directive.
<div x-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
<div x-data="{ selected: 'option' }" x-query-string="selected">
<!-- ?selected=value will be appended to the url -->
</div>The MIT License (MIT). Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent