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

Scroll down

on:visible

Client-rendered petite-vue

Petite Vue
Petite Vue (using an inline script for extra init code)

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.

Vue (using an inline script for extra init code)

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.

No hydration, HTML only

Without hydration, the island is unnecessary.

Hello from Vue

With Hydration

Increment the counter:
1