Many page interactions don't warrant a full server-roundtrip, such as toggling a modal or a hidden element. In these instances, we recommend using AlpineJS.
AlpineJS allows you to add JavaScript behavior directly into your markup in a declarative way. If you are familiar with VueJS, Alpine should feel similar.


<script src="[email protected]/dist/alpine.min.js" defer></script>
<!-- The "defer" attribute is important to make sure Alpine waits for CBWIRE to load first. -->
For more installation information, visit the Alpine Docs.


Below is an example of using AlpineJS to toggle a list on the page.
<div x-data="{ open: false }">
<button @click="open = true">Show More...</button>
<ul x-show="open" @click.away="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
Export as PDF
Copy link
On this page