Vue

npm install @kadal/deck-vue vue

src/main.tsx

import { registerLazyRenderer } from "@kadal/deck";

registerLazyRenderer("vue", () => import("@kadal/deck-vue").then((m) => m.vueRenderer));

<Island
  framework="vue"
  load={() => import("./chart.ts").then((m) => m.Chart)}
  props={{ data }}
  client="slide"
/>

Registered by name and loaded on arrival, neither Vue’s runtime nor the component is in the deck’s first chunk — measured at 64 kB off the showcase deck’s opening load.

A component written as options is recognised on its own. A functional Vue component is a plain function, indistinguishable from a React or Solid one, so it has to say so — with framework="vue" on the island, or:

import { deckVue } from "@kadal/deck-vue";

export const Chart = deckVue((props) => h("div", props.label));

Props stay live. createApp(Component, props) takes its props once; the renderer instead mounts the app around a reactive bag that its render function reads, so update is a mutation and the island keeps its state as you step through the slide.

If your Vue components are single-file components, add @vitejs/plugin-vue to the deck’s Vite config.