{"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,"search_vec":"'3':5 '3.4.0':66 'activ':35 'altern':84 'api':55 'automat':82 'bind':6 'build':61 'context':46 'core':75,81 'coverag':52 'css':42 'current':30 'depend':12,63 'develop':36 'differenti':49 'dock':13,87,102 'dock-view':101 'dockview':2,8,69,80,100 'dockview-cor':79 'dockview-vu':1,68 'dom':57 'drag':27 'drag-and-drop':26 'drop':29 'extens':54 'float':21 'frequent':38 'grid':19,98,104 'grid-view':97 'gridview':96 'group':18 'high':50 'instal':83 'introduc':41 'javascript':91 'key':48 'layout':14 'logic':76 'manag':15 'menus':47 'mosaic':90 'note':67 'panel':22 'peer':62 'popout':23 'rc':86 'rc-dock':85 'react':89 'react-mosa':88 'releas':39 'resid':77 'serialization/deserialization':53 'shadow':56 'split':94 'split-view':93 'splitview':20,92 'stabl':31 'support':16,58 'tab':17,105 'test':51 'theme':44 'transpar':60 'typescript':106 'v6.0.0':40 'v6.0.6':33 'variabl':43 'version':32 'view':95,99,103 'vue':3,4,65,70,73 'window':24 'wrapper':74 'zero':11 'zero-depend':10","created_at":"2026-05-09T05:51:38.165949+00:00","updated_at":"2026-05-09T05:51:38.165949+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://dockview.dev","github":"https://github.com/mathuo/dockview","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/dockview-vue","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization","data"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-09","next_check":"2026-08-07","install_tag":null}}