---
layout: layout.html
title: Islands with Import Maps
showImportMaps: true
---
<h1><a href="/">is-land</a> using Import Maps</h1>

<h2>Standalone</h2>

<p>This is a control to make sure the component initializes as expected without an island.</p>

<vanilla-web-component class="demo-component">Vanilla web component</vanilla-web-component>

<h2>Scroll down</h2>

<hr style="height: 100vh">

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

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

<!-- You can add `import="petite-vue"` here if you want the import to finish before the component is declared “ready” -->
<is-land on:visible>
	<div id="petite-vue-app-visible">
		Petite Vue (using an inline script for extra init code):
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</div>

	<template data-island>
		<script type="module">
			import { createApp } from "petite-vue";

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

<h3>Lazy loaded 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>

<!-- You can add `import="vue"` here if you want the import to finish before the component is declared “ready” -->
<is-land on:visible>
	<div id="vue-app">
		Vue (using an inline script for extra init code):
		<button @click="count++">⬆️</button>
		<button @click="count--">⬇️</button>
		<span v-html="count">0</span>
	</div>

	<template data-island>
		<script type="module">
		import { createApp } from "vue";

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