demo-vue.html

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

<h2>Scroll down</h2>

<hr style="height: 100vh">

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

<h3>Client-rendered petite-vue</h3>

<is-land on:visible type="petite-vue" v-scope="{ count: 0 }">
	Petite Vue (auto-init)
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-text="count">0</span>
	</template>
</is-land>

<is-land on:visible>
	<div id="petite-vue-app">
		Petite Vue (manual init)
		<template data-island>
			<button @click="count++">⬆️</button>
			<button @click="count--">⬇️</button>
			<span v-text="count">0</span>
		</template>
	</div>

	<template data-island>
		<script type="module">
		import { createApp } from "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js";
		createApp({
			count: 1,
		}).mount("#petite-vue-app")
		</script>
	</template>
</is-land>

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

<p>This is the first full Vue component (and it is off-viewport) so the library code is also lazy loaded. The island will eagerly load the library code if it has no loading conditions.</p>

<is-land on:visible type="vue" data-name="Vue">
	Hello from <span v-text="name"></span>
</is-land>

<is-land on:visible type="vue" data-count="0">
	Vue (auto-init)
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-text="count"></span>
	</template>
</is-land>

<is-land on:visible>
	<div id="vue-app">
		Vue (manual init)
		<template data-island>
			<button @click="count++">⬆️</button>
			<button @click="count--">⬇️</button>
			<span v-text="count"></span>
		</template>
	</div>

	<template data-island>
		<script type="module">
		import { createApp } from "https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.prod.js";

		createApp({
			data: () => ({ count: 0 })
		}).mount("#vue-app")
		</script>
	</template>
</is-land>

<h3>Works with &lt;details&gt;</h3>
<details>
	<summary>The child content in this &lt;details&gt; will not be initialized until you open it</summary>

	<is-land on:visible type="petite-vue" v-scope="{ count: 0 }">
		Petite Vue
		<template data-island>
			<button @click="count++">⬆️</button>
			<button @click="count--">⬇️</button>
			<span v-html="count">0</span>
		</template>
	</is-land>
</details>


<h2><code>on:idle</code></h2>

<p>In this example (under the right conditions) you might be able to see these petite-vue islands wait until the full Vue.js island finishes above (if both are visible)</p>

<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>
<is-land type="petite-vue" on:idle v-scope="{ count: 0 }">
	Petite Vue
	<template data-island>
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</template>
</is-land>

<h2>Fallback content</h2>

<p>If you put child content in a &lt;template&gt; it will be JavaScript-only (no fallback). Use this to your advantage! You can mix and match &lt;template&gt; with other progressively enhanced content in the island.</p>

<is-land on:interaction="mouseenter,focusin">
	<p><code>on:interaction</code>: Hover or focus to hydrate the island:</p>

	<is-land type="petite-vue" v-scope="{ count: 0 }">
		Petite Vue (count fallback content is shown, buttons require JS):
		<template data-island>
			<button @click="count++">⬆️</button>
			<button @click="count--">⬇️</button>
		</template>
		<span v-html="count">0</span>
	</is-land>

	<template data-island>
		<p>This is an island nested in a &lt;template&gt; (it *can* have its own loading conditions!):</p>

		<is-land type="petite-vue" on:interaction="mouseenter,focusin" v-scope="{ count: 0 }">
			Petite Vue (JS is required for fallback):
			<template data-island>
				<button @click="count++">⬆️</button>
				<button @click="count--">⬇️</button>
				<span v-html="count">0</span>
			</template>
		</is-land>
	</template>
</is-land>

<h2>Server-rendered Vue (SSR)</h2>

<p>SSR requires server-side integration, in this case provided by Eleventy.</p>

<h3>HTML only (no hydration)</h3>

<p>Without hydration, the island is unnecessary.</p>

<div class="demo-component">
	{% assign component = "./lib/vue/vue-component-html-only.js" | vue %}
	{{ component.html }}
</div>

<h3>With Hydration</h3>

<p>Auto-init:</p>

{% assign component = "./lib/vue/vue-component.js" | vue %}

Increment the counter:
<is-land on:visible type="vue-ssr" import="{{ component.clientJsUrl }}">{{ component.html }}</is-land>

<p>Manual init:</p>

<is-land on:visible>
	Increment the counter:
	<div id="vue-app-ssr">{{ component.html }}</div>

	<template data-island>
		<script type="module">
		import { createSSRApp } from "https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.prod.js";
		import app from "{{ component.clientJsUrl }}";

		createSSRApp(app).mount("#vue-app-ssr");
		</script>
	</template>
</is-land>