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

Setup

First you must register the plugin with Alpine.

import Alpine from "alpinejs"
import queryString from "@invoate/alpine-query-string"

Alpine.plugin(queryString)

Alpine.start()

Usage

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>

Credits

• Oliver Lumby
• All Contributors

License

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