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.