Migrating from vanduo v2 to vd3 Guide

vd3 is the Vue-3-only successor to the earlier vanduo v2 line — the three-package split of @vanduo-oss/core (tokens) + @vanduo-oss/framework (CSS/JS) + @vanduo-oss/vue (components). The migration is mostly mechanical: the vd-* classes, the Vd* component names, and the composable call signatures all carry over. What changes is where you import from.

Package map

The Vue components, composables, tokens, and CSS all collapse into a single @vanduo-oss/vd3 package; the four canvas add-ons move into the @vanduo-oss/vd3-cbun bundle, each on its own subpath.

vanduo v2 (old)vd3
@vanduo-oss/vue@vanduo-oss/vd3
@vanduo-oss/framework/css@vanduo-oss/vd3/css
@vanduo-oss/core (tokens)@vanduo-oss/vd3/css/core + /tokens.json
@vanduo-oss/charts@vanduo-oss/vd3-cbun/charts
@vanduo-oss/flowchart@vanduo-oss/vd3-cbun/flowchart
@vanduo-oss/hex-grid@vanduo-oss/vd3-cbun/hex-grid
@vanduo-oss/music-player@vanduo-oss/vd3-cbun/music-player

The old /vue subpath drops away — where you wrote @vanduo-oss/charts/vue you now import from @vanduo-oss/vd3-cbun/charts. Secondary subpaths follow the same rule (.../hex-grid/hex-math, .../charts/css).

One line per app: the plugin swap

The VanduoVue plugin identifier and its themeDefaults option are unchanged — only the import source moves. In your entry file, retarget the plugin import and the stylesheet to @vanduo-oss/vd3:

Before (v2)

// main.ts — vanduo v2 (the @vanduo-oss/vue line)
import { createApp } from 'vue';
import { VanduoVue } from '@vanduo-oss/vue';
import '@vanduo-oss/vue/css';
import App from './App.vue';

createApp(App).use(VanduoVue, { themeDefaults }).mount('#app');

After (vd3)

// main.ts — vd3 (only the two import sources change)
import { createApp } from 'vue';
import { VanduoVue } from '@vanduo-oss/vd3';
import '@vanduo-oss/vd3/css';
import App from './App.vue';

createApp(App).use(VanduoVue, { themeDefaults }).mount('#app');
Composable API

vd3 restores the twelve delegating / DOM-scan composables as first-class Vue composables. Their useX(rootRef) call signature is unchanged, so existing call sites port over untouched — swap the import from the old package to @vanduo-oss/vd3 and you are done:

useDropdownuseDraggableuseImageBoxuseRippleuseSpotlightuseTimelineuseExpandingCardsuseFlowuseTabsuseValidateuseSearchusePopover

Before (v2)

// vanduo v2 — these composables were thin shims that delegated to the
// zero-build global runtime, which the app had to bootstrap once at startup.
import { useDropdown, useTabs } from '@vanduo-oss/vue';

const root = ref<HTMLElement | null>(null);
useDropdown(root);
useTabs(root);

After (vd3)

// vd3 — same call signature; only the import source changes. The composables
// are now self-contained Vue, so there is nothing to load or init after mount.
import { useDropdown, useTabs } from '@vanduo-oss/vd3';

const root = ref<HTMLElement | null>(null);
useDropdown(root); // still useX(rootRef) — existing call sites port unchanged
useTabs(root);     // several now also return an optional controller (a superset)

The big change is under the hood: in v2 these composables delegated to the framework's zero-build global runtime, which an app bootstrapped once at startup. vd3 rewrites them as self-contained Vue — that runtime, and the startup call it needed, are gone, so there is nothing to load or initialise after mount. Several composables now also return an optional controller, which is a backward-compatible superset: call sites that ignored the old void result are unaffected.

vd3 also drops Pinia — its sole peer dependency is vue >=3.3. The v2 theme store is now the reactive useThemePreference() singleton, and useToast() / useToastStore() stay available as plain reactive singletons rather than a defineStore.

Keep exactly one line per app

vd3 and the old @vanduo-oss line render the same vd-* classes and read the same --vd-* CSS variables. Do not install both in one app. If both are present their stylesheets double-define the same tokens and selectors, and the two will clash unpredictably.

Migrate the whole app in a single pass — remove the old packages as you add @vanduo-oss/vd3 — rather than mixing v2 and vd3 imports side by side.