Aire + Alpine.js

Aire comes with built-in support for Alpine.js, a reactive JavaScript library built for server-generated markup. Alpine lets you add sophisticated interactions to your forms without committing to a full-scale single page app.

All you need to do to enable Alpine integration is use the asAlpineComponent() method:

{{ Aire::route('demo.store')->asAlpineComponent() }}

This will do two things for you:

1. Set up the x-data attribute on your <form> tag.
2. Add x-model attributes to each of your elements.

Aire uses all the same data binding logic for x-data, so that you’re ready to go without any additional work:

Sample Code:

{{ Aire::open()->bind(['comment' => 'Alpine.js is great.'])->asAlpineComponent() }}
{{ Aire::input('comment', 'Your Comment') }}
{{ Aire::select(['5' => '5 stars', '11' => '11 stars'], 'alpine_rating')->defaultValue('5') }}

<div class="my-4 p-2 border rounded">
  <div class="font-bold mb-1">Preview Your Review</div>
  <div class="italic text-lg font-serif">“<span x-text="comment"></span>”</div>
  <div class="text-sm font-bold"><span x-text="rating"></span> stars</div>
</div>

{{ Aire::submit('Submit Review') }}
{{ Aire::close() }}

Resulting Form:

Effective HTML (just showing Alpine-specific portions):

<form x-data="{'comment': 'Alpine.js is great.', 'rating': '5'}">
<input name="comment" x-model="comment" />
<select name="rating" x-model="rating">
  <option value="5">5 stars</option>
  <option value="11">11 stars</option>
</select>
<div class="my-4 p-2 border rounded">
  <div class="font-bold mb-1">Preview Your Review</div>
  <div class="italic text-lg font-serif">“<span x-text="comment"></span>”</div>
  <div class="text-sm font-bold"><span x-text="rating"></span> stars</div>
</div>
<button type="submit">Submit Review</button>
</form>