Petite Vue (using an inline script for extra init code)
0
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)
0
Works with <details>
The child content in this <details> will not be initialized until you open it
Petite Vue
0
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
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
Petite Vue
0
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
This is an island nested in a <template> (it *can* have its own loading conditions!):
Petite Vue (JS is required for fallback):
0
Server-rendered Vue (SSR)
SSR requires server-side integration, in this case provided by Eleventy.