{"id":27702,"library":"dockview-vue","title":"dockview-vue","description":"Vue 3 binding for dockview, a zero-dependency docking layout manager supporting tabs, groups, grids, splitviews, floating panels, popout windows, and drag-and-drop. Current stable version v6.0.6, with active development and frequent releases (v6.0.0 introduced CSS variable themes and context menus). Key differentiators: high test coverage, serialization/deserialization, extensive API, Shadow DOM support, and transparent builds. Peer dependency on Vue ^3.4.0. Note: dockview-vue is the Vue wrapper; core logic resides in dockview-core (automatically installed). Alternatives: rc-dock, react-mosaic.","status":"active","version":"6.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/mathuo/dockview","tags":["javascript","splitview","split-view","gridview","grid-view","dockview","dock-view","grid","tabs","typescript"],"install":[{"cmd":"npm install dockview-vue","lang":"bash","label":"npm"},{"cmd":"yarn add dockview-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add dockview-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; required for Vue 3 template compilation and reactivity","package":"vue","optional":false},{"reason":"runtime dependency providing the underlying layout engine and types","package":"dockview-core","optional":false}],"imports":[{"note":"DockviewVue is a named export, not a default export. CJS require: const { DockviewVue } = require('dockview-vue').","wrong":"import DockviewVue from 'dockview-vue'","symbol":"DockviewVue","correct":"import { DockviewVue } from 'dockview-vue'"},{"note":"Event types are re-exported from dockview-core, not from dockview-vue itself. Use dockview-core for all type imports.","wrong":"import { DockviewReadyEvent } from 'dockview-vue'","symbol":"DockviewReadyEvent","correct":"import type { DockviewReadyEvent } from 'dockview-core'"},{"note":"PanelApi is a type from dockview-core. For Vue-specific props, use 'dockview-vue' types like 'VuePanelProps'.","wrong":"import { PanelApi } from 'dockview-vue'","symbol":"PanelApi","correct":"import type { PanelApi } from 'dockview-core'"},{"note":"useDockview is a Vue composable provided by dockview-vue for programmatic access inside panels.","wrong":"import { useDockview } from 'dockview-core'","symbol":"useDockview","correct":"import { useDockview } from 'dockview-vue'"}],"quickstart":{"code":"<template>\n  <div class=\"dockview-theme-dark\" style=\"height: 500px\">\n    <DockviewVue @ready=\"onReady\">\n      <template #myPanel=\"{ params }\">\n        <div>Panel Content</div>\n      </template>\n    </DockviewVue>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { DockviewVue } from 'dockview-vue';\nimport type { DockviewReadyEvent } from 'dockview-core';\n\nfunction onReady(event: DockviewReadyEvent) {\n  event.api.addPanel({\n    id: 'panel1',\n    component: 'myPanel',\n    params: { title: 'Hello' }\n  });\n}\n</script>\n\n<style>\n@import 'dockview-vue/dist/styles/dockview.css';\n</style>","lang":"typescript","description":"Minimal Vue 3 SFC integrating DockviewVue with a single panel and a named slot template."},"warnings":[{"fix":"Update custom CSS to use CSS variable-based theme system. See migration guide at dockview.dev.","message":"v6.0.0: The spaced themes were migrated to CSS variables. Custom themes overriding old class names may break.","severity":"breaking","affected_versions":">=5.x.x <6.0.0"},{"fix":"Replace import DockviewVue from 'dockview-vue' with import { DockviewVue } from 'dockview-vue'.","message":"v5.0.0: Default export removed; all exports are now named.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Add the CSS import to your main app or component.","message":"Stylesheet must be imported separately: @import 'dockview-vue/dist/styles/dockview.css'. Missing import causes no visual layout.","severity":"gotcha","affected_versions":"*"},{"fix":"Use exact casing: if component: 'myPanel', use <template #myPanel>.","message":"Component slot names are case-sensitive and must match the component name passed to addPanel.","severity":"gotcha","affected_versions":"*"},{"fix":"Remove :theme=\"...\" from DockviewVue; add class to parent div.","message":"Prop 'theme' is deprecated since v5.x. Use CSS class 'dockview-theme-dark' on parent container.","severity":"deprecated","affected_versions":"<5.0.0"},{"fix":"Ensure panel is added before reading slot params. Use onMounted or watch.","message":"In Vue SFC, panel params are passed via slot props but only accessible after the panel is created. Accessing prematurely yields null.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Run npm install dockview-core (or ensure it's in your package.json). Then add 'dockview-core' to tsconfig.json types if needed.","cause":"dockview-core is a dependency of dockview-vue and should be installed automatically, but may be missing in some monorepo setups.","error":"Cannot find module 'dockview-core' or its corresponding type declarations."},{"fix":"Update dockview-vue to latest v6. If still failing, check API docs for 'addPanel' vs 'addGroup'.","cause":"Using an outdated version where addPanel was under a different name (e.g., 'addPanel' introduced in v4.x).","error":"Property 'addPanel' does not exist on type 'DockviewApi'."},{"fix":"Ensure import { DockviewVue } from 'dockview-vue' is present in script setup.","cause":"DockviewVue not properly imported or registered.","error":"Failed to resolve component: DockviewVue If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}