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.
vanduo v2 was retired on 2026-07-25
@vanduo-oss/vue 0.3.1, @vanduo-oss/framework 1.7.1, @vanduo-oss/core 1.0.1, @vanduo-oss/charts 0.2.0, @vanduo-oss/flowchart 1.1.0, @vanduo-oss/hex-grid 1.1.0, @vanduo-oss/music-player 1.1.0) and installing one now prints a deprecation notice. The v2 documentation site has been taken offline; this page is the maintained record of how the old API maps onto vd3, and the docs themselves remain readable as source in the archived vd2 repository. 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.