diff --git a/package.json b/package.json
index b8c44af7e..17bcfe6d0 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "fs-extra": "^11.2.0",
@@ -71,6 +72,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.1.5",
     "vue": "^3.4.21",
+    "vue-sfc-loader": "^0.1.0",
     "vue-tsc": "^2.0.5"
   },
   "engines": {
diff --git a/packages/dockview-core/src/api/dockviewGroupPanelApi.ts b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts
index c72d990f6..33d97b8a6 100644
--- a/packages/dockview-core/src/api/dockviewGroupPanelApi.ts
+++ b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts
@@ -1,12 +1,17 @@
 import { Position, positionToDirection } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import {
+    DockviewGroupChangeEvent,
+    DockviewGroupLocation,
+} from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
+import { MutableDisposable } from '../lifecycle';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly location: DockviewGroupLocation;
     /**
      * If you require the Window object
@@ -27,6 +32,8 @@ export interface DockviewGroupPanelFloatingChangeEvent {
 const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
 
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+    private readonly _mutableDisposable = new MutableDisposable();
+
     private _group: DockviewGroupPanel | undefined;
 
     readonly _onDidLocationChange =
@@ -34,6 +41,10 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent> =
         this._onDidLocationChange.event;
 
+    private readonly _onDidActivePanelChange =
+        new Emitter<DockviewGroupChangeEvent>();
+    readonly onDidActivePanelChange = this._onDidActivePanelChange.event;
+
     get location(): DockviewGroupLocation {
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
@@ -44,7 +55,11 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     constructor(id: string, private readonly accessor: DockviewComponent) {
         super(id, '__dockviewgroup__');
 
-        this.addDisposables(this._onDidLocationChange);
+        this.addDisposables(
+            this._onDidLocationChange,
+            this._onDidActivePanelChange,
+            this._mutableDisposable
+        );
     }
 
     close(): void {
@@ -116,5 +131,19 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
 
     initialize(group: DockviewGroupPanel): void {
         this._group = group;
+
+        /**
+         * TODO: Annoying initialization order caveat
+         *
+         * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
+         * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
+         * finished ensuring the `model` is defined.
+         */
+        queueMicrotask(() => {
+            this._mutableDisposable.value =
+                this._group!.model.onDidActivePanelChange((event) => {
+                    this._onDidActivePanelChange.fire(event);
+                });
+        });
     }
 }
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 5f6c8e0e5..2fad3a181 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -1039,11 +1039,11 @@ export class DockviewComponent
 
     updateOptions(options: Partial<DockviewComponentOptions>): void {
         const changed_floatingGroupBounds =
-            options.floatingGroupBounds !== undefined &&
+            'floatingGroupBounds' in options &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
 
         const changed_rootOverlayOptions =
-            options.rootOverlayModel !== undefined &&
+            'rootOverlayModel' in options &&
             options.rootOverlayModel !== this.options.rootOverlayModel;
 
         this._options = { ...this.options, ...options };
diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
index e4b97f59f..556e77e59 100644
--- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
+++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -537,6 +537,7 @@ export class DockviewGroupPanelModel
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setRightActionsElement(
                 this._rightHeaderActions.element
@@ -552,6 +553,7 @@ export class DockviewGroupPanelModel
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setLeftActionsElement(
                 this._leftHeaderActions.element
@@ -567,6 +569,7 @@ export class DockviewGroupPanelModel
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setPrefixActionsElement(
                 this._prefixHeaderActions.element
@@ -845,10 +848,8 @@ export class DockviewGroupPanelModel
         this._panels.splice(index, 1);
 
         if (this.mostRecentlyUsed.includes(panel)) {
-            this.mostRecentlyUsed.splice(
-                this.mostRecentlyUsed.indexOf(panel),
-                1
-            );
+            const index = this.mostRecentlyUsed.indexOf(panel);
+            this.mostRecentlyUsed.splice(index, 1);
         }
 
         const disposable = this._panelDisposables.get(panel.id);
diff --git a/packages/dockview-core/src/dockview/framework.ts b/packages/dockview-core/src/dockview/framework.ts
index 0166e477f..bd6ccaff5 100644
--- a/packages/dockview-core/src/dockview/framework.ts
+++ b/packages/dockview-core/src/dockview/framework.ts
@@ -30,6 +30,7 @@ export interface IDockviewHeaderActionsProps {
 export interface IGroupHeaderProps {
     api: DockviewGroupPanelApi;
     containerApi: DockviewApi;
+    group: IDockviewGroupPanel;
 }
 
 export interface IWatermarkPanelProps {
diff --git a/packages/dockview-vue/src/dockview/dockview.vue b/packages/dockview-vue/src/dockview/dockview.vue
index e1fe4c3ff..eb1d2c098 100644
--- a/packages/dockview-vue/src/dockview/dockview.vue
+++ b/packages/dockview-vue/src/dockview/dockview.vue
@@ -21,6 +21,9 @@ import {
     defineEmits,
     watch,
     onBeforeUnmount,
+    markRaw,
+    toRaw,
+    getCurrentInstance,
 } from 'vue';
 import {
     VueContentRenderer,
@@ -75,11 +78,18 @@ function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
 }
 
 const emit = defineEmits<VueEvents>();
+
+
+/**
+ * Anything here that is a Vue.js component should not be reactive
+ * i.e. markRaw(toRaw(...))
+ */
 const props = defineProps<IDockviewVueProps>();
 
 const el = ref<HTMLElement | null>(null);
 const instance = ref<DockviewComponent | null>(null);
 
+
 PROPERTY_KEYS.forEach((coreOptionKey) => {
     watch(
         () => props[coreOptionKey],
@@ -141,6 +151,7 @@ watch(
                     ? (group) => {
                           return new VueHeaderActionsRenderer(
                               newValue as VueComponent,
+                              getCurrentInstance()!,
                               group
                           );
                       }
@@ -159,6 +170,7 @@ watch(
                     ? (group) => {
                           return new VueHeaderActionsRenderer(
                               newValue as VueComponent,
+                              getCurrentInstance()!,
                               group
                           );
                       }
@@ -176,7 +188,7 @@ watch(
                 headerPrefixActionComponent: newValue
                     ? (group) => {
                           return new VueHeaderActionsRenderer(
-                              newValue as VueComponent,
+                              newValue as VueComponent,getCurrentInstance()!,
                               group
                           );
                       }
@@ -206,7 +218,7 @@ onMounted(() => {
                     componentId: string,
                     component: any
                 ): IContentRenderer => {
-                    return new VueContentRenderer(component);
+                    return new VueContentRenderer(component,getCurrentInstance()!);
                 },
             },
             tab: {
@@ -215,7 +227,7 @@ onMounted(() => {
                     componentId: string,
                     component: any
                 ): ITabRenderer => {
-                    return new VueTabRenderer(component);
+                    return new VueTabRenderer(component,getCurrentInstance()!);
                 },
             },
             watermark: {
@@ -224,7 +236,7 @@ onMounted(() => {
                     componentId: string,
                     component: any
                 ): IWatermarkRenderer => {
-                    return new VueWatermarkRenderer(component);
+                    return new VueWatermarkRenderer(component,getCurrentInstance()!);
                 },
             },
             // action: {
@@ -238,7 +250,7 @@ onMounted(() => {
         headerLeftActionComponent: props.leftHeaderActionsComponent
             ? (group) => {
                   return new VueHeaderActionsRenderer(
-                      props.leftHeaderActionsComponent as VueComponent,
+                      props.leftHeaderActionsComponent as VueComponent,getCurrentInstance()!,
                       group
                   );
               }
@@ -246,7 +258,7 @@ onMounted(() => {
         headerPrefixActionComponent: props.prefixHeaderActionsComponent
             ? (group) => {
                   return new VueHeaderActionsRenderer(
-                      props.prefixHeaderActionsComponent as VueComponent,
+                      props.prefixHeaderActionsComponent as VueComponent,getCurrentInstance()!,
                       group
                   );
               }
@@ -254,7 +266,7 @@ onMounted(() => {
         headerRightActionComponent: props.rightHeaderActionsComponent
             ? (group) => {
                   return new VueHeaderActionsRenderer(
-                      props.rightHeaderActionsComponent as VueComponent,
+                      props.rightHeaderActionsComponent as VueComponent,getCurrentInstance()!,
                       group
                   );
               }
@@ -270,7 +282,25 @@ onMounted(() => {
         ...frameworkOptions,
     });
 
-    instance.value = dockview;
+    const { clientWidth, clientHeight } = el.value;
+    dockview.layout(clientWidth, clientHeight);
+
+    /**
+     * !!! THIS IS VERY IMPORTANT
+     *
+     * Since we store a reference to `DockviewComponent` within the Vue.js world Vue.js will 'deeply Proxyify' the object
+     * since this is how Vue.js does its reactivity magic.
+     *
+     * We do not want Vue.js to touch the `DockviewComponent` reference since it does not need to be reactive in accordance
+     * to the Vue.js reactivity model and since `DockviewComponent` is written in plain TypeScript allowing Vue.js
+     * to proxify the reference will cause all kinds of unexpected issues
+     *
+     * @see https://vuejs.org/guide/extras/reactivity-in-depth.html
+     * @see https://vuejs.org/api/reactivity-advanced.html#markraw
+     */
+    instance.value = markRaw(dockview);
+
+
     emit('ready', { api: new DockviewApi(dockview) });
 });
 
diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts
index f3965b634..978370038 100644
--- a/packages/dockview-vue/src/utils.ts
+++ b/packages/dockview-vue/src/utils.ts
@@ -1,9 +1,8 @@
 import type {
-    DockviewApi,
     DockviewGroupPanel,
-    DockviewGroupPanelApi,
     GroupPanelPartInitParameters,
     IContentRenderer,
+    IGroupHeaderProps,
     IHeaderActionsRenderer,
     ITabRenderer,
     IWatermarkRenderer,
@@ -18,6 +17,7 @@ import {
     cloneVNode,
     mergeProps,
     type DefineComponent,
+    type ComponentInternalInstance,
 } from 'vue';
 
 export type ComponentInterface = ComponentOptionsBase<
@@ -45,16 +45,22 @@ export type VueComponent<T = any> = DefineComponent<T>;
  */
 export function mountVueComponent<T extends Record<string, any>>(
     component: VueComponent<T>,
+    parent: ComponentInternalInstance,
     props: T,
     element: HTMLElement
 ) {
-    let vNode = createVNode(component, props);
+    let vNode = createVNode(component, Object.freeze(props));
+
+    vNode.appContext = parent.appContext;
 
     render(vNode, element);
 
+    let runningProps = props;
+
     return {
         update: (newProps: any) => {
-            vNode = cloneVNode(vNode, mergeProps(props, newProps));
+            runningProps = { ...props, newProps };
+            vNode = cloneVNode(vNode, Object.freeze(runningProps));
             render(vNode, element);
         },
         dispose: () => {
@@ -73,7 +79,10 @@ export class VueContentRenderer implements IContentRenderer {
         return this._element;
     }
 
-    constructor(private readonly component: VueComponent) {
+    constructor(
+        private readonly component: VueComponent,
+        private readonly parent: ComponentInternalInstance
+    ) {
         this._element = document.createElement('div');
         this.element.className = 'dv-vue-part';
         this.element.style.height = '100%';
@@ -90,6 +99,7 @@ export class VueContentRenderer implements IContentRenderer {
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
+            this.parent,
             props,
             this.element
         );
@@ -120,7 +130,10 @@ export class VueTabRenderer implements ITabRenderer {
         return this._element;
     }
 
-    constructor(private readonly component: VueComponent) {
+    constructor(
+        private readonly component: VueComponent,
+        private readonly parent: ComponentInternalInstance
+    ) {
         this._element = document.createElement('div');
         this.element.className = 'dv-vue-part';
         this.element.style.height = '100%';
@@ -137,6 +150,7 @@ export class VueTabRenderer implements ITabRenderer {
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
+            this.parent,
             props,
             this.element
         );
@@ -163,7 +177,10 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
         return this._element;
     }
 
-    constructor(private readonly component: VueComponent) {
+    constructor(
+        private readonly component: VueComponent,
+        private readonly parent: ComponentInternalInstance
+    ) {
         this._element = document.createElement('div');
         this.element.className = 'dv-vue-part';
         this.element.style.height = '100%';
@@ -179,6 +196,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
+            this.parent,
             props,
             this.element
         );
@@ -211,32 +229,27 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
 
     constructor(
         private readonly component: VueComponent,
+        private readonly parent: ComponentInternalInstance,
         group: DockviewGroupPanel
     ) {
         this._element = document.createElement('div');
         this.element.className = 'dv-vue-header-action-part';
+        this._element.style.width = '100%';
+        this._element.style.height = '100%';
     }
 
-    init(params: {
-        containerApi: DockviewApi;
-        api: DockviewGroupPanelApi;
-    }): void {
-        console.log('meeee', this.component);
-        const props = {
-            api: params.api,
-            containerApi: params.containerApi,
-        };
-
+    init(params: IGroupHeaderProps): void {
+        console.log(params);
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
-            props,
+            this.parent,
+            { ...params },
             this.element
         );
     }
 
     dispose(): void {
-        console.log('dispose');
         this._renderDisposable?.dispose();
     }
 }
diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx
index a4a13c176..039fe610a 100644
--- a/packages/dockview/src/dockview/dockview.tsx
+++ b/packages/dockview/src/dockview/dockview.tsx
@@ -129,24 +129,29 @@ export const DockviewReact = React.forwardRef(
 
         const prevProps = React.useRef<Partial<IDockviewReactProps>>({});
 
-        React.useEffect(() => {
-            const changes: Partial<DockviewOptions> = {};
+        React.useEffect(
+            () => {
+                const changes: Partial<DockviewOptions> = {};
 
-            Object.keys(PROPERTY_KEYS).forEach((propKey) => {
-                const key = propKey as keyof DockviewOptions;
-                const propValue = props[key];
+                PROPERTY_KEYS.forEach((propKey) => {
+                    const key = propKey as keyof DockviewOptions;
+                    const propValue = props[key];
 
-                if (propValue !== prevProps.current[key]) {
-                    changes[key] = propValue as any;
+                    if (propValue !== prevProps.current[key]) {
+                        changes[key] = propValue as any;
+                    }
+                });
+
+                if (dockviewRef.current) {
+                    dockviewRef.current.updateOptions(changes);
+                } else {
+                    // not yet fully initialized
                 }
-            });
 
-            if (dockviewRef.current) {
-                dockviewRef.current.updateOptions(changes);
-            } else {
-                // not yet fully initialized
-            }
-        }, PROPERTY_KEYS.map((key) => props[key]).filter(Boolean));
+                prevProps.current = props;
+            },
+            PROPERTY_KEYS.map((key) => props[key])
+        );
 
         React.useEffect(() => {
             if (!domRef.current) {
diff --git a/packages/docs/blog/2024-04-05-dockview-1.12.0.md b/packages/docs/blog/2024-04-05-dockview-1.12.0.md
deleted file mode 100644
index 91a8186b4..000000000
--- a/packages/docs/blog/2024-04-05-dockview-1.12.0.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-slug: dockview-1.12.0-release
-title: Dockview 1.12.0
-tags: [release]
----
-
-# Release Notes
-
-Please reference docs @ [dockview.dev](https://dockview.dev).
-
-## 🛠 Miscs
-
--   Create framework packages in preperation for multiple framework support
-    These are still in active development and will be offical support soon.
-
-    -   Create `dockview-react` package
-    -   Create `dockview-angular` package
-    -   Create `dockview-vue` package
-
--   Move various type definitions from `dockview` to `dockview-core` in preperation for multiple framework support
-
-    -   Move `IGroupPanelBaseProps` from `dockview` to `dockview-core`
-    -   Move `IDockviewPanelHeaderProps` from `dockview` to `dockview-core`
-    -   Move `IDockviewPanelProps` from `dockview` to `dockview-core`
-    -   Move `IDockviewHeaderActionsProps ` from `dockview` to `dockview-core`
-    -   Move `IGroupHeaderProps` from `dockview` to `dockview-core`
-    -   Move `IWatermarkPanelProps` from `dockview` to `dockview-core`
-    -   Move `DockviewReadyEvent` from `dockview` to `dockview-core`
-
--   Depreciate `dockview` (React) `canDisplayOverlay` in favour of the `onUnhandledDragOverEvent` api event
-
-## 🔥 Breaking changes
-
--   Replace `dockview-core` DockviewComponent `canDisplayOverlay` option with `onUnhandledDragOverEvent` event
--   Rename `createRightHeaderActionsElement` to `headerRightActionComponent`
--   Rename `createLeftHeaderActionsElement` to `headerLeftActionComponent`
--   Rename `createPrefixHeaderActionsElement` to `headerPrefixActionComponent`
diff --git a/packages/docs/blog/2024-04-19-dockview-1.13.0.md b/packages/docs/blog/2024-04-19-dockview-1.13.0.md
new file mode 100644
index 000000000..ebb51619e
--- /dev/null
+++ b/packages/docs/blog/2024-04-19-dockview-1.13.0.md
@@ -0,0 +1,41 @@
+---
+slug: dockview-1.13.0-release
+title: Dockview 1.13.0
+tags: [release]
+---
+
+# Release Notes
+
+Please reference docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+
+-   Add `onDidActivePanelChange` event to group api [#541](https://github.com/mathuo/dockview/pull/541)
+
+## 🛠 Miscs
+
+-   Create framework packages in preperation for multiple framework support [#541](https://github.com/mathuo/dockview/pull/541)
+    These are still in active development and will be offically support soon.
+
+    -   Create `dockview-react` package
+    -   Create `dockview-angular` package
+    -   Create `dockview-vue` package
+
+-   Move various type definitions from `dockview` to `dockview-core` in preperation for multiple framework support [#541](https://github.com/mathuo/dockview/pull/541)
+
+    -   Move `IGroupPanelBaseProps` from `dockview` to `dockview-core`
+    -   Move `IDockviewPanelHeaderProps` from `dockview` to `dockview-core`
+    -   Move `IDockviewPanelProps` from `dockview` to `dockview-core`
+    -   Move `IDockviewHeaderActionsProps ` from `dockview` to `dockview-core`
+    -   Move `IGroupHeaderProps` from `dockview` to `dockview-core`
+    -   Move `IWatermarkPanelProps` from `dockview` to `dockview-core`
+    -   Move `DockviewReadyEvent` from `dockview` to `dockview-core`
+
+-   [dockview] Depreciate `canDisplayOverlay` in favour of the `onUnhandledDragOverEvent` api event [#541](https://github.com/mathuo/dockview/pull/541)
+
+## 🔥 Breaking changes
+
+-   [dockview-core] Replace DockviewComponent `canDisplayOverlay` option with `onUnhandledDragOverEvent` event [#541](https://github.com/mathuo/dockview/pull/541)
+-   [dockview-core] Rename `createRightHeaderActionsElement` to `headerRightActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
+-   [dockview-core] Rename `createLeftHeaderActionsElement` to `headerLeftActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
+-   [dockview-core] Rename `createPrefixHeaderActionsElement` to `headerPrefixActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
diff --git a/packages/docs/docs/advanced/nested.mdx b/packages/docs/docs/advanced/nested.mdx
index 996a0e37e..49161a44a 100644
--- a/packages/docs/docs/advanced/nested.mdx
+++ b/packages/docs/docs/advanced/nested.mdx
@@ -3,12 +3,11 @@ title: Nested Instances
 ---
 
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import NestedDockview from '@site/sandboxes/nested-dockview/src/app';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 
 # Nested Dockviews
 
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
 If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
 
-<MultiFrameworkContainer sandboxId="nested-dockview" react={NestedDockview} />
+<CodeRunner id="dockview/nested" />
diff --git a/packages/docs/docs/core/groups/constraints.mdx b/packages/docs/docs/core/groups/constraints.mdx
index 583a89a7f..db8e2de2a 100644
--- a/packages/docs/docs/core/groups/constraints.mdx
+++ b/packages/docs/docs/core/groups/constraints.mdx
@@ -2,7 +2,6 @@
 title: Constraints
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef'
 
 :::warning
@@ -13,5 +12,5 @@ Constraints come with several caveats. They are not serialized with layouts and
 
 ## Live Example
 
-<LiveExample framework="react" id="dockview/constraints"/>
+<CodeRunner id="dockview/constraints"/>
 
diff --git a/packages/docs/docs/core/groups/controls.mdx b/packages/docs/docs/core/groups/controls.mdx
index fa6fd2719..d2ff406f4 100644
--- a/packages/docs/docs/core/groups/controls.mdx
+++ b/packages/docs/docs/core/groups/controls.mdx
@@ -2,7 +2,6 @@
 title: Group Controls
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes how you can customize the header component of each group.
@@ -39,5 +38,5 @@ return <DockviewReact
 
 ## Live Example
 
-<LiveExample framework="react" id="dockview/group-actions"/>
+<CodeRunner id="dockview/group-actions"/>
 
diff --git a/packages/docs/docs/core/groups/floatingGroups.mdx b/packages/docs/docs/core/groups/floatingGroups.mdx
index c2a8d338b..991ebd137 100644
--- a/packages/docs/docs/core/groups/floatingGroups.mdx
+++ b/packages/docs/docs/core/groups/floatingGroups.mdx
@@ -3,7 +3,6 @@ title: Floating Groups
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes floating groups.
@@ -76,4 +75,4 @@ You can check whether a group is floating via the `group.api.location` property.
 
 ## Live Example
 
-<LiveExample framework="react" id="dockview/floating-groups"/>
+<CodeRunner id="dockview/floating-groups"/>
diff --git a/packages/docs/docs/core/groups/hiddenHeader.mdx b/packages/docs/docs/core/groups/hiddenHeader.mdx
index 0d95cd496..1e65109ff 100644
--- a/packages/docs/docs/core/groups/hiddenHeader.mdx
+++ b/packages/docs/docs/core/groups/hiddenHeader.mdx
@@ -3,7 +3,6 @@ title: Hidden Header
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 You may wish to hide the header section of a group. This can achieved through the `hidden` variable on `panel.group.header`.
diff --git a/packages/docs/docs/core/groups/locked.mdx b/packages/docs/docs/core/groups/locked.mdx
index e2a9ee92e..5b74ad8b5 100644
--- a/packages/docs/docs/core/groups/locked.mdx
+++ b/packages/docs/docs/core/groups/locked.mdx
@@ -2,8 +2,7 @@
 title: Locked Groups
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 
 ## Locked group
 
@@ -21,7 +20,4 @@ panel.group.locked = 'no-drop-target';
 Use `true` to keep drop zones top, right, bottom, left for the group. Use `no-drop-target` to disable all drop zones. For you to get a
 better understanding of what this means, try and drag the panels in the example below to the locked groups.
 
-<MultiFrameworkContainer
-    sandboxId="lockedgroup-dockview"
-    react={DockviewLockedGroup}
-/>
+<CodeRunner id="dockview/locked"/>
diff --git a/packages/docs/docs/core/groups/maxmizedGroups.mdx b/packages/docs/docs/core/groups/maxmizedGroups.mdx
index 109383306..bdefa8519 100644
--- a/packages/docs/docs/core/groups/maxmizedGroups.mdx
+++ b/packages/docs/docs/core/groups/maxmizedGroups.mdx
@@ -3,7 +3,6 @@ title: Maximized Groups
 ---
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
-import LiveExample from '@site/src/components/ui/exampleFrame';
 
 This section described how to maxmimize groups.
 
@@ -51,7 +50,7 @@ The methods exist on the panel `api` object for convenience.
 
 ## Live Examples
 
-<LiveExample framework="react" id="dockview/maximize-group"/>
+<CodeRunner id="dockview/maximize-group"/>
 
 
 
diff --git a/packages/docs/docs/core/groups/popoutGroups.mdx b/packages/docs/docs/core/groups/popoutGroups.mdx
index 6cb5ffdb9..7472a4d05 100644
--- a/packages/docs/docs/core/groups/popoutGroups.mdx
+++ b/packages/docs/docs/core/groups/popoutGroups.mdx
@@ -2,7 +2,6 @@
 title: Popout Windows
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes have to create popout windows.
@@ -57,4 +56,4 @@ in it's original location within the grid. If the dock cannot determine the orig
 choose a new location.
 
 
-<LiveExample framework="react" id="dockview/popout-group"/>
+<CodeRunner id="dockview/popout-group"/>
diff --git a/packages/docs/docs/core/groups/resizing.mdx b/packages/docs/docs/core/groups/resizing.mdx
index 2b0cb4b42..1e527cc1d 100644
--- a/packages/docs/docs/core/groups/resizing.mdx
+++ b/packages/docs/docs/core/groups/resizing.mdx
@@ -2,7 +2,6 @@
 title: Resizing
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 <DocRef declaration="DockviewGroupPanelApi" methods={['height', 'width', 'setSize', 'onDidDimensionsChange']} />
@@ -34,4 +33,4 @@ props.api.group.api.setSize({
 You can see an example invoking both approaches below.
 
 
-<LiveExample framework="react" id="dockview/resize"/>
+<CodeRunner framework="react" id="dockview/resize"/>
diff --git a/packages/docs/docs/core/locked.mdx b/packages/docs/docs/core/locked.mdx
index 82a65a515..65d170d64 100644
--- a/packages/docs/docs/core/locked.mdx
+++ b/packages/docs/docs/core/locked.mdx
@@ -5,7 +5,6 @@ title: Locked
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
-import LiveExample from '@site/src/components/ui/exampleFrame';
 
 This section describes how to lock the dock to prevent movement.
 
@@ -13,4 +12,4 @@ This section describes how to lock the dock to prevent movement.
 You may want to combine this with `disableDnd={true}` to provide a locked grid with no dnd funtionality. See [Disable Dnd](/docs/core/dnd/disable) for more.
 :::
 
-<LiveExample framework='react' id='dockview/locked'/>
+<CodeRunner id='dockview/locked'/>
diff --git a/packages/docs/docs/core/overview.mdx b/packages/docs/docs/core/overview.mdx
index e63b7cda4..c0f2e0dfa 100644
--- a/packages/docs/docs/core/overview.mdx
+++ b/packages/docs/docs/core/overview.mdx
@@ -3,8 +3,6 @@ title: Overview
 sidebar_position: 0
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
-
 This section provided a core overview.
 
 The component takes a collection of [Options](/docs/api/dockview/options) as inputs and
@@ -33,10 +31,3 @@ const component = new DockviewComponent({
 ```
 </FrameworkSpecific>
 
-## Container Resizing
-
-The component will automatically resize to it's container.
-
-<LiveExample framework="react" id="dockview/resize-container"/>
-
-# Disposal Pattern
diff --git a/packages/docs/docs/core/panels/add.mdx b/packages/docs/docs/core/panels/add.mdx
index 70685a319..ab1142b47 100644
--- a/packages/docs/docs/core/panels/add.mdx
+++ b/packages/docs/docs/core/panels/add.mdx
@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
-import LiveExample from '@site/src/components/ui/exampleFrame';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 
 This section describes how to add a new panel and the options you can provide.
 
@@ -48,7 +48,7 @@ api.addPanel({
 api.setTitle('my_new_custom_title');
 ```
 
-<LiveExample framework="react" id="dockview/update-title" height={250}/>
+<CodeRunner  id="dockview/update-title" height={250}/>
 
 ## Provide a custom Tab renderer
 
diff --git a/packages/docs/docs/core/panels/rendering.mdx b/packages/docs/docs/core/panels/rendering.mdx
index ca412e95f..0b4d50ac1 100644
--- a/packages/docs/docs/core/panels/rendering.mdx
+++ b/packages/docs/docs/core/panels/rendering.mdx
@@ -4,11 +4,9 @@ sidebar_postiion: 5
 ---
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
-
-
 Rendering type is an important consideration when creating your application and whether your panels should be destroyed when hidden.
 
 :::info
@@ -70,7 +68,7 @@ api.addPanel({
 
 ## Live Example
 
-<LiveExample framework="react" id="dockview/render-mode"/>
+<CodeRunner id="dockview/render-mode"/>
 
 
 By default `DockviewReact` only adds to the DOM those panels that are visible,
@@ -130,3 +128,4 @@ Toggling the checkbox you can see that when you only render those panels which a
     sandboxId="rendering-dockview"
     react={RenderingDockview}
 />
+
diff --git a/packages/docs/docs/core/panels/resizing.mdx b/packages/docs/docs/core/panels/resizing.mdx
index 0c0fd720d..99b163256 100644
--- a/packages/docs/docs/core/panels/resizing.mdx
+++ b/packages/docs/docs/core/panels/resizing.mdx
@@ -4,7 +4,7 @@ title: Resizing
 
 This section describes how to programatically resize a panel.
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 <DocRef declaration="DockviewPanelApi" methods={['height', 'width', 'setSize', 'onDidDimensionsChange']} />
@@ -37,4 +37,4 @@ props.api.group.api.setSize({
 
 You can see an example invoking both approaches below.
 
-<LiveExample framework="react" id="dockview/resize"/>
+<CodeRunner id="dockview/resize"/>
diff --git a/packages/docs/docs/core/panels/tabs.mdx b/packages/docs/docs/core/panels/tabs.mdx
index b6ba80a7b..224052fc7 100644
--- a/packages/docs/docs/core/panels/tabs.mdx
+++ b/packages/docs/docs/core/panels/tabs.mdx
@@ -4,7 +4,7 @@ sidebar_position: 2
 ---
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import CustomHeadersDockview from '@site/sandboxes/customheader-dockview/src/app';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 import DockviewNative from '@site/sandboxes/fullwidthtab-dockview/src/app';
 import { attach as attachNativeDockview } from '@site/sandboxes/javascript/fullwidthtab-dockview/src/app';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
@@ -99,10 +99,7 @@ As a simple example the below attaches a custom event handler for the context me
 The below example uses a custom tab renderer to reigster a popover when the user right clicked on a tab.
 This still makes use of the `DockviewDefaultTab` since it's only a minor change.
 
-<MultiFrameworkContainer
-    sandboxId="customheader-dockview"
-    react={CustomHeadersDockview}
-/>
+<CodeRunner id="dockview/custom-header"/>
 
 ## Full Width Tab
 
@@ -126,15 +123,7 @@ return <DockviewReactComponent singleTabMode="fullwidth" />
     typescript={attachNativeDockview}
 />
 
-import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
-import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app';
-
 ## Tab Height
 
 Tab height can be controlled through CSS.
 
-<MultiFrameworkContainer
-    sandboxId="tabheight-dockview"
-    react={DockviewTabheight}
-    typescript={attachTabHeightDockview}
-/>
diff --git a/packages/docs/docs/core/panels/update.mdx b/packages/docs/docs/core/panels/update.mdx
index f12889027..ff07c7ebf 100644
--- a/packages/docs/docs/core/panels/update.mdx
+++ b/packages/docs/docs/core/panels/update.mdx
@@ -43,4 +43,4 @@ panel.api.updateParameters({
 
 ## Live Example
 
-<LiveExample framework="react" id="dockview/update-parameters"/>
+<CodeRunner id="dockview/update-parameters"/>
diff --git a/packages/docs/docs/core/scrollbars.mdx b/packages/docs/docs/core/scrollbars.mdx
index a46c5f7cd..b8e23d72c 100644
--- a/packages/docs/docs/core/scrollbars.mdx
+++ b/packages/docs/docs/core/scrollbars.mdx
@@ -2,8 +2,6 @@
 title: Scrolling
 ---
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
-
 It's important to understand how to configure the scrollbar within a panel.
 
 A panel will appear with a scrollbar if the the contents of your view has a fixed height.
@@ -17,4 +15,4 @@ The following example contains three views:
 - **Panel 2** (`height: 2000px`): A scrollbar does appear since a fixed height has been used.
 - **Panel 3**: `height: 100%` and a child component with `overflow: auto` which will enable scrollbars.
 
-<LiveExample framework="react" id="dockview/scrollbars"/>
+<CodeRunner id="dockview/scrollbars"/>
diff --git a/packages/docs/docs/core/state/load.mdx b/packages/docs/docs/core/state/load.mdx
index 483f1cf6c..abb23e868 100644
--- a/packages/docs/docs/core/state/load.mdx
+++ b/packages/docs/docs/core/state/load.mdx
@@ -2,8 +2,7 @@
 title: Loading State
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import LiveExample from '@site/src/components/ui/exampleFrame';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section described loading a dock layout.
@@ -43,5 +42,6 @@ return <DockviewComponent onReady={onReady}/>;
 
 # Live Example
 
-<LiveExample framework="react" id="dockview/layout"/>
+<CodeRunner id="dockview/layout"/>
+
 
diff --git a/packages/docs/docs/core/state/save.mdx b/packages/docs/docs/core/state/save.mdx
index 008480a31..6e40268fe 100644
--- a/packages/docs/docs/core/state/save.mdx
+++ b/packages/docs/docs/core/state/save.mdx
@@ -2,9 +2,7 @@
 title: Saving State
 ---
 
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-import LiveExample from '@site/src/components/ui/exampleFrame';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
 This section describes how to serialize a dockview instance.
@@ -39,5 +37,4 @@ return <DockviewComponent onReady={onReady}/>
 
 # Live Example
 
-<LiveExample framework="react" id="dockview/layout"/>
-
+<CodeRunner id="dockview/layout"/>
diff --git a/packages/docs/docs/core/watermark.mdx b/packages/docs/docs/core/watermark.mdx
index 091ab7aba..7efa35359 100644
--- a/packages/docs/docs/core/watermark.mdx
+++ b/packages/docs/docs/core/watermark.mdx
@@ -5,7 +5,6 @@ title: Watermark
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import { DocRef } from '@site/src/components/ui/reference/docRef';
-import LiveExample from '@site/src/components/ui/exampleFrame';
 
 When there is nothing else to display.
 
@@ -28,4 +27,4 @@ The following properties can be set to configure the behaviours of floating grou
 
 ## Live Examples
 
-<LiveExample framework="react" id="dockview/watermark"/>
+<CodeRunner id="dockview/watermark"/>
diff --git a/packages/docs/docs/other/tabview.mdx b/packages/docs/docs/other/tabview.mdx
index 2505ede8e..51a44ce0f 100644
--- a/packages/docs/docs/other/tabview.mdx
+++ b/packages/docs/docs/other/tabview.mdx
@@ -5,6 +5,4 @@ sidebar_position: 3
 
 A *tabview* can be created using a dock and preventing some default behaviours.
 
-import LiveExample from '@site/src/components/ui/exampleFrame';
-
-<LiveExample framework='react' id='dockview/tabview' />
+<CodeRunner id='dockview/tabview' />
diff --git a/packages/docs/docs/overview/getStarted/installation.mdx b/packages/docs/docs/overview/getStarted/installation.mdx
index 4fc04b1ac..bd410fc0b 100644
--- a/packages/docs/docs/overview/getStarted/installation.mdx
+++ b/packages/docs/docs/overview/getStarted/installation.mdx
@@ -7,7 +7,7 @@ sidebar_position: 0
 Learn how to install Dockview for a selection of frameworks.
 
 <FrameworkSpecific framework='JavaScript'>
-Firstly, install the `dockvire-core` library:
+Firstly, install the `dockview-core` library:
 
 ```sh
 npm install dockview-core
@@ -22,8 +22,3 @@ npm install dockview
 ```
 </FrameworkSpecific>
 
-import { IsolatedCodeExample } from '@site/src/components/ui/isolatedCodeExample';
-
-<IsolatedCodeExample id="dockview/basic" framework='react'/>
-
-<IsolatedCodeExample id="dockview/basic" framework='vue'/>
diff --git a/packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx b/packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
index 5d61ed21a..d80e97740 100644
--- a/packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
+++ b/packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx
@@ -5,9 +5,7 @@ description: Gridview Documentation
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
 import SimpleGridview from '@site/sandboxes/simple-gridview/src/app';
 import EditorGridview from '@site/sandboxes/editor-gridview/src/app';
-// import SimpleGridview from '@site/sandboxes/simple-gridview/src/app';
 import { EventsGridview } from '@site/src/components/gridview/events';
-// import IDEExample from '@site/sandboxes/ide-example/src/app';
 import Link from '@docusaurus/Link';
 import { DocRef } from '@site/src/components/ui/reference/docRef';
 
diff --git a/packages/docs/old_docs_DELETE_SOON/components/intro.mdx b/packages/docs/old_docs_DELETE_SOON/components/intro.mdx
index d54f2e272..e725de003 100644
--- a/packages/docs/old_docs_DELETE_SOON/components/intro.mdx
+++ b/packages/docs/old_docs_DELETE_SOON/components/intro.mdx
@@ -4,10 +4,9 @@ sidebar_position: 0
 ---
 
 import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+import { CodeRunner } from '@site/src/components/ui/codeRunner';
 
-import SimpleDockview from '@site/sandboxes/simple-dockview/src/app';
 import DockviewExampleApp from '@site/sandboxes/example-app-dockview/src/app';
-import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app';
 
 
 <MultiFrameworkContainer
@@ -20,11 +19,7 @@ import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simpl
 
 Dockview is an abstraction built on top of [Gridviews](./gridview) where each view is a container of many tabbed panels.
 
-<MultiFrameworkContainer
-    sandboxId="simple-dockview"
-    react={SimpleDockview}
-    typescript={attachSimpleDockview}
-/>
+<CodeRunner id="dockview/basic"/>
 
 <br />
 
@@ -60,19 +55,3 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
     return <div>{`My first panel has the title: ${props.params.title}`}</div>;
 };
 ```
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/docs/old_docs_DELETE_SOON/index.mdx b/packages/docs/old_docs_DELETE_SOON/index.mdx
index f16129c6f..aa113ad9c 100644
--- a/packages/docs/old_docs_DELETE_SOON/index.mdx
+++ b/packages/docs/old_docs_DELETE_SOON/index.mdx
@@ -4,12 +4,9 @@ description: A zero dependency layout manager supporting ReactJS and Vanilla Typ
 title: Introduction
 ---
 
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-
 import { SimpleSplitview } from '@site/src/components/simpleSplitview';
 import { SimpleGridview } from '@site/src/components/simpleGridview';
 import { SimplePaneview } from '@site/src/components/simplePaneview';
-// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
 import Link from '@docusaurus/Link';
 
 **dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
@@ -35,11 +32,6 @@ There are 4 components you may want to use:
     <h2>Dockview</h2>
 </Link>
 
-{/* <MultiFrameworkContainer
-  height={500}
-  sandboxId="demo-dockview"
-  react={DockviewDemo}
-/> */}
 
 <Link to="./components/splitview">
     <h2>Splitview</h2>
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 97a495a8c..305149b07 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -5,11 +5,13 @@
   "scripts": {
     "build": "npm run create-templates && docusaurus build",
     "clear": "docusaurus clear",
-    "start": "docusaurus start",
+    "start": "concurrently \"docusaurus start\" \"npm run start-esm-server\"",
+    "start-esm-server": "node web-server/index.mjs",
     "swizzle": "docusaurus swizzle @docusaurus/theme-classic",
     "docs:version": "docusaurus docs:version",
     "typecheck": "tsc",
-    "create-templates": "node scripts/buildTemplates.mjs"
+    "create-templates": "node scripts/buildTemplates.mjs",
+    "create-templates:local": "node scripts/buildTemplates.mjs --local"
   },
   "browserslist": {
     "production": [
diff --git a/packages/docs/scripts/buildTemplates.mjs b/packages/docs/scripts/buildTemplates.mjs
index ff02fad89..2cda726fb 100644
--- a/packages/docs/scripts/buildTemplates.mjs
+++ b/packages/docs/scripts/buildTemplates.mjs
@@ -1,5 +1,6 @@
 import fs from 'fs-extra';
 import * as path from 'path';
+import { argv } from 'process';
 
 import { fileURLToPath } from 'url';
 
@@ -8,7 +9,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const REACT_VERSION = '18.2.0';
 const VUE_VERSION = '3.4.21';
 const DOCKVIEW_VERSION = '1.11.0';
-const USE_LOCAL_CDN = true;
+const USE_LOCAL_CDN = argv.slice(2).includes('--local');
 
 const local = 'http://localhost:1111';
 
@@ -35,7 +36,7 @@ const DOCKVIEW_CDN = {
             'dockview-vue': `${local}/dockview-vue/dist/dockview-vue.es.js`,
         },
     },
-    js: {
+    typescript: {
         remote: {
             'dockview-core': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/dist/dockview-core.esm.js`,
             'dockview-core/': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/`,
@@ -57,8 +58,9 @@ const IMPORTS_PATHS = {
     vue: {
         vue: `https://cdn.jsdelivr.net/npm/vue@${VUE_VERSION}/dist/vue.esm-browser.js`,
         '@vue/reactivity': `https://esm.sh/@vue/reactivity@${VUE_VERSION}`,
+        'vue-sfc-loader': `https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.9.5/dist/vue3-sfc-loader.js`,
     },
-    js: {},
+    typescript: {},
     angular: {},
 };
 
@@ -82,7 +84,7 @@ const input_dir = path.join(__dirname, '../templates');
 const output = path.join(__dirname, '../static/templates');
 
 const COMPONENTS = ['dockview'];
-const FRAMEWORKS = ['react', 'vue'];
+const FRAMEWORKS = ['react', 'vue', 'typescript'];
 
 const list = [];
 
diff --git a/packages/docs/src/components/HomepageFeatures/introduction.tsx b/packages/docs/src/components/HomepageFeatures/introduction.tsx
index b73baa448..a9068e808 100644
--- a/packages/docs/src/components/HomepageFeatures/introduction.tsx
+++ b/packages/docs/src/components/HomepageFeatures/introduction.tsx
@@ -3,7 +3,6 @@ import HomepageFeatures from '.';
 import { BrowserHeader } from '../ui/browserHeader';
 import { MultiFrameworkContainer } from '../ui/container';
 import * as React from 'react';
-// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
 import DockviewDemo2 from '@site/sandboxes/dockview-app/src/app';
 
 export const Introduction = () => {
@@ -25,11 +24,6 @@ export const Introduction = () => {
             </div>
             <div style={{ padding: '20px' }}>
                 <BrowserHeader />
-                {/* <MultiFrameworkContainer
-                    height={750}
-                    sandboxId="demo-dockview"
-                    react={DockviewDemo}
-                /> */}
             </div>
             <div style={{ padding: '20px' }}>
                 <BrowserHeader />
diff --git a/packages/docs/src/components/frameworkSpecific.tsx b/packages/docs/src/components/frameworkSpecific.tsx
index da6690e26..cd4cc3d2b 100644
--- a/packages/docs/src/components/frameworkSpecific.tsx
+++ b/packages/docs/src/components/frameworkSpecific.tsx
@@ -11,7 +11,7 @@ const frameworks = [
 
 const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
 
-function useActiveFramework(): [string, (value: string) => void] {
+export function useActiveFramework(): [string, (value: string) => void] {
     const [value, setValue] = React.useState<string>(
         localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
     );
diff --git a/packages/docs/src/components/ui/codeRunner.tsx b/packages/docs/src/components/ui/codeRunner.tsx
new file mode 100644
index 000000000..8b930b2cc
--- /dev/null
+++ b/packages/docs/src/components/ui/codeRunner.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useActiveFramework } from '../frameworkSpecific';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+const BASE_SANDBOX_URL =
+    'https://codesandbox.io/s/github/mathuo/dockview/tree/master/packages/docs';
+
+export const _CodeRunner = (props: {
+    id: string;
+    framework: string;
+    height: number;
+}) => {
+    useActiveFramework();
+
+    const sandboxUrl = `${BASE_SANDBOX_URL}/templates/${props.id}/${props.framework}`;
+    const path = `/templates/${props.id}/${props.framework}/index.html`;
+    return (
+        <div>
+            <iframe
+                src={path}
+                style={{ width: '100%', height: `${props.height ?? 300}px` }}
+            />
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <CodeSandbox url={sandboxUrl} />
+            </div>
+        </div>
+    );
+};
+
+export const CodeRunner = (props: { id: string; height: number }) => {
+    const [framework] = useActiveFramework();
+
+    return (
+        <BrowserOnly>
+            {() => (
+                <_CodeRunner {...props} framework={framework.toLowerCase()} />
+            )}
+        </BrowserOnly>
+    );
+};
+
+const CodeSandbox = (props: { url: string }) => {
+    return (
+        <span
+            className="codesandbox-button"
+            style={{ display: 'flex', alignItems: 'center' }}
+        >
+            <span className="codesandbox-button-pretext">{`Open in `}</span>
+            <a
+                href={props.url}
+                target={'_blank'}
+                rel="noopener"
+                className="codesandbox-button-content"
+            >
+                <span
+                    style={{
+                        fontWeight: 'bold',
+                        paddingRight: '4px',
+                    }}
+                >
+                    CodeSandbox
+                </span>
+            </a>
+        </span>
+    );
+};
diff --git a/packages/docs/src/components/ui/isolatedCodeExample.tsx b/packages/docs/src/components/ui/isolatedCodeExample.tsx
deleted file mode 100644
index 5706f1d5f..000000000
--- a/packages/docs/src/components/ui/isolatedCodeExample.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export const IsolatedCodeExample = (props: {
-    id: string;
-    framework: string;
-    height: number;
-}) => {
-    const path = `/templates/${props.id}/${props.framework}/index.html`;
-    return (
-        <iframe
-            src={path}
-            style={{ width: '100%', height: `${props.height ?? 300}px` }}
-        />
-        
-    );
-};
diff --git a/packages/docs/src/theme/MDXComponents.js b/packages/docs/src/theme/MDXComponents.js
index 84f83e5f9..d3c474c5b 100644
--- a/packages/docs/src/theme/MDXComponents.js
+++ b/packages/docs/src/theme/MDXComponents.js
@@ -2,6 +2,7 @@ import React from 'react';
 // Import the original mapper
 import MDXComponents from '@theme-original/MDXComponents';
 import { FrameworkSpecific } from '@site/src/components/frameworkSpecific';
+import { CodeRunner } from '../components/ui/codeRunner';
 
 export default {
     // Re-use the default mapping
@@ -9,4 +10,5 @@ export default {
     // Map the "<Highlight>" tag to our Highlight component
     // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
     FrameworkSpecific,
+    CodeRunner,
 };
diff --git a/packages/docs/templates/dockview/basic/typescript/src/index.ts b/packages/docs/templates/dockview/basic/typescript/src/index.ts
new file mode 100644
index 000000000..fdd92a2bc
--- /dev/null
+++ b/packages/docs/templates/dockview/basic/typescript/src/index.ts
@@ -0,0 +1,47 @@
+import 'dockview-core/dist/styles/dockview.css';
+import {
+    DockviewApi,
+    DockviewComponent,
+    GroupPanelPartInitParameters,
+    IContentRenderer,
+} from 'dockview-core';
+
+class Panel implements IContentRenderer {
+    private readonly _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+
+        this._element.style.color = 'white';
+    }
+
+    init(parameters: GroupPanelPartInitParameters): void {
+        this._element.textContent = 'Hello World';
+    }
+}
+
+document.getElementById('app').className = 'dockview-theme-abyss';
+
+const dockview = new DockviewComponent({
+    parentElement: document.getElementById('app'),
+    components: { default: Panel },
+});
+
+const api = new DockviewApi(dockview);
+
+api.addPanel({
+    id: 'panel_1',
+    component: 'default',
+    title: 'Panel 1',
+});
+
+api.addPanel({
+    id: 'panel_2',
+    component: 'default',
+    position: { referencePanel: 'panel_1', direction: 'right' },
+    title: 'Panel 2',
+});
diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts
index bbc825e64..6bf8927b0 100644
--- a/packages/docs/templates/dockview/basic/vue/src/index.ts
+++ b/packages/docs/templates/dockview/basic/vue/src/index.ts
@@ -36,7 +36,7 @@ const App = defineComponent({
         'dockview-vue': DockviewVue,
         Panel,
     },
-    setup() {
+    data() {
         return {
             components: {
                 panel: Panel,
@@ -45,8 +45,6 @@ const App = defineComponent({
     },
     methods: {
         onReady(event: DockviewReadyEvent) {
-            console.log('ready');
-
             event.api.addPanel({
                 id: 'panel_1',
                 component: 'panel',
diff --git a/packages/docs/templates/dockview/constraints/react/src/index.tsx b/packages/docs/templates/dockview/constraints/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/constraints/react/src/index.tsx
+++ b/packages/docs/templates/dockview/constraints/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/custom-header/react/package.json b/packages/docs/templates/dockview/custom-header/react/package.json
new file mode 100644
index 000000000..1e3974aa3
--- /dev/null
+++ b/packages/docs/templates/dockview/custom-header/react/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.update-parameters",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/templates/dockview/custom-header/react/src/app.tsx b/packages/docs/templates/dockview/custom-header/react/src/app.tsx
new file mode 100644
index 000000000..6362106a7
--- /dev/null
+++ b/packages/docs/templates/dockview/custom-header/react/src/app.tsx
@@ -0,0 +1,85 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
+} from 'dockview';
+import React from 'react';
+
+interface CustomParams {
+    myValue: number;
+}
+
+const components = {
+    default: (props: IDockviewPanelProps<CustomParams>) => {
+        const [running, setRunning] = React.useState<boolean>(false);
+
+        React.useEffect(() => {
+            if (!running) {
+                return;
+            }
+
+            const interval = setInterval(() => {
+                props.api.updateParameters({ myValue: Date.now() });
+            }, 1000);
+            props.api.updateParameters({ myValue: Date.now() });
+            return () => {
+                clearInterval(interval);
+            };
+        }, [running]);
+
+        return (
+            <div style={{ height: '100%', padding: '20px', color: 'white' }}>
+                <div>{props.api.title}</div>
+                <button onClick={() => setRunning(!running)}>
+                    {running ? 'Stop' : 'Start'}
+                </button>
+                <span>{`value: ${props.params.myValue}`}</span>
+            </div>
+        );
+    },
+};
+
+const tabComponents = {
+    default: (props: IDockviewPanelHeaderProps<CustomParams>) => {
+        return (
+            <div>
+                <div>{`custom tab: ${props.api.title}`}</div>
+                <span>{`value: ${props.params.myValue}`}</span>
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                myValue: Date.now(),
+            },
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+            tabComponent: 'default',
+            params: {
+                myValue: Date.now(),
+            },
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            tabComponents={tabComponents}
+            onReady={onReady}
+            className={props.theme || 'dockview-theme-abyss'}
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/templates/dockview/custom-header/react/src/index.tsx b/packages/docs/templates/dockview/custom-header/react/src/index.tsx
new file mode 100644
index 000000000..68cebbec0
--- /dev/null
+++ b/packages/docs/templates/dockview/custom-header/react/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app.tsx';
+
+const rootElement = document.getElementById('app');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(<App />);
+}
diff --git a/packages/docs/templates/dockview/custom-header/react/tsconfig.json b/packages/docs/templates/dockview/custom-header/react/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/templates/dockview/custom-header/react/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/templates/dockview/custom-header/vue/src/index.ts b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
new file mode 100644
index 000000000..141fea3ea
--- /dev/null
+++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
@@ -0,0 +1,190 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewReadyEvent,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            running: false,
+            title: '',
+        };
+    },
+    methods: {
+        onClick() {
+            this.running = !this.running;
+        },
+    },
+    watch: {
+        running(newValue, oldValue) {
+            if (!newValue) {
+                return;
+            }
+
+            console.log('interval');
+
+            const interval = setInterval(() => {
+                this.api.updateParameters({ myValue: Date.now() });
+            }, 1000);
+            this.api.updateParameters({ myValue: Date.now() });
+
+            return () => {
+                clearInterval(interval);
+            };
+        },
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div style="height:100%;padding:20px;color:white;">
+      <div>{{title}}</div>
+      <button v-if="running" @click="onClick">Stop</button>
+      <button v-if="!running" @click="onClick">Start</button>
+      <span>{{title}}</span>
+    </div>`,
+});
+
+interface CustomParams {
+    myValue: number;
+}
+
+const Tab = defineComponent({
+    name: 'Tab',
+    props: {
+        api: {
+            type: Object as PropType<
+                IDockviewPanelHeaderProps<CustomParams>['api']
+            >,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<
+                IDockviewPanelHeaderProps<CustomParams>['containerApi']
+            >,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<
+                IDockviewPanelHeaderProps<CustomParams>['params']
+            >,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            myValue: this.params.myValue,
+            title: '',
+        };
+    },
+    methods: {
+        onClick() {
+            this.running = !this.running;
+        },
+    },
+    watch: {
+        params(newValue, oldValue) {
+            this.myValue = newValue.myValue;
+        },
+        running(newValue, oldValue) {
+            if (!newValue) {
+                return;
+            }
+
+            const interval = setInterval(() => {
+                this.api.updateParameters({ myValue: Date.now() });
+            }, 1000);
+            this.api.updateParameters({ myValue: Date.now() });
+
+            return () => {
+                clearInterval(interval);
+            };
+        },
+    },
+
+    template: `
+      <div>
+        <div>custom tab: {{title}}</div>
+        <span>value: {{myValue}}</span>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        Tab,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            tabComponents: {
+                default: Tab,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                tabComponent: 'default',
+                params: {
+                    myValue: Date.now(),
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                tabComponent: 'default',
+                params: {
+                    myValue: Date.now(),
+                },
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+        :tabComponents="tabComponents"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
index 5beeeb2ae..f369d6914 100644
--- a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
+++ b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx
@@ -18,6 +18,7 @@ import {
     RightControls,
 } from './controls.tsx';
 import { usePanelApiMetadata } from './debugPanel.tsx';
+import { LogLine, LogLines } from './logLines.tsx';
 
 const components = {
     default: (props: IDockviewPanelProps) => {
@@ -83,9 +84,9 @@ const colors = [
 let count = 0;
 
 const DockviewDemo = (props: { theme?: string }) => {
-    const [logLines, setLogLines] = React.useState<
-        { text: string; timestamp?: Date; backgroundColor?: string }[]
-    >([]);
+    const [logLines, setLogLines] = React.useState<LogLine[]>([]);
+    const [emittedLogsOnCurrentStackFrame, setEmittedLogsOnCurrentStackFrame] =
+        React.useState<LogLine[]>([]);
 
     const [panels, setPanels] = React.useState<string[]>([]);
     const [groups, setGroups] = React.useState<string[]>([]);
@@ -94,89 +95,100 @@ const DockviewDemo = (props: { theme?: string }) => {
     const [activePanel, setActivePanel] = React.useState<string>();
     const [activeGroup, setActiveGroup] = React.useState<string>();
 
-    const [pending, setPending] = React.useState<
-        { text: string; timestamp?: Date }[]
-    >([]);
-
     const addLogLine = (message: string) => {
-        setPending((line) => [
+        setEmittedLogsOnCurrentStackFrame((line) => [
             { text: message, timestamp: new Date() },
             ...line,
         ]);
     };
 
     React.useLayoutEffect(() => {
-        if (pending.length === 0) {
+        if (emittedLogsOnCurrentStackFrame.length === 0) {
             return;
         }
         const color = colors[count++ % colors.length];
         setLogLines((lines) => [
-            ...pending.map((_) => ({ ..._, backgroundColor: color })),
+            ...emittedLogsOnCurrentStackFrame.map((_) => ({
+                ..._,
+                backgroundColor: color,
+            })),
             ...lines,
         ]);
-        setPending([]);
-    }, [pending]);
+        setEmittedLogsOnCurrentStackFrame([]);
+    }, [emittedLogsOnCurrentStackFrame]);
 
     const onReady = (event: DockviewReadyEvent) => {
         setApi(event.api);
+    };
 
-        event.api.onDidAddPanel((event) => {
-            setPanels((_) => [..._, event.id]);
-            addLogLine(`Panel Added ${event.id}`);
-        });
-        event.api.onDidActivePanelChange((event) => {
-            setActivePanel(event?.id);
-            addLogLine(`Panel Activated ${event?.id}`);
-        });
-        event.api.onDidRemovePanel((event) => {
-            setPanels((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
-                );
+    React.useEffect(() => {
+        if (!api) {
+            return;
+        }
 
-                return next;
-            });
-            addLogLine(`Panel Removed ${event.id}`);
-        });
+        const disposables = [
+            api.onDidAddPanel((event) => {
+                setPanels((_) => [..._, event.id]);
+                addLogLine(`Panel Added ${event.id}`);
+            }),
+            api.onDidActivePanelChange((event) => {
+                setActivePanel(event?.id);
+                addLogLine(`Panel Activated ${event?.id}`);
+            }),
+            api.onDidRemovePanel((event) => {
+                setPanels((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
 
-        event.api.onDidAddGroup((event) => {
-            setGroups((_) => [..._, event.id]);
-            addLogLine(`Group Added ${event.id}`);
-        });
+                    return next;
+                });
+                addLogLine(`Panel Removed ${event.id}`);
+            }),
 
-        event.api.onDidRemoveGroup((event) => {
-            setGroups((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
-                );
+            api.onDidAddGroup((event) => {
+                setGroups((_) => [..._, event.id]);
+                addLogLine(`Group Added ${event.id}`);
+            }),
 
-                return next;
-            });
-            addLogLine(`Group Removed ${event.id}`);
-        });
+            api.onDidRemoveGroup((event) => {
+                setGroups((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
 
-        event.api.onDidActiveGroupChange((event) => {
-            setActiveGroup(event?.id);
-            addLogLine(`Group Activated ${event?.id}`);
-        });
+                    return next;
+                });
+                addLogLine(`Group Removed ${event.id}`);
+            }),
+            api.onDidActiveGroupChange((event) => {
+                setActiveGroup(event?.id);
+                addLogLine(`Group Activated ${event?.id}`);
+            }),
+        ];
+
+        let success = false;
 
         const state = localStorage.getItem('dv-demo-state');
         if (state) {
             try {
-                event.api.fromJSON(JSON.parse(state));
-                return;
+                api.fromJSON(JSON.parse(state));
+                success = true;
             } catch {
                 localStorage.removeItem('dv-demo-state');
             }
-            return;
         }
 
-        defaultConfig(event.api);
-    };
+        if (!success) {
+            defaultConfig(api);
+        }
+
+        return disposables.forEach((disposable) => disposable.dispose());
+    }, [api]);
 
     return (
         <div
@@ -223,59 +235,13 @@ const DockviewDemo = (props: { theme?: string }) => {
                 />
                 <div
                     style={{
-                        // height: '200px',
                         width: '300px',
                         backgroundColor: 'black',
                         color: 'white',
                         overflow: 'auto',
                     }}
                 >
-                    {logLines.map((line, i) => {
-                        return (
-                            <div
-                                style={{
-                                    height: '30px',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                    fontSize: '13px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    backgroundColor: line.backgroundColor,
-                                }}
-                                key={i}
-                            >
-                                <span
-                                    style={{
-                                        display: 'inline-block',
-                                        width: '20px',
-                                        color: 'gray',
-                                        borderRight: '1px solid gray',
-                                        marginRight: '4px',
-                                        paddingLeft: '2px',
-                                        height: '100%',
-                                    }}
-                                >
-                                    {logLines.length - i}
-                                </span>
-                                <span>
-                                    {line.timestamp && (
-                                        <span
-                                            style={{
-                                                fontSize: '0.7em',
-                                                padding: '0px 2px',
-                                            }}
-                                        >
-                                            {line.timestamp
-                                                .toISOString()
-                                                .substring(11, 23)}
-                                        </span>
-                                    )}
-                                    <span>{line.text}</span>
-                                </span>
-                            </div>
-                        );
-                    })}
+                    <LogLines lines={logLines} />
                 </div>
             </div>
         </div>
diff --git a/packages/docs/templates/dockview/demo-dockview/react/src/index.tsx b/packages/docs/templates/dockview/demo-dockview/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/demo-dockview/react/src/index.tsx
+++ b/packages/docs/templates/dockview/demo-dockview/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/demo-dockview/react/src/logLines.tsx b/packages/docs/templates/dockview/demo-dockview/react/src/logLines.tsx
new file mode 100644
index 000000000..64abed046
--- /dev/null
+++ b/packages/docs/templates/dockview/demo-dockview/react/src/logLines.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+export type LogLine = {
+    text: string;
+    timestamp?: Date;
+    backgroundColor?: string;
+};
+
+export const LogLines = (props: { lines: LogLine[] }) => {
+    return props.lines.map((line, i) => {
+        return (
+            <div
+                style={{
+                    height: '30px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    fontSize: '13px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    backgroundColor: line.backgroundColor,
+                }}
+                key={i}
+            >
+                <span
+                    style={{
+                        display: 'inline-block',
+                        width: '20px',
+                        color: 'gray',
+                        borderRight: '1px solid gray',
+                        marginRight: '4px',
+                        paddingLeft: '2px',
+                        height: '100%',
+                    }}
+                >
+                    {props.lines.length - i}
+                </span>
+                <span>
+                    {line.timestamp && (
+                        <span
+                            style={{
+                                fontSize: '0.7em',
+                                padding: '0px 2px',
+                            }}
+                        >
+                            {line.timestamp.toISOString().substring(11, 23)}
+                        </span>
+                    )}
+                    <span>{line.text}</span>
+                </span>
+            </div>
+        );
+    });
+};
diff --git a/packages/docs/templates/dockview/dnd-events/react/src/index.tsx b/packages/docs/templates/dockview/dnd-events/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/dnd-events/react/src/index.tsx
+++ b/packages/docs/templates/dockview/dnd-events/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/dnd-external/react/src/index.tsx b/packages/docs/templates/dockview/dnd-external/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/dnd-external/react/src/index.tsx
+++ b/packages/docs/templates/dockview/dnd-external/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/floating-groups/react/src/app.tsx b/packages/docs/templates/dockview/floating-groups/react/src/app.tsx
index 5b7a5e274..fc41eee7b 100644
--- a/packages/docs/templates/dockview/floating-groups/react/src/app.tsx
+++ b/packages/docs/templates/dockview/floating-groups/react/src/app.tsx
@@ -26,14 +26,6 @@ const components = {
     },
 };
 
-const counter = (() => {
-    let i = 0;
-
-    return {
-        next: () => ++i,
-    };
-})();
-
 function loadDefaultLayout(api: DockviewApi) {
     api.addPanel({
         id: 'panel_1',
diff --git a/packages/docs/templates/dockview/floating-groups/react/src/index.tsx b/packages/docs/templates/dockview/floating-groups/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/floating-groups/react/src/index.tsx
+++ b/packages/docs/templates/dockview/floating-groups/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
new file mode 100644
index 000000000..fb9f02134
--- /dev/null
+++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
@@ -0,0 +1,264 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewApi,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+let panelCount = 0;
+
+const MaterialIcon = defineComponent({
+    name: 'MaterialIcon',
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: false,
+        },
+    },
+    emits: ['click'],
+    data() {
+        return {
+            title: this.title,
+            icon: this.icon,
+        };
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+    template: `
+    <div
+      @click="onClick"
+      title="title"
+      style="display:flex;justify-content:center;align-items:center;width:30px;height:100%;font-size:18px;">
+        <span class="material-symbols-outlined" style="font-size:inherit;cursor:pointer;">
+          {{icon}}
+        </span>
+    </div>`,
+});
+
+const LeftAction = defineComponent({
+    name: 'LeftAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    methods: {
+        onClick() {
+            this.containerApi.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+            });
+        },
+    },
+    template: `
+      <div style="height:100%;color:white;padding:0px 4px;">
+        <material-icon @click="onClick" icon="add"></material-icon>
+      </div>`,
+});
+
+const RightAction = defineComponent({
+    name: 'RightAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    data() {
+        return {
+            floating: this.api.location.type === 'floating',
+        };
+    },
+    methods: {
+        onClick() {
+            if (this.floating) {
+                const group = this.containerApi.addGroup();
+                this.group.api.moveTo({ group });
+            } else {
+                this.containerApi.addFloatingGroup(this.group);
+            }
+        },
+    },
+    mounted() {
+        const disposable = this.group.api.onDidLocationChange((event) => {
+            this.floating = event.location.type === 'floating';
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div style="height:100%;color:white;padding:0px 4px">
+      <material-icon v-if="floating" @click="onClick" icon="jump_to_element"></material-icon>
+      <material-icon v-if="!floating" @click="onClick" icon="back_to_tab"></material-icon>
+    </div>`,
+});
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div style="color:white;">
+        <div>{{title}}</div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        LeftAction,
+        RightAction,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            leftAction: LeftAction,
+            rightAction: RightAction,
+            api: null as DockviewApi | null,
+            bounds: undefined,
+            disableFloatingGroups: false,
+        };
+    },
+    methods: {
+        onAddFloatingGroup() {
+            this.api.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+                floating: { width: 250, height: 150, x: 50, y: 50 },
+            });
+        },
+        onToggleBounds() {
+            this.bounds =
+                this.bounds === undefined ? 'boundedWithinViewport' : undefined;
+        },
+        onToggleEnabled() {
+            this.disableFloatingGroups = !this.disableFloatingGroups;
+        },
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                title: 'Panel 1',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                title: 'Panel 2',
+                position: {
+                    direction: 'right',
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                title: 'Panel 3',
+                position: {
+                    direction: 'below',
+                },
+            });
+
+            this.api = event.api;
+        },
+    },
+    template: `
+    <div style="display:flex;flex-direction:column;height:100%;">
+      <div style="height:25px">
+        <button @click="onAddFloatingGroup">Add Floating Group</button>
+        <button @click="onToggleBounds">{{'Bounds: ' + bounds}}</button>
+        <button @click="onToggleEnabled">{{'Disabled: ' + disableFloatingGroups}}</button>
+      </div>
+      <div style="flex-grow:1;">
+        <dockview-vue
+          style="width:100%;height:100%"
+          class="dockview-theme-abyss"
+          @ready="onReady"
+          :components="components"
+          :floatingGroupBounds="bounds"
+          :leftHeaderActionsComponent="leftAction"
+          :rightHeaderActionsComponent="rightAction"
+          :prefixHeaderActionsComponent="prefixAction"
+          :disableFloatingGroups="disableFloatingGroups"
+        </dockview-vue>
+      </div>
+    </div>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/group-actions/react/src/index.tsx b/packages/docs/templates/dockview/group-actions/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/group-actions/react/src/index.tsx
+++ b/packages/docs/templates/dockview/group-actions/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/group-actions/vue/src/app.css b/packages/docs/templates/dockview/group-actions/vue/src/app.css
new file mode 100644
index 000000000..92ec05921
--- /dev/null
+++ b/packages/docs/templates/dockview/group-actions/vue/src/app.css
@@ -0,0 +1,23 @@
+.dockview-groupcontrol-demo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: white;
+    background-color: black;
+    padding: 0px 8px;
+
+    margin: 1px;
+    border: 1px dotted orange;
+
+
+}
+
+.dockview-groupcontrol-demo  .dockview-groupcontrol-demo-group-active {
+  padding: 0px 8px;
+}
+
+.dockview-groupcontrol-demo .dockview-groupcontrol-demo-active-panel {
+  color: yellow;
+  padding: 0px 8px;
+}
+
diff --git a/packages/docs/templates/dockview/group-actions/vue/src/index.ts b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
new file mode 100644
index 000000000..efe64b599
--- /dev/null
+++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
@@ -0,0 +1,216 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewGroupPanelApi,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+import './app.css';
+
+const LeftAction = defineComponent({
+    name: 'LeftAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            activePanel: null,
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidActivePanelChange((event) => {
+            this.activePanel = event.panel.id;
+        });
+
+        this.activePanel = this.group.activePanel.id;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div class="dockview-groupcontrol-demo">
+        <span class="dockview-groupcontrol-demo-active-panel">
+          "Active Panel " {{ activePanel }}
+        </span>
+      </div>`,
+});
+
+const RightAction = defineComponent({
+    name: 'RightAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            isGroupActive: false,
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidActiveChange((event) => {
+            this.isGroupActive = event.isActive;
+        });
+
+        this.isActive = this.api.isActive;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div class="dockview-groupcontrol-demo">
+      <span v-if="isGroupActive" style="color:green;" class="dockview-groupcontrol-demo-active-panel">
+        Group Active
+      </span>
+      <span v-if="!isGroupActive" style="color:red;" class="dockview-groupcontrol-demo-active-panel">
+        Group Inactive
+      </span>
+    </div>`,
+});
+
+const PrefixAction = defineComponent({
+    name: 'PrefixAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    template: `<div class="dockview-groupcontrol-demo">🌲</div>`,
+});
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div style="color:white;">
+        <div>{{title}}</div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        LeftAction,
+        RightAction,
+        PrefixAction,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            leftAction: LeftAction,
+            rightAction: RightAction,
+            prefixAction: PrefixAction,
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                title: 'Panel 1',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                title: 'Panel 2',
+                position: {
+                    direction: 'right',
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                title: 'Panel 3',
+                position: {
+                    direction: 'below',
+                },
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+        :leftHeaderActionsComponent="leftAction"
+        :rightHeaderActionsComponent="rightAction"
+        :prefixHeaderActionsComponent="prefixAction"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/layout/react/src/app.tsx b/packages/docs/templates/dockview/layout/react/src/app.tsx
index 444a5a0e8..5a8ea3186 100644
--- a/packages/docs/templates/dockview/layout/react/src/app.tsx
+++ b/packages/docs/templates/dockview/layout/react/src/app.tsx
@@ -22,14 +22,6 @@ const components = {
     },
 };
 
-const counter = (() => {
-    let i = 0;
-
-    return {
-        next: () => ++i,
-    };
-})();
-
 function loadDefaultLayout(api: DockviewApi) {
     api.addPanel({
         id: 'panel_1',
diff --git a/packages/docs/templates/dockview/layout/react/src/index.tsx b/packages/docs/templates/dockview/layout/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/layout/react/src/index.tsx
+++ b/packages/docs/templates/dockview/layout/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/layout/vue/src/index.ts b/packages/docs/templates/dockview/layout/vue/src/index.ts
new file mode 100644
index 000000000..05983a2d5
--- /dev/null
+++ b/packages/docs/templates/dockview/layout/vue/src/index.ts
@@ -0,0 +1,237 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewApi,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+let panelCount = 0;
+
+function loadDefaultLayout(api: DockviewApi) {
+    api.addPanel({
+        id: 'panel_1',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_2',
+        component: 'default',
+    });
+
+    api.addPanel({
+        id: 'panel_3',
+        component: 'default',
+    });
+}
+
+const MaterialIcon = defineComponent({
+    name: 'MaterialIcon',
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: false,
+        },
+    },
+    emits: ['click'],
+    data() {
+        return {
+            title: this.title,
+            icon: this.icon,
+        };
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+    template: `
+    <div
+      @click="onClick"
+      title="title"
+      style="display:flex;justify-content:center;align-items:center;width:30px;height:100%;font-size:18px;">
+        <span class="material-symbols-outlined" style="font-size:inherit;cursor:pointer;">
+          {{icon}}
+        </span>
+    </div>`,
+});
+
+const LeftAction = defineComponent({
+    name: 'LeftAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    methods: {
+        onClick() {
+            this.containerApi.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+            });
+        },
+    },
+    template: `
+      <div style="height:100%;color:white;padding:0px 4px;">
+        <material-icon @click="onClick" icon="add"></material-icon>
+      </div>`,
+});
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div style="color:white;">
+        <div>{{title}}</div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        LeftAction,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            leftAction: LeftAction,
+            api: null as DockviewApi | null,
+        };
+    },
+    methods: {
+        onLoad() {
+            const layoutString = localStorage.getItem(
+                'dv-template/dockview/layout/vue'
+            );
+
+            let success = false;
+
+            if (layoutString) {
+                try {
+                    const layout = JSON.parse(layoutString);
+                    this.api.fromJSON(layout);
+                    success = true;
+                } catch (err) {
+                    console.error(err);
+                }
+            }
+
+            if (!success) {
+                loadDefaultLayout(this.api);
+            }
+        },
+        onSave() {
+            localStorage.setItem(
+                'dv-template/dockview/layout/vue',
+                JSON.stringify(this.api.toJSON())
+            );
+        },
+        onClear() {
+            localStorage.removeItem('dv-template/dockview/layout/vue');
+        },
+        onReady(event: DockviewReadyEvent) {
+            this.api = event.api;
+            this.onLoad();
+        },
+    },
+    watch: {
+        api(newValue, oldValue) {
+            if (!newValue) {
+                return;
+            }
+
+            const disposable = newValue.onDidLayoutChange(() => {
+                const layout = newValue.toJSON();
+
+                localStorage.setItem(
+                    'dockview_persistence_layout',
+                    JSON.stringify(layout)
+                );
+            });
+
+            return () => {
+                disposable.dispose();
+            };
+        },
+    },
+    template: `
+    <div style="display:flex;flex-direction:column;height:100%;">
+      <div style="height:25px">
+        <button @click="onLoad">Load</button>
+        <button @click="onSave">Save</button>
+        <button @click="onClear">Clear</button>
+      </div>
+      <div style="flex-grow:1;">
+        <dockview-vue
+          style="width:100%;height:100%"
+          class="dockview-theme-abyss"
+          @ready="onReady"
+          :components="components"
+          :floatingGroupBounds="bounds"
+          :leftHeaderActionsComponent="leftAction"
+          :rightHeaderActionsComponent="rightAction"
+          :prefixHeaderActionsComponent="prefixAction"
+          :disableFloatingGroups="disableFloatingGroups"
+        </dockview-vue>
+      </div>
+    </div>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/locked/react/src/index.tsx b/packages/docs/templates/dockview/locked/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/locked/react/src/index.tsx
+++ b/packages/docs/templates/dockview/locked/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/locked/vue/src/index.ts b/packages/docs/templates/dockview/locked/vue/src/index.ts
new file mode 100644
index 000000000..4edf2df01
--- /dev/null
+++ b/packages/docs/templates/dockview/locked/vue/src/index.ts
@@ -0,0 +1,107 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewApi,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+
+    template: `
+      <div style="height:100%;padding:20px;">
+        <span style="color:white;">{{ title }}</span>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: {
+                    direction: 'right',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: {
+                    direction: 'below',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_4',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_5',
+                component: 'default',
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+        :locked=true
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/maximize-group/react/src/app.tsx b/packages/docs/templates/dockview/maximize-group/react/src/app.tsx
index 5c49b0d35..1ec6b5a7a 100644
--- a/packages/docs/templates/dockview/maximize-group/react/src/app.tsx
+++ b/packages/docs/templates/dockview/maximize-group/react/src/app.tsx
@@ -7,7 +7,35 @@ import {
     SerializedDockview,
 } from 'dockview';
 import React from 'react';
-import { Icon } from './utils.tsx';
+
+const Icon = (props: {
+    icon: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent) => void;
+}) => {
+    return (
+        <div
+            title={props.title}
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '30px',
+                height: '100%',
+
+                fontSize: '18px',
+            }}
+            onClick={props.onClick}
+        >
+            <span
+                style={{ fontSize: 'inherit', cursor: 'pointer' }}
+                className="material-symbols-outlined"
+            >
+                {props.icon}
+            </span>
+        </div>
+    );
+};
 
 const components = {
     default: (props: IDockviewPanelProps<{ title: string }>) => {
@@ -25,14 +53,6 @@ const components = {
     },
 };
 
-const counter = (() => {
-    let i = 0;
-
-    return {
-        next: () => ++i,
-    };
-})();
-
 function loadDefaultLayout(api: DockviewApi) {
     api.addPanel({
         id: 'panel_1',
diff --git a/packages/docs/templates/dockview/maximize-group/react/src/index.tsx b/packages/docs/templates/dockview/maximize-group/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/maximize-group/react/src/index.tsx
+++ b/packages/docs/templates/dockview/maximize-group/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/maximize-group/react/src/utils.tsx b/packages/docs/templates/dockview/maximize-group/react/src/utils.tsx
deleted file mode 100644
index 71e5c473f..000000000
--- a/packages/docs/templates/dockview/maximize-group/react/src/utils.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-
-export const Icon = (props: {
-    icon: string;
-    title?: string;
-    onClick?: (event: React.MouseEvent) => void;
-}) => {
-    return (
-        <div
-            title={props.title}
-            style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                width: '30px',
-                height: '100%',
-
-                fontSize: '18px',
-            }}
-            onClick={props.onClick}
-        >
-            <span
-                style={{ fontSize: 'inherit', cursor: 'pointer' }}
-                className="material-symbols-outlined"
-            >
-                {props.icon}
-            </span>
-        </div>
-    );
-};
diff --git a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
new file mode 100644
index 000000000..4896c5189
--- /dev/null
+++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
@@ -0,0 +1,243 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { Prop, PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+let panelCount = 0;
+
+const MaterialIcon = defineComponent({
+    name: 'MaterialIcon',
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: false,
+        },
+    },
+    emits: ['click'],
+    data() {
+        return {
+            title: this.title,
+            icon: this.icon,
+        };
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+    template: `
+      <div
+        @click="onClick"
+        title="title"
+        style="display:flex;justify-content:center;align-items:center;width:30px;height:100%;font-size:18px;">
+          <span class="material-symbols-outlined" style="font-size:inherit;cursor:pointer;">
+            {{icon}}
+          </span>
+      </div>`,
+});
+
+const LeftAction = defineComponent({
+    name: 'LeftAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    methods: {
+        onClick() {
+            this.containerApi.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+                position: { referenceGroup: this.group },
+            });
+        },
+    },
+    template: `
+      <div style="height:100%;color:white;padding:0px 4px;">
+        <material-icon @click="onClick" icon="add"></material-icon>
+      </div>`,
+});
+
+const RightAction = defineComponent({
+    name: 'RightAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            maximized: false,
+        };
+    },
+    mounted() {
+        const disposable = this.containerApi.onDidMaximizedGroupChange(() => {
+            this.maximized = this.api.isMaximized();
+        });
+
+        this.maximized = this.api.isMaximized();
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    methods: {
+        onClick() {
+            if (this.maximized) {
+                this.api.exitMaximized();
+            } else {
+                this.api.maximize();
+            }
+        },
+    },
+    template: `
+      <div style="height:100%;color:white;padding:0px 4px;">
+        <material-icon v-if="maximized" @click="onClick" icon="jump_to_element" ></material-icon>
+        <material-icon v-if="!maximized" @click="onClick" icon="back_to_tab"></material-icon>
+      </div>`,
+});
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div style="color:white;">
+        <div>{{title}}</div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        LeftAction,
+        RightAction,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            leftAction: LeftAction,
+            rightAction: RightAction,
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: {
+                    direction: 'right',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: {
+                    direction: 'below',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_4',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_5',
+                component: 'default',
+            });
+        },
+    },
+    computed: {
+        styleObject() {
+            return {
+                height: `${this.value}%`,
+                width: `${this.value}%`,
+            };
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+        :leftHeaderActionsComponent="leftAction"
+        :rightHeaderActionsComponent="rightAction"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/nested/react/package.json b/packages/docs/templates/dockview/nested/react/package.json
new file mode 100644
index 000000000..600427917
--- /dev/null
+++ b/packages/docs/templates/dockview/nested/react/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "dockview.resize-container",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "dockview": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.9.5",
+    "react-scripts": "*"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/templates/dockview/nested/react/src/app.tsx b/packages/docs/templates/dockview/nested/react/src/app.tsx
new file mode 100644
index 000000000..42afc7f73
--- /dev/null
+++ b/packages/docs/templates/dockview/nested/react/src/app.tsx
@@ -0,0 +1,94 @@
+import {
+    DockviewDidDropEvent,
+    DockviewDndOverlayEvent,
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import React from 'react';
+
+const InnerDockview = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+        });
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            className="nested-dockview"
+        />
+    );
+};
+
+const components = {
+    default: (props: IDockviewPanelProps<{ title: string }>) => {
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    padding: '20px',
+                    background: 'var(--dv-group-view-background-color)',
+                }}
+            >
+                {props.params.title}
+            </div>
+        );
+    },
+    innerDockview: InnerDockview,
+};
+
+const NestedDockview = (props: { theme?: string }) => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'innerDockview',
+            position: { referencePanel: 'panel_2', direction: 'right' },
+        });
+    };
+
+    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
+        // console.log(event.getData());
+
+        return false;
+    };
+
+    const onDidDrop = (event: DockviewDidDropEvent) => {
+        // event.getData();
+    };
+
+    return (
+        <DockviewReact
+            onReady={onReady}
+            components={components}
+            className={`${props.theme || 'dockview-theme-abyss'}`}
+            showDndOverlay={showDndOverlay}
+            onDidDrop={onDidDrop}
+        />
+    );
+};
+
+export default NestedDockview;
diff --git a/packages/docs/templates/dockview/nested/react/src/index.tsx b/packages/docs/templates/dockview/nested/react/src/index.tsx
new file mode 100644
index 000000000..68cebbec0
--- /dev/null
+++ b/packages/docs/templates/dockview/nested/react/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+import 'dockview/dist/styles/dockview.css';
+
+import App from './app.tsx';
+
+const rootElement = document.getElementById('app');
+
+if (rootElement) {
+    const root = ReactDOMClient.createRoot(rootElement);
+
+    root.render(<App />);
+}
diff --git a/packages/docs/templates/dockview/nested/react/tsconfig.json b/packages/docs/templates/dockview/nested/react/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/templates/dockview/nested/react/tsconfig.json
@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "build/dist",
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom"],
+        "sourceMap": true,
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "rootDir": "src",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "strictNullChecks": true
+    }
+}
diff --git a/packages/docs/templates/dockview/nested/vue/src/index.ts b/packages/docs/templates/dockview/nested/vue/src/index.ts
new file mode 100644
index 000000000..fdd7b610c
--- /dev/null
+++ b/packages/docs/templates/dockview/nested/vue/src/index.ts
@@ -0,0 +1,131 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+  <div style="height:100%;padding:20px;color:white;">
+    <div>{{title}}</div>
+  </div>`,
+});
+
+const InnerDockview = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+                innerDockview: InnerDockview,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+            });
+        },
+    },
+    template: `
+    <dockview-vue
+      style="width:100%;height:100%"
+      class="dockview-theme-abyss"
+      :components="components"
+      @ready="onReady"
+    </dockview-vue>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        InnerDockview,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+                innerDockview: InnerDockview,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'innerDockview',
+                position: { referencePanel: 'panel_2', direction: 'right' },
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        :components="components"
+        @ready="onReady"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/popout-group/react/src/index.tsx b/packages/docs/templates/dockview/popout-group/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/popout-group/react/src/index.tsx
+++ b/packages/docs/templates/dockview/popout-group/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/popout-group/vue/src/index.ts b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
new file mode 100644
index 000000000..0e512d5c4
--- /dev/null
+++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
@@ -0,0 +1,266 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import {
+    DockviewApi,
+    DockviewReadyEvent,
+    IDockviewHeaderActionsProps,
+    IDockviewPanelProps,
+} from 'dockview-core';
+
+let panelCount = 0;
+
+const MaterialIcon = defineComponent({
+    name: 'MaterialIcon',
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: false,
+        },
+    },
+    emits: ['click'],
+    data() {
+        return {
+            title: this.title,
+            icon: this.icon,
+        };
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+    template: `
+    <div
+      @click="onClick"
+      title="title"
+      style="display:flex;justify-content:center;align-items:center;width:30px;height:100%;font-size:18px;">
+        <span class="material-symbols-outlined" style="font-size:inherit;cursor:pointer;">
+          {{icon}}
+        </span>
+    </div>`,
+});
+
+const LeftAction = defineComponent({
+    name: 'LeftAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    methods: {
+        onClick() {
+            this.containerApi.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+            });
+        },
+    },
+    template: `
+      <div style="height:100%;color:white;padding:0px 4px;">
+        <material-icon @click="onClick" icon="add"></material-icon>
+      </div>`,
+});
+
+const RightAction = defineComponent({
+    name: 'RightAction',
+    props: {
+        containerApi: {
+            type: Object as PropType<
+                IDockviewHeaderActionsProps['containerApi']
+            >,
+            required: true,
+        },
+        api: {
+            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
+            required: true,
+        },
+        group: {
+            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+            required: true,
+        },
+    },
+    components: {
+        'material-icon': MaterialIcon,
+    },
+    data() {
+        return {
+            isPopout: this.api.location.type === 'popout',
+        };
+    },
+    methods: {
+        onClick() {
+            if (this.isPopout) {
+                const group = this.containerApi.addGroup();
+                this.group.api.moveTo({ group });
+            } else {
+                this.containerApi.addPopoutGroup(this.group, {
+                    popoutUrl: '/popout/index.html',
+                });
+            }
+        },
+    },
+    mounted() {
+        const disposable = this.group.api.onDidLocationChange((event) => {
+            this.isPopout = event.location.type === 'popout';
+        });
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div style="height:100%;color:white;padding:0px 4px">
+      <material-icon v-if="isPopout" @click="onClick" icon="jump_to_element"></material-icon>
+      <material-icon v-if="!isPopout" @click="onClick" icon="back_to_tab"></material-icon>
+    </div>`,
+});
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+      <div style="color:white;">
+        <div>{{title}}</div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+        LeftAction,
+        RightAction,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            leftAction: LeftAction,
+            rightAction: RightAction,
+            api: null as DockviewApi | null,
+            bounds: undefined,
+            disableFloatingGroups: false,
+        };
+    },
+    methods: {
+        onAddFloatingGroup() {
+            this.api.addPanel({
+                id: (++panelCount).toString(),
+                title: `Tab ${panelCount}`,
+                component: 'default',
+                floating: { width: 250, height: 150, x: 50, y: 50 },
+            });
+        },
+        onToggleBounds() {
+            this.bounds =
+                this.bounds === undefined ? 'boundedWithinViewport' : undefined;
+        },
+        onToggleEnabled() {
+            this.disableFloatingGroups = !this.disableFloatingGroups;
+        },
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                title: 'Panel 1',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                title: 'Panel 2',
+                position: {
+                    direction: 'right',
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                title: 'Panel 3',
+                position: {
+                    direction: 'below',
+                },
+            });
+
+            this.api = event.api;
+        },
+    },
+    template: `
+    <div style="display:flex;flex-direction:column;height:100%;">
+      <div style="height:25px">
+        <button @click="onAddFloatingGroup">Add Floating Group</button>
+        <button @click="onToggleBounds">{{'Bounds: ' + bounds}}</button>
+        <button @click="onToggleEnabled">{{'Disabled: ' + disableFloatingGroups}}</button>
+      </div>
+      <div style="flex-grow:1;">
+        <dockview-vue
+          style="width:100%;height:100%"
+          class="dockview-theme-abyss"
+          @ready="onReady"
+          :components="components"
+          :floatingGroupBounds="bounds"
+          :leftHeaderActionsComponent="leftAction"
+          :rightHeaderActionsComponent="rightAction"
+          :prefixHeaderActionsComponent="prefixAction"
+          :disableFloatingGroups="disableFloatingGroups"
+        </dockview-vue>
+      </div>
+    </div>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/render-mode/react/src/app.tsx b/packages/docs/templates/dockview/render-mode/react/src/app.tsx
index b8fed9cfa..95992b2f0 100644
--- a/packages/docs/templates/dockview/render-mode/react/src/app.tsx
+++ b/packages/docs/templates/dockview/render-mode/react/src/app.tsx
@@ -48,15 +48,14 @@ const components = {
                     }}
                 >
                     <div>{props.api.title}</div>
-                    <input />
                     <div>
                         {mode}
                         <button
                             onClick={() => {
                                 setMode(
-                                    mode === 'onlyWhenVisibile'
+                                    mode === 'onlyWhenVisible'
                                         ? 'always'
-                                        : 'onlyWhenVisibile'
+                                        : 'onlyWhenVisible'
                                 );
                             }}
                         >
diff --git a/packages/docs/templates/dockview/render-mode/react/src/index.tsx b/packages/docs/templates/dockview/render-mode/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/render-mode/react/src/index.tsx
+++ b/packages/docs/templates/dockview/render-mode/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/render-mode/vue/src/index.ts b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
new file mode 100644
index 000000000..670322fdb
--- /dev/null
+++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
@@ -0,0 +1,115 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+            renderer: null,
+        };
+    },
+    methods: {
+        onToggleRenderMode() {
+            this.api.setRenderer(
+                this.api.renderer === 'onlyWhenVisible'
+                    ? 'always'
+                    : 'onlyWhenVisible'
+            );
+        },
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        const disposable2 = this.api.onDidRendererChange((event) => {
+            this.renderer = event.renderer;
+        });
+
+        this.title = this.api.title;
+        this.renderer = this.api.renderer;
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+        };
+    },
+    template: `
+    <div style="height:100%;color:white;">
+      <div>{{title}}</div>
+      <button @click="onToggleRenderMode">{{renderer}}</button>
+    </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                title: 'Panel 1',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                title: 'Panel 2',
+                position: { referencePanel: 'panel_1', direction: 'within' },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                title: 'Panel 3',
+            });
+
+            event.api.addPanel({
+                id: 'panel_4',
+                component: 'default',
+                title: 'Panel 4',
+                position: { referencePanel: 'panel_3', direction: 'below' },
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/resize-container/react/src/app.tsx b/packages/docs/templates/dockview/resize-container/react/src/app.tsx
index 7b428ae26..a3f96bf99 100644
--- a/packages/docs/templates/dockview/resize-container/react/src/app.tsx
+++ b/packages/docs/templates/dockview/resize-container/react/src/app.tsx
@@ -53,7 +53,7 @@ export const App: React.FC = (props: { theme?: string }) => {
             position: { referencePanel: 'panel_1', direction: 'right' },
         });
 
-        const panel5 = event.api.addPanel({
+        event.api.addPanel({
             id: 'panel_5',
             component: 'default',
             params: {
@@ -62,9 +62,6 @@ export const App: React.FC = (props: { theme?: string }) => {
             position: { referencePanel: 'panel_3', direction: 'right' },
         });
 
-        // panel5.group!.model.header.hidden = true;
-        // panel5.group!.model.locked = true;
-
         event.api.addPanel({
             id: 'panel_6',
             component: 'default',
diff --git a/packages/docs/templates/dockview/resize-container/react/src/index.tsx b/packages/docs/templates/dockview/resize-container/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/resize-container/react/src/index.tsx
+++ b/packages/docs/templates/dockview/resize-container/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/resize-container/vue/src/index.ts b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
new file mode 100644
index 000000000..5ed8a7dfd
--- /dev/null
+++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
@@ -0,0 +1,150 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div style="height:100%;padding:20px;color:white;">
+      <div>{{title}}</div>
+    </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+            value: 50,
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            const panel = event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+                params: {
+                    title: 'Panel 1',
+                },
+            });
+
+            panel.group.locked = true;
+            panel.group.header.hidden = true;
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                params: {
+                    title: 'Panel 2',
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                params: {
+                    title: 'Panel 3',
+                },
+            });
+
+            event.api.addPanel({
+                id: 'panel_4',
+                component: 'default',
+                params: {
+                    title: 'Panel 4',
+                },
+                position: { referencePanel: 'panel_1', direction: 'right' },
+            });
+
+            event.api.addPanel({
+                id: 'panel_5',
+                component: 'default',
+                params: {
+                    title: 'Panel 5',
+                },
+                position: { referencePanel: 'panel_3', direction: 'right' },
+            });
+
+            event.api.addPanel({
+                id: 'panel_6',
+                component: 'default',
+                params: {
+                    title: 'Panel 6',
+                },
+                position: { referencePanel: 'panel_5', direction: 'below' },
+            });
+
+            event.api.addPanel({
+                id: 'panel_7',
+                component: 'default',
+                params: {
+                    title: 'Panel 7',
+                },
+                position: { referencePanel: 'panel_6', direction: 'right' },
+            });
+        },
+    },
+    computed: {
+        styleObject() {
+            return {
+                height: `${this.value}%`,
+                width: `${this.value}%`,
+            };
+        },
+    },
+    template: `
+      <div style="height:100%;display:flex;flex-direction:column;">
+        <input v-model="value" type="range" min="1" max="100"></input>
+        <div :style="styleObject">
+          <dockview-vue
+            style="width:100%;height:100%"
+            class="dockview-theme-abyss"
+            @ready="onReady"
+            :components="components"
+            :disableFloatingGroups=true
+          </dockview-vue>
+        </div>
+      </div>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/resize/react/src/index.tsx b/packages/docs/templates/dockview/resize/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/resize/react/src/index.tsx
+++ b/packages/docs/templates/dockview/resize/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/resize/vue/src/index.ts b/packages/docs/templates/dockview/resize/vue/src/index.ts
new file mode 100644
index 000000000..b146cc7a0
--- /dev/null
+++ b/packages/docs/templates/dockview/resize/vue/src/index.ts
@@ -0,0 +1,138 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { PropType, createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import './resize.css';
+
+const Panel = defineComponent({
+    name: 'Panel',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+            width: 100,
+            height: 100,
+        };
+    },
+    methods: {
+        onResizeGroupWidth() {
+            this.api.group.api.setSize({ width: this.width });
+        },
+        onResizePanelWidth() {
+            this.api.setSize({ width: this.width });
+        },
+        onResizeGroupHeight() {
+            this.api.group.api.setSize({ height: this.height });
+        },
+        onResizePanelHeight() {
+            this.api.setSize({ height: this.height });
+        },
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+        this.title = this.api.title;
+
+        return () => {
+            disposable.dispose();
+        };
+    },
+    template: `
+    <div class="resize-panel">
+      <div style="height:25px;">{{title}}</div>
+      <div class="resize-control">
+        <span>Width:</span>
+        <input v-model="width" type="number" min="50" step="1"></input>
+        <button @click="onResizeGroupWidth">Resize Group</button>
+        <button @click="onResizePanelWidth">Resize Panel</button>
+      </div>
+      <div class="resize-control">
+        <span>Height:</span>
+        <input v-model="height" type="number" min="50" step="1"></input>
+        <button @click="onResizeGroupHeight">Resize Group</button>
+        <button @click="onResizePanelHeight">Resize Panel</button>
+      </div>
+    </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+        Panel,
+    },
+    data() {
+        return {
+            components: {
+                default: Panel,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: {
+                    direction: 'right',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: {
+                    direction: 'below',
+                    referencePanel: 'panel_1',
+                },
+            });
+            event.api.addPanel({
+                id: 'panel_4',
+                component: 'default',
+            });
+            event.api.addPanel({
+                id: 'panel_5',
+                component: 'default',
+            });
+        },
+    },
+    computed: {
+        styleObject() {
+            return {
+                height: `${this.value}%`,
+                width: `${this.value}%`,
+            };
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/resize/vue/src/resize.css b/packages/docs/templates/dockview/resize/vue/src/resize.css
new file mode 100644
index 000000000..fc004aba4
--- /dev/null
+++ b/packages/docs/templates/dockview/resize/vue/src/resize.css
@@ -0,0 +1,23 @@
+.resize-panel {
+    padding: 10px;
+    color: white;
+}
+
+.resize-panel .resize-control {
+    display: flex;
+    height: 18px;
+    line-height: 18px;
+    font-size: 13px;
+
+    span {
+        width: 60px;
+    }
+
+    input {
+        width: 75px;
+    }
+
+    button {
+        width: 50px;
+    }
+}
diff --git a/packages/docs/templates/dockview/scrollbars/react/src/app.css b/packages/docs/templates/dockview/scrollbars/react/src/app.css
deleted file mode 100644
index 7a4203491..000000000
--- a/packages/docs/templates/dockview/scrollbars/react/src/app.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.group-control .action {
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  font-size: 18px;
-  cursor: pointer;
-
-}
-
-.group-control .action:hover {
-    border-radius: 2px;
-    background-color: var(--dv-icon-hover-background-color);
-}
diff --git a/packages/docs/templates/dockview/scrollbars/react/src/app.tsx b/packages/docs/templates/dockview/scrollbars/react/src/app.tsx
index d6e29252c..baa0d283e 100644
--- a/packages/docs/templates/dockview/scrollbars/react/src/app.tsx
+++ b/packages/docs/templates/dockview/scrollbars/react/src/app.tsx
@@ -4,7 +4,6 @@ import {
     DockviewReadyEvent,
     IDockviewPanelProps,
 } from 'dockview';
-import './app.css';
 
 const TEXT =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
diff --git a/packages/docs/templates/dockview/scrollbars/react/src/index.tsx b/packages/docs/templates/dockview/scrollbars/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/scrollbars/react/src/index.tsx
+++ b/packages/docs/templates/dockview/scrollbars/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
new file mode 100644
index 000000000..b0a6ef01a
--- /dev/null
+++ b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
@@ -0,0 +1,101 @@
+import 'dockview-core/dist/styles/dockview.css';
+import { createApp, defineComponent } from 'vue';
+import { DockviewVue } from 'dockview-vue';
+import { DockviewReadyEvent } from 'dockview-core';
+
+const TEXT =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const FixedHeightContainer = defineComponent({
+    name: 'FixedHeightContainer',
+    data() {
+        return {
+            text: [TEXT, '\n\n'].join('').repeat(20),
+        };
+    },
+    template: `
+      <div style="height:100%;color:white;">
+        {{text}}
+      </div>`,
+});
+
+const OverflowContainer = defineComponent({
+    name: 'OverflowContainer',
+    data() {
+        return {
+            text: [TEXT, '\n\n'].join('').repeat(20),
+        };
+    },
+    template: `
+      <div style="height:200px;overflow:auto;color:white;">
+        {{text}}
+      </div>`,
+});
+
+const UserDefinedOverflowContainer = defineComponent({
+    name: 'UserDefinedOverflowContainer',
+    data() {
+        return {
+            text: [TEXT, '\n\n'].join('').repeat(20),
+        };
+    },
+    template: `
+      <div style="height:100%;color:white;">
+        <div style="height:100%;overflow:auto;">
+          {{text}}
+        </div>
+      </div>`,
+});
+
+const App = defineComponent({
+    name: 'App',
+    components: {
+        'dockview-vue': DockviewVue,
+    },
+    data() {
+        return {
+            components: {
+                fixedHeightContainer: FixedHeightContainer,
+                overflowContainer: OverflowContainer,
+                userDefinedOverflowContainer: UserDefinedOverflowContainer,
+            },
+        };
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'fixedHeightContainer',
+                title: 'Panel 1',
+            });
+
+            event.api.addPanel({
+                id: 'panel_2',
+                component: 'overflowContainer',
+                title: 'Panel 2',
+                position: { direction: 'right' },
+            });
+
+            event.api.addPanel({
+                id: 'panel_3',
+                component: 'userDefinedOverflowContainer',
+                title: 'Panel 3',
+                position: { direction: 'right' },
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        style="width:100%;height:100%"
+        class="dockview-theme-abyss"
+        @ready="onReady"
+        :components="components"
+        :disableFloatingGroups=true
+      </dockview-vue>`,
+});
+
+const app = createApp(App);
+app.config.errorHandler = (err) => {
+    console.log(err);
+};
+app.mount(document.getElementById('app')!);
diff --git a/packages/docs/templates/dockview/tabview/react/src/index.tsx b/packages/docs/templates/dockview/tabview/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/tabview/react/src/index.tsx
+++ b/packages/docs/templates/dockview/tabview/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/tabview/vue/src/index.ts b/packages/docs/templates/dockview/tabview/vue/src/index.ts
index b9c6c0bae..bbad09d87 100644
--- a/packages/docs/templates/dockview/tabview/vue/src/index.ts
+++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts
@@ -84,12 +84,10 @@ const App = defineComponent({
                 id: 'panel_1',
                 component: 'default',
             });
-
             event.api.addPanel({
                 id: 'panel_2',
                 component: 'default',
             });
-
             event.api.addPanel({
                 id: 'panel_3',
                 component: 'default',
@@ -102,8 +100,6 @@ const App = defineComponent({
                 id: 'panel_5',
                 component: 'default',
             });
-
-            this.api = event.api;
         },
     },
     template: `
diff --git a/packages/docs/templates/dockview/update-parameters/react/src/app.tsx b/packages/docs/templates/dockview/update-parameters/react/src/app.tsx
index 6362106a7..b0fbf0097 100644
--- a/packages/docs/templates/dockview/update-parameters/react/src/app.tsx
+++ b/packages/docs/templates/dockview/update-parameters/react/src/app.tsx
@@ -29,7 +29,7 @@ const components = {
         }, [running]);
 
         return (
-            <div style={{ height: '100%', padding: '20px', color: 'white' }}>
+            <div style={{ padding: '20px', color: 'white' }}>
                 <div>{props.api.title}</div>
                 <button onClick={() => setRunning(!running)}>
                     {running ? 'Stop' : 'Start'}
diff --git a/packages/docs/templates/dockview/update-parameters/react/src/index.tsx b/packages/docs/templates/dockview/update-parameters/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/update-parameters/react/src/index.tsx
+++ b/packages/docs/templates/dockview/update-parameters/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
index 6b7ad6c98..1a693576a 100644
--- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
@@ -25,31 +25,13 @@ const Panel = defineComponent({
     },
     data() {
         return {
-            running: false,
-            title: '',
+            isRunning: false,
+            title: null,
         };
     },
     methods: {
-        onClick() {
-            this.running = !this.running;
-        },
-    },
-    watch: {
-        running(newValue, oldValue) {
-            if (!newValue) {
-                return;
-            }
-
-            console.log('interval');
-
-            const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
-            }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
-
-            return () => {
-                clearInterval(interval);
-            };
+        toggle() {
+            this.isRunning = !this.isRunning;
         },
     },
     mounted() {
@@ -62,57 +44,8 @@ const Panel = defineComponent({
             disposable.dispose();
         };
     },
-    template: `
-    <div style="height:100%;padding:20px;color:white;">
-      <div>{{title}}</div>
-      <button v-if="running" @click="onClick">Stop</button>
-      <button v-if="!running" @click="onClick">Start</button>
-      <span>{{title}}</span>
-    </div>`,
-});
-
-interface CustomParams {
-    myValue: number;
-}
-
-const Tab = defineComponent({
-    name: 'Tab',
-    props: {
-        api: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['api']
-            >,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['containerApi']
-            >,
-            required: true,
-        },
-        params: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['params']
-            >,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            myValue: this.params.myValue,
-            title: '',
-        };
-    },
-    methods: {
-        onClick() {
-            this.running = !this.running;
-        },
-    },
     watch: {
-        params(newValue, oldValue) {
-            this.myValue = newValue.myValue;
-        },
-        running(newValue, oldValue) {
+        isRunning(newValue, oldValue) {
             if (!newValue) {
                 return;
             }
@@ -127,22 +60,67 @@ const Tab = defineComponent({
             };
         },
     },
-
     template: `
-      <div>
-        <div>custom tab: {{title}}</div>
-        <span>value: {{myValue}}</span>
+      <div style="height:100%;color:white;">
+        <div>{{title}}</div>
+        <button v-if="!isRunning" @click="toggle">Start</button>
+        <button v-if="isRunning" @click="toggle">Stop</button>
       </div>`,
 });
 
+const Tab = defineComponent({
+    name: 'Tab',
+    props: {
+        api: {
+            type: Object as PropType<IDockviewPanelHeaderProps['api']>,
+            required: true,
+        },
+        containerApi: {
+            type: Object as PropType<IDockviewPanelHeaderProps['containerApi']>,
+            required: true,
+        },
+        params: {
+            type: Object as PropType<IDockviewPanelHeaderProps['params']>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            title: '',
+            value: null,
+        };
+    },
+    mounted() {
+        const disposable = this.api.onDidTitleChange(() => {
+            this.title = this.api.title;
+        });
+
+        const disposable2 = this.api.onDidParametersChange(() => {
+            this.value = this.params.myValue;
+        });
+
+        this.title = this.api.title;
+        this.value = this.params.myValue;
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+        };
+    },
+    template: `
+    <div>
+      <div>custom tab: {{title}}</div>
+      <div>value: {{value}}</div>
+    </div>`,
+});
+
 const App = defineComponent({
     name: 'App',
     components: {
         'dockview-vue': DockviewVue,
         Panel,
-        Tab,
     },
-    setup() {
+    data() {
         return {
             components: {
                 default: Panel,
diff --git a/packages/docs/templates/dockview/update-title/react/src/index.tsx b/packages/docs/templates/dockview/update-title/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/update-title/react/src/index.tsx
+++ b/packages/docs/templates/dockview/update-title/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/update-title/vue/src/index.ts b/packages/docs/templates/dockview/update-title/vue/src/index.ts
index 8dcc57234..48b84bbc7 100644
--- a/packages/docs/templates/dockview/update-title/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts
@@ -1,7 +1,10 @@
 import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
-import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
+import {
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview-core';
 
 const Panel = defineComponent({
     name: 'Panel',
@@ -61,7 +64,7 @@ const App = defineComponent({
         'dockview-vue': DockviewVue,
         Panel,
     },
-    setup() {
+    data() {
         return {
             components: {
                 default: Panel,
diff --git a/packages/docs/templates/dockview/watermark/react/src/index.tsx b/packages/docs/templates/dockview/watermark/react/src/index.tsx
index 9585f79e1..68cebbec0 100644
--- a/packages/docs/templates/dockview/watermark/react/src/index.tsx
+++ b/packages/docs/templates/dockview/watermark/react/src/index.tsx
@@ -9,9 +9,5 @@ const rootElement = document.getElementById('app');
 if (rootElement) {
     const root = ReactDOMClient.createRoot(rootElement);
 
-    root.render(
-        <div className="app">
-            <App />
-        </div>
-    );
+    root.render(<App />);
 }
diff --git a/packages/docs/templates/dockview/watermark/vue/src/index.ts b/packages/docs/templates/dockview/watermark/vue/src/index.ts
index 8d1655f84..047e1bc55 100644
--- a/packages/docs/templates/dockview/watermark/vue/src/index.ts
+++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts
@@ -83,9 +83,6 @@ const App = defineComponent({
         Panel,
     },
     data() {
-        return { api: null as DockviewApi | null };
-    },
-    setup() {
         return {
             components: {
                 default: Panel,
@@ -102,8 +99,6 @@ const App = defineComponent({
             this.api.addGroup();
         },
         onReady(event: DockviewReadyEvent) {
-            console.log('ready');
-
             event.api.fromJSON({
                 grid: {
                     orientation: Orientation.HORIZONTAL,
@@ -113,8 +108,6 @@ const App = defineComponent({
                 },
                 panels: {},
             });
-
-            this.api = event.api;
         },
     },
     template: `
diff --git a/yarn.lock b/yarn.lock
index 5fc8a5e25..676e1ffed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1961,6 +1961,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.22.6":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
@@ -2338,7 +2345,7 @@
     "@docusaurus/theme-search-algolia" "3.1.1"
     "@docusaurus/types" "3.1.1"
 
-"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -6593,6 +6600,21 @@ concat-with-sourcemaps@^1.0.0, concat-with-sourcemaps@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
+concurrently@^8.2.2:
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-8.2.2.tgz#353141985c198cfa5e4a3ef90082c336b5851784"
+  integrity sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==
+  dependencies:
+    chalk "^4.1.2"
+    date-fns "^2.30.0"
+    lodash "^4.17.21"
+    rxjs "^7.8.1"
+    shell-quote "^1.8.1"
+    spawn-command "0.0.2"
+    supports-color "^8.1.1"
+    tree-kill "^1.2.2"
+    yargs "^17.7.2"
+
 config-chain@^1.1.11:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
@@ -7077,6 +7099,13 @@ data-urls@^5.0.0:
     whatwg-mimetype "^4.0.0"
     whatwg-url "^14.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -9200,11 +9229,6 @@ has-yarn@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-3.0.0.tgz#c3c21e559730d1d3b57e28af1f30d06fac38147d"
   integrity sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==
 
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
 hasown@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
@@ -14311,6 +14335,14 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
@@ -14947,15 +14979,6 @@ rollup-plugin-postcss@^4.0.2:
     safe-identifier "^0.4.2"
     style-inject "^0.3.0"
 
-rollup-plugin-vue@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-vue/-/rollup-plugin-vue-6.0.0.tgz#e379e93e5ae9a8648522f698be2e452e8672aaf2"
-  integrity sha512-oVvUd84d5u73M2HYM3XsMDLtZRIA/tw2U0dmHlXU2UWP5JARYHzh/U9vcxaN/x/9MrepY7VH3pHFeOhrWpxs/Q==
-  dependencies:
-    debug "^4.1.1"
-    hash-sum "^2.0.0"
-    rollup-pluginutils "^2.8.2"
-
 rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
@@ -15037,7 +15060,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rxjs@^7.5.5:
+rxjs@^7.5.5, rxjs@^7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
   integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
@@ -15589,6 +15612,11 @@ sparkles@^1.0.0:
   resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.1.tgz#008db65edce6c50eec0c5e228e1945061dd0437c"
   integrity sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==
 
+spawn-command@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+  integrity sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==
+
 spdx-correct@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.2.0.tgz#4f5ab0668f0059e34f9c00dce331784a12de4e9c"
@@ -15753,7 +15781,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15771,6 +15799,15 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -15811,7 +15848,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15832,6 +15869,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -15941,7 +15985,7 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
+supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -16246,6 +16290,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-lines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
@@ -16917,6 +16966,11 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
+vue-sfc-loader@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/vue-sfc-loader/-/vue-sfc-loader-0.1.0.tgz#630b8a47ec79e3a80bd9ba781967f6ad23bb149d"
+  integrity sha512-jWKKX0uGcW2nyiSv3REn4n86V4eYzPbsVWQRnxRO/bxKGrJrAMFl2aYD+38MjPsL6MblzFS/SG0jRcSkzGrElA==
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
@@ -17267,7 +17321,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -17293,6 +17347,15 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -17458,7 +17521,7 @@ yargs-parser@^5.0.1:
     camelcase "^3.0.0"
     object.assign "^4.1.0"
 
-yargs@17.7.2, yargs@^17.3.1, yargs@^17.6.2:
+yargs@17.7.2, yargs@^17.3.1, yargs@^17.6.2, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==