Please see the website: https://dockview.dev

Features

• Serialization / deserialization with full layout management
• Support for split-views, grid-views and 'dockable' views
• Themeable and customizable
• Tab and Group docking / Drag n' Drop
• Popout Windows
• Floating Groups
• Extensive API
• Supports Shadow DOMs
• High test coverage
• Documentation website with live examples
• Transparent builds and Code Analysis
• Security at mind - verified publishing and builds through GitHub Actions

Quick Start

Dockview-vue has a peer dependency on vue >= 3.4.0. Install from npm:

npm install dockview-vue

Import the stylesheet:

@import 'dockview-vue/dist/styles/dockview.css';

Use the component in a Vue SFC:

<template>
    <div class="dockview-theme-dark" style="height: 400px">
        <DockviewVue @ready="onReady">
            <template #myComponent="{ params }">
                <div>Hello World</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: 'panel_1',
        component: 'myComponent',
    });
}
</script>

See the documentation for full examples.

Want to verify our builds? Go here.