Svelte Islands

Svelte hosts use the built-in Island component directly. The same runtime can mount React, Vue, Svelte, or Angular islands inside a Svelte page.

#Authoring

Write normal Svelte pages and place Island where you want mixed-framework interactivity. AbsoluteJS lowers the island blocks and handles the SSR/bootstrap path for you.

SVELTE

<script lang="ts">
  import { Island } from '@absolutejs/absolute/svelte';
</script>

<main>
  <Island
    framework="react"
    component="ReactCounter"
    hydrate="load"
    props={{ initialCount: 0, label: 'React island' }}
  />
  <Island
    framework="vue"
    component="VueCounter"
    hydrate="visible"
    props={{ initialCount: 0, label: 'Deferred Vue island' }}
  />
</main>

#Stores

Svelte islands consume shared state with useIslandStore. It returns a Svelte store-like object, so you use it with the normal$store syntax.

SVELTE

<script lang="ts">
  import { useIslandStore } from '@absolutejs/absolute/svelte';
  import { counterIslandStore } from '../../islands/counterStore';

  let {
    initialCount,
    label
  }: {
    initialCount: number;
    label: string;
  } = $props();

  let count = $state(initialCount);
  const sharedCount = useIslandStore(
    counterIslandStore,
    (state) => state.sharedCount
  );
  const incrementShared = useIslandStore(
    counterIslandStore,
    (state) => state.incrementShared
  );
</script>

<div>
  <p>{label}</p>
  <strong>Local: {count}</strong>
  <strong>Shared: {$sharedCount}</strong>
  <button onclick={() => count += 1}>Increment Svelte</button>
  <button onclick={() => $incrementShared()}>Increment Shared</button>
</div>

PreviousSPA NextAI