DockviewVuwExample.vue

<script lang="ts" setup>
import "dockview-core/dist/styles/dockview.css";
import {IContentRenderer, DockviewGroupPanel, GroupPanelContentPartInitParameters, PanelUpdateEvent, Parameters, DockviewComponent} from "dockview-core"

onMounted(() => {

  const root = document.getElementById("root")!;
const app = document.getElementById("app")!;

const dockviewComponent = new DockviewComponent( {
    parentElement: app,
  components: {

    myCustomPanel: CustomPanel
  }
});



const observer = new ResizeObserver((entires) => {
  const firstEntry = entires[0];
  const { width, height } = firstEntry.contentRect;
  dockviewComponent.layout(width, height);
});

observer.observe(root);

dockviewComponent.addPanel({
  component: "myCustomPanel",
  id: "1",
  title: "Panel 1"
});
dockviewComponent.addPanel({
  component: "myCustomPanel",
  id: "2",
  title: "Panel 2"
});
})

class CustomPanel implements IContentRenderer {
  private readonly _id: string;
  private readonly _component: string;

  element = document.createElement("div");

  get id(): string {
    return this._id;
  }

  get component(): string {
    return this._component;
  }

  constructor(id: string, component: string) {
    this._id = id;
    this._component = component;
  }

  updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void {
    //
  }

  init(parameters: GroupPanelContentPartInitParameters): void {
    //
  }

  layout(width: number, height: number): void {
    //
  }

  update(event: PanelUpdateEvent<Parameters>): void {
    //
  }

  toJSON(): any {
    return {};
  }

  focus(): void {
    //
  }

  dispose(): void {
    //
  }
}


</script>

<template>
  <div id="root">
    <div id="app" class="dockview-theme-dark"></div>
  </div>
</template>