demo-alpine.html

---
layout: layout.html
title: Alpine.js Islands
---
<h1><a href="/">is-land</a> using <img src="https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Falpinejs.dev%2F/" alt="IndieWeb avatar for https://alpinejs.dev/" width="28" height="28" decoding="async" loading="lazy"> Alpine.js</h1>

<h2>Scroll down</h2>

<hr style="height: 100vh">

<h2><code>on:visible</code></h2>

<h3>Client-rendered Alpine.js</h3>

<is-land on:visible import="https://unpkg.com/alpinejs">
	<div x-data="{ count: 0 }">
		Hello from Alpine.js!

		<button @click="count++">⬆️</button> <button @click="count--">⬇️</button> <span x-text="count"></span>
	</div>
</is-land>

<h3>Client-rendered Alpine.js using &lt;template&gt; (no fallback)</h3>

<is-land on:visible import="https://unpkg.com/alpinejs">
	<template data-island>
		<div x-data="{ count: 0 }">
			Hello from Alpine.js!

			<button @click="count++">⬆️</button> <button @click="count--">⬇️</button> <span x-text="count"></span>
		</div>
	</template>
</is-land>