dockview-vue

6.0.6 verified Sat May 09 auth: no javascript

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.

Common errors

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

cause 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.

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

cause 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'.

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

cause DockviewVue not properly imported or registered.

fix

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

Warnings

breaking v6.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.

breaking v5.0.0: Default export removed; all exports are now named. ↓

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

gotcha Stylesheet 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.

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

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

deprecated Prop '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.

gotcha In 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.

Install

npm install dockview-vue

yarn add dockview-vue

pnpm add dockview-vue

Imports

DockviewVue
wrong
```
import DockviewVue from 'dockview-vue'
```
correct
```
import { DockviewVue } from 'dockview-vue'
```
DockviewVue is a named export, not a default export. CJS require: const { DockviewVue } = require('dockview-vue').
DockviewReadyEvent
wrong
```
import { DockviewReadyEvent } from 'dockview-vue'
```
correct
```
import type { DockviewReadyEvent } from 'dockview-core'
```
Event types are re-exported from dockview-core, not from dockview-vue itself. Use dockview-core for all type imports.
PanelApi
wrong
```
import { PanelApi } from 'dockview-vue'
```
correct
```
import type { PanelApi } from 'dockview-core'
```
PanelApi is a type from dockview-core. For Vue-specific props, use 'dockview-vue' types like 'VuePanelProps'.
useDockview
wrong
```
import { useDockview } from 'dockview-core'
```
correct
```
import { useDockview } from 'dockview-vue'
```
useDockview is a Vue composable provided by dockview-vue for programmatic access inside panels.

Quickstart

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>