Skip to the demo 11ty Demo

is-land

A framework independent partial hydration islands architecture implementation.

is-land using IndieWeb avatar for https://vuejs.org/ Vue.js

Scroll down

on:visible

Client-rendered petite-vue

Petite Vue (auto-init)
Petite Vue (manual init)

Client-rendered Vue.js

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.

Hello from Vue (auto-init)
Vue (manual init)

Works with <details>

The child content in this <details> will not be initialized until you open it Petite Vue

on:idle

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)

Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue Petite Vue

Fallback content

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

on:interaction: Hover or focus to hydrate the island:

Petite Vue (count fallback content is shown, buttons require JS): 0

Server-rendered Vue (SSR)

SSR requires server-side integration, in this case provided by Eleventy.

HTML only (no hydration)

Without hydration, the island is unnecessary.

Hello from Vue

With Hydration

Auto-init:

Increment the counter: 1

Manual init:

Increment the counter:
1