dockview-vue

library6.0.6jsnpmunverified

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.

web-framework serialization data

npm install dockview-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DOCKVIEW-VUE

dockview-vue

web-frameworkjavascriptv6.0.6

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DockviewVue

✓ import { DockviewVue } from 'dockview-vue'

✗ import DockviewVue from 'dockview-vue'

DockviewVue is a named export, not a default export. CJS require: const { DockviewVue } = require('dockview-vue').

DockviewReadyEvent

✓ import type { DockviewReadyEvent } from 'dockview-core'

✗ import { DockviewReadyEvent } from 'dockview-vue'

Event types are re-exported from dockview-core, not from dockview-vue itself. Use dockview-core for all type imports.

PanelApi

✓ import type { PanelApi } from 'dockview-core'

✗ import { PanelApi } from 'dockview-vue'

PanelApi is a type from dockview-core. For Vue-specific props, use 'dockview-vue' types like 'VuePanelProps'.

useDockview

✓ import { useDockview } from 'dockview-vue'

✗ import { useDockview } from 'dockview-core'

useDockview is a Vue composable provided by dockview-vue for programmatic access inside panels.

Minimal Vue 3 SFC integrating DockviewVue with a single panel and a named slot template.

<template> <div class="dockview-theme-dark" style="height: 500px"> <DockviewVue @ready="onReady"> <template #myPanel="{ params }"> <div>Panel Content</div> </template> </DockviewVue> </div> </template> <script setup lang="ts"> import { DockviewVue } from 'dockview-vue'; import type { DockviewReadyEvent } from 'dockview-core'; function onReady(event: DockviewReadyEvent) { event.api.addPanel({ id: 'panel1', component: 'myPanel', params: { title: 'Hello' } }); } </script> <style> @import 'dockview-vue/dist/styles/dockview.css'; </style>

Debug

Known issues

breakingv6.0.0: The spaced themes were migrated to CSS variables. Custom themes overriding old class names may break.

fix

Update custom CSS to use CSS variable-based theme system. See migration guide at dockview.dev.

affects: >=5.x.x <6.0.0

breakingv5.0.0: Default export removed; all exports are now named.

fix

Replace import DockviewVue from 'dockview-vue' with import { DockviewVue } from 'dockview-vue'.

affects: <5.0.0

gotchaStylesheet must be imported separately: @import 'dockview-vue/dist/styles/dockview.css'. Missing import causes no visual layout.

fix

Add the CSS import to your main app or component.

affects: *

gotchaComponent slot names are case-sensitive and must match the component name passed to addPanel.

fix

Use exact casing: if component: 'myPanel', use <template #myPanel>.

affects: *

deprecatedProp 'theme' is deprecated since v5.x. Use CSS class 'dockview-theme-dark' on parent container.

fix

Remove :theme="..." from DockviewVue; add class to parent div.

affects: <5.0.0

gotchaIn Vue SFC, panel params are passed via slot props but only accessible after the panel is created. Accessing prematurely yields null.

fix

Ensure panel is added before reading slot params. Use onMounted or watch.

affects: *

Errors

Common errors & fixes

Cannot find module 'dockview-core' or its corresponding type declarations.

dockview-core is a dependency of dockview-vue and should be installed automatically, but may be missing in some monorepo setups.

fix

Run npm install dockview-core (or ensure it's in your package.json). Then add 'dockview-core' to tsconfig.json types if needed.

Property 'addPanel' does not exist on type 'DockviewApi'.

Using an outdated version where addPanel was under a different name (e.g., 'addPanel' introduced in v4.x).

fix

Update dockview-vue to latest v6. If still failing, check API docs for 'addPanel' vs 'addGroup'.

Failed to resolve component: DockviewVue If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

DockviewVue not properly imported or registered.

fix

Ensure import { DockviewVue } from 'dockview-vue' is present in script setup.

Upgrade

Version history

6.0.6latest on npm

Audit

Dependencies

vuerequiredpeer dependency; required for Vue 3 template compilation and reactivity

dockview-corerequiredruntime dependency providing the underlying layout engine and types

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mathuo/dockview ↗

packagehttps://www.npmjs.com/package/dockview-vue ↗

homepagehttps://dockview.dev ↗