Preact islands example

[codepunkt]

I'm trying to get an interactive preact islands example to work, but always run into errors. Are there any interactive preact island examples available?

For example, my island component is this:

import { useState } from "preact/hooks";

interface CounterProps {
  start: number;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count - 1)}>
        -1
      </button>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

How do I use that in a vue template to have it lazily hydrated?

[ElMassimo]

Hi Christoph!

If you run pnpm create iles@next, you can select to initialize a project with a Preact example.

Additionally, the docs are using a Preact island for DocSearch in the navbar.

Read the Hydration guide for usage examples.

[codepunkt]

I saw all that, but it wasn't obvious to me that you always need a client hydration attribute, even if it is client:none for SSR-only non-vue components.

[ElMassimo]

Agree that it's not obvious, but it is documented: