diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index cd8e8a5da..dbb7e9af4 100644
--- a/packages/background/src/Background.vue
+++ b/packages/background/src/Background.vue
@@ -49,6 +49,7 @@ const d = computed(
 <script lang="ts">
 export default {
   name: 'Background',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/controls/src/ControlButton.vue b/packages/controls/src/ControlButton.vue
index 6c074f575..3188643e3 100644
--- a/packages/controls/src/ControlButton.vue
+++ b/packages/controls/src/ControlButton.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 export default {
   name: 'ControlButton',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/controls/src/Controls.vue b/packages/controls/src/Controls.vue
index a85ccdb18..505d26262 100644
--- a/packages/controls/src/Controls.vue
+++ b/packages/controls/src/Controls.vue
@@ -52,6 +52,7 @@ const onInteractiveChangeHandler = () => {
 <script lang="ts">
 export default {
   name: 'Controls',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/A11y/A11yDescriptions.vue b/packages/core/src/components/A11y/A11yDescriptions.vue
index 473f045a9..c8994cd30 100644
--- a/packages/core/src/components/A11y/A11yDescriptions.vue
+++ b/packages/core/src/components/A11y/A11yDescriptions.vue
@@ -17,6 +17,12 @@ const ariaLiveStyle: CSSProperties = {
 }
 </script>
 
+<script lang="ts">
+export default {
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div :id="`${ARIA_NODE_DESC_KEY}-${id}`" style="display: none">
     Press enter or space to select a node.
diff --git a/packages/core/src/components/ConnectionLine/ConnectionLine.vue b/packages/core/src/components/ConnectionLine/ConnectionLine.vue
index c9dcb6190..947866ae4 100644
--- a/packages/core/src/components/ConnectionLine/ConnectionLine.vue
+++ b/packages/core/src/components/ConnectionLine/ConnectionLine.vue
@@ -93,6 +93,7 @@ const dAttr = computed(() => {
 <script lang="ts">
 export default {
   name: 'ConnectionLine',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts
index 56330383c..c1fd69727 100644
--- a/packages/core/src/components/Edges/BaseEdge.ts
+++ b/packages/core/src/components/Edges/BaseEdge.ts
@@ -71,5 +71,6 @@ BaseEdge.props = [
 ]
 
 BaseEdge.inheritAttrs = false
+BaseEdge.compatConfig = { MODE: 3 }
 
 export default BaseEdge
diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts
index eb4310952..96d02ad34 100644
--- a/packages/core/src/components/Edges/BezierEdge.ts
+++ b/packages/core/src/components/Edges/BezierEdge.ts
@@ -42,5 +42,6 @@ BezierEdge.props = [
 ]
 
 BezierEdge.inheritAttrs = false
+BezierEdge.compatConfig = { MODE: 3 }
 
 export default BezierEdge
diff --git a/packages/core/src/components/Edges/EdgeAnchor.ts b/packages/core/src/components/Edges/EdgeAnchor.ts
index 2b89c6919..bcd68f358 100644
--- a/packages/core/src/components/Edges/EdgeAnchor.ts
+++ b/packages/core/src/components/Edges/EdgeAnchor.ts
@@ -46,5 +46,6 @@ const EdgeAnchor: FunctionalComponent<Props> = function ({ radius = 10, centerX
 }
 
 EdgeAnchor.props = ['radius', 'centerX', 'centerY', 'position']
+EdgeAnchor.compatConfig = { MODE: 3 }
 
 export default EdgeAnchor
diff --git a/packages/core/src/components/Edges/EdgeLabelRenderer.vue b/packages/core/src/components/Edges/EdgeLabelRenderer.vue
index bc0f31539..8ab8bebd3 100644
--- a/packages/core/src/components/Edges/EdgeLabelRenderer.vue
+++ b/packages/core/src/components/Edges/EdgeLabelRenderer.vue
@@ -7,6 +7,7 @@ const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName(
 <script lang="ts">
 export default {
   name: 'EdgeLabelRenderer',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Edges/EdgeText.vue b/packages/core/src/components/Edges/EdgeText.vue
index 7a89975f0..124ce72a9 100644
--- a/packages/core/src/components/Edges/EdgeText.vue
+++ b/packages/core/src/components/Edges/EdgeText.vue
@@ -38,6 +38,7 @@ function getBox() {
 <script lang="ts">
 export default {
   name: 'EdgeText',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index 14ef4891d..cbb4a465b 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -14,6 +14,7 @@ interface Props {
 
 const EdgeWrapper = defineComponent({
   name: 'Edge',
+  compatConfig: { MODE: 3 },
   props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
   setup(props: Props) {
     const {
diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
index 9d6b36c29..073ef6352 100644
--- a/packages/core/src/components/Edges/SimpleBezierEdge.ts
+++ b/packages/core/src/components/Edges/SimpleBezierEdge.ts
@@ -41,5 +41,6 @@ SimpleBezierEdge.props = [
 ]
 
 SimpleBezierEdge.inheritAttrs = false
+SimpleBezierEdge.compatConfig = { MODE: 3 }
 
 export default SimpleBezierEdge
diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
index add3e84ba..dd3b8e937 100644
--- a/packages/core/src/components/Edges/SmoothStepEdge.ts
+++ b/packages/core/src/components/Edges/SmoothStepEdge.ts
@@ -43,5 +43,6 @@ SmoothStepEdge.props = [
 ]
 
 SmoothStepEdge.inheritAttrs = false
+SmoothStepEdge.compatConfig = { MODE: 3 }
 
 export default SmoothStepEdge
diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts
index c645e5b7a..e47a4f301 100644
--- a/packages/core/src/components/Edges/StepEdge.ts
+++ b/packages/core/src/components/Edges/StepEdge.ts
@@ -25,5 +25,6 @@ StepEdge.props = [
 ]
 
 StepEdge.inheritAttrs = false
+StepEdge.compatConfig = { MODE: 3 }
 
 export default StepEdge
diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts
index 640a91da3..ff1e2da55 100644
--- a/packages/core/src/components/Edges/StraightEdge.ts
+++ b/packages/core/src/components/Edges/StraightEdge.ts
@@ -31,5 +31,6 @@ StraightEdge.props = [
 ]
 
 StraightEdge.inheritAttrs = false
+StraightEdge.compatConfig = { MODE: 3 }
 
 export default StraightEdge
diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index 8e418494d..9c816f51e 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -74,6 +74,7 @@ onMounted(() => {
 <script lang="ts">
 export default {
   name: 'Handle',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Nodes/DefaultNode.ts b/packages/core/src/components/Nodes/DefaultNode.ts
index 4c6afb11e..ba0c9e371 100644
--- a/packages/core/src/components/Nodes/DefaultNode.ts
+++ b/packages/core/src/components/Nodes/DefaultNode.ts
@@ -20,5 +20,6 @@ const DefaultNode: FunctionalComponent<NodeProps> = function ({
 
 DefaultNode.props = ['sourcePosition', 'targetPosition', 'label', 'isValidTargetPos', 'isValidSourcePos', 'connectable']
 DefaultNode.inheritAttrs = false
+DefaultNode.compatConfig = { MODE: 3 }
 
 export default DefaultNode
diff --git a/packages/core/src/components/Nodes/InputNode.ts b/packages/core/src/components/Nodes/InputNode.ts
index 0728e4ee8..81fa52bcd 100644
--- a/packages/core/src/components/Nodes/InputNode.ts
+++ b/packages/core/src/components/Nodes/InputNode.ts
@@ -17,5 +17,6 @@ const InputNode: FunctionalComponent<NodeProps> = function ({
 
 InputNode.props = ['sourcePosition', 'label', 'isValidSourcePos', 'connectable']
 InputNode.inheritAttrs = false
+InputNode.compatConfig = { MODE: 3 }
 
 export default InputNode
diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue
index cab21f97b..ae1b9ac18 100644
--- a/packages/core/src/components/Nodes/NodeWrapper.vue
+++ b/packages/core/src/components/Nodes/NodeWrapper.vue
@@ -242,6 +242,7 @@ function onKeyDown(event: KeyboardEvent) {
 export default {
   name: 'Node',
   inheritAttrs: false,
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Nodes/OutputNode.ts b/packages/core/src/components/Nodes/OutputNode.ts
index 9647a1b7e..5d677ffcc 100644
--- a/packages/core/src/components/Nodes/OutputNode.ts
+++ b/packages/core/src/components/Nodes/OutputNode.ts
@@ -17,5 +17,6 @@ const OutputNode: FunctionalComponent<NodeProps> = function ({
 
 OutputNode.props = ['targetPosition', 'label', 'isValidTargetPos', 'connectable']
 OutputNode.inheritAttrs = false
+OutputNode.compatConfig = { MODE: 3 }
 
 export default OutputNode
diff --git a/packages/core/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue
index 87d89c07c..2a7fa3138 100644
--- a/packages/core/src/components/NodesSelection/NodesSelection.vue
+++ b/packages/core/src/components/NodesSelection/NodesSelection.vue
@@ -55,6 +55,7 @@ function onKeyDown(event: KeyboardEvent) {
 <script lang="ts">
 export default {
   name: 'NodesSelection',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/components/Panel/Panel.vue b/packages/core/src/components/Panel/Panel.vue
index 86acf6f6f..199268380 100644
--- a/packages/core/src/components/Panel/Panel.vue
+++ b/packages/core/src/components/Panel/Panel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { PanelProps } from '../../types'
+import type { PanelProps } from '../../types/panel'
 
 const props = defineProps<PanelProps>()
 
@@ -8,6 +8,13 @@ const { userSelectionActive } = useVueFlow()
 const positionClasses = computed(() => `${props.position}`.split('-'))
 </script>
 
+<script lang="ts">
+export default {
+  name: 'Panel',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div class="vue-flow__panel" :class="positionClasses" :style="{ pointerEvents: userSelectionActive ? 'none' : 'all' }">
     <slot />
diff --git a/packages/core/src/components/UserSelection/UserSelection.vue b/packages/core/src/components/UserSelection/UserSelection.vue
index 99fe3c010..41fbf7e88 100644
--- a/packages/core/src/components/UserSelection/UserSelection.vue
+++ b/packages/core/src/components/UserSelection/UserSelection.vue
@@ -2,6 +2,13 @@
 const { userSelectionRect } = useVueFlow()
 </script>
 
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div
     class="vue-flow__selection vue-flow__container"
diff --git a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
index da8c582d0..45e32d148 100644
--- a/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -89,6 +89,7 @@ function getType(type?: string, template?: GraphEdge['template']) {
 <script lang="ts">
 export default {
   name: 'Edges',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/EdgeRenderer/Marker.vue b/packages/core/src/container/EdgeRenderer/Marker.vue
index bab8f2076..7aeed4e0d 100644
--- a/packages/core/src/container/EdgeRenderer/Marker.vue
+++ b/packages/core/src/container/EdgeRenderer/Marker.vue
@@ -17,6 +17,7 @@ const {
 <script lang="ts">
 export default {
   name: 'MarkerType',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
index 43b781f40..5672a5b5f 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -33,6 +33,7 @@ const markers = computed(() => {
 <script lang="ts">
 export default {
   name: 'MarkerDefinitions',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/NodeRenderer/NodeRenderer.vue b/packages/core/src/container/NodeRenderer/NodeRenderer.vue
index c97ba9dde..7a844920f 100644
--- a/packages/core/src/container/NodeRenderer/NodeRenderer.vue
+++ b/packages/core/src/container/NodeRenderer/NodeRenderer.vue
@@ -78,6 +78,7 @@ function getType(type?: string, template?: GraphNode['template']) {
 <script lang="ts">
 export default {
   name: 'Nodes',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index a6f9c56f9..c0030bafb 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -215,6 +215,7 @@ function onMouseEnter(event: MouseEvent) {
 <script lang="ts">
 export default {
   name: 'Pane',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue
index e7a70dfa3..5c7b44566 100644
--- a/packages/core/src/container/Viewport/Transform.vue
+++ b/packages/core/src/container/Viewport/Transform.vue
@@ -42,6 +42,7 @@ onMounted(async () => {
 <script lang="ts">
 export default {
   name: 'Transform',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index afe84ccb5..b75dd55f0 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -299,6 +299,7 @@ function isWrappedWithClass(event: Event, className: string | undefined) {
 <script lang="ts">
 export default {
   name: 'Viewport',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/core/src/container/VueFlow/VueFlow.vue b/packages/core/src/container/VueFlow/VueFlow.vue
index 33bd8ad5c..c34dbc9dc 100644
--- a/packages/core/src/container/VueFlow/VueFlow.vue
+++ b/packages/core/src/container/VueFlow/VueFlow.vue
@@ -153,6 +153,7 @@ defineExpose<VueFlowStore>({
 <script lang="ts">
 export default {
   name: 'VueFlow',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue
index 0be0a15fa..b33acc2b0 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/minimap/src/MiniMap.vue
@@ -191,6 +191,7 @@ const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
 <script lang="ts">
 export default {
   name: 'MiniMap',
+  compatConfig: { MODE: 3 },
 }
 </script>
 
diff --git a/packages/minimap/src/MiniMapNode.ts b/packages/minimap/src/MiniMapNode.ts
index cf60cc17f..eb9b5e12d 100644
--- a/packages/minimap/src/MiniMapNode.ts
+++ b/packages/minimap/src/MiniMapNode.ts
@@ -4,6 +4,7 @@ import { MiniMapSlots } from './types'
 
 export default defineComponent({
   name: 'MiniMapNode',
+  compatConfig: { MODE: 3 },
   props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering', 'type'],
   emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
   setup(props: MiniMapNodeProps, { attrs, emit }) {
diff --git a/packages/node-resizer/src/NodeResizer.vue b/packages/node-resizer/src/NodeResizer.vue
index c858f9382..c35a93186 100644
--- a/packages/node-resizer/src/NodeResizer.vue
+++ b/packages/node-resizer/src/NodeResizer.vue
@@ -22,6 +22,7 @@ const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left']
 <script lang="ts">
 export default {
   name: 'NodeResizer',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>
diff --git a/packages/node-resizer/src/ResizeControl.vue b/packages/node-resizer/src/ResizeControl.vue
index 3d68c3eaf..87c5b91fc 100644
--- a/packages/node-resizer/src/ResizeControl.vue
+++ b/packages/node-resizer/src/ResizeControl.vue
@@ -215,6 +215,13 @@ const colorStyleProp = computed(() => (props.variant === ResizeControlVariant.Li
 const controlStyle = computed(() => (props.color ? { [colorStyleProp.value]: props.color } : {}))
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ResizeControl',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <div
     ref="resizeControlRef"
diff --git a/packages/node-resizer/src/ResizeControlLine.vue b/packages/node-resizer/src/ResizeControlLine.vue
index 432f74211..11e5e19b5 100644
--- a/packages/node-resizer/src/ResizeControlLine.vue
+++ b/packages/node-resizer/src/ResizeControlLine.vue
@@ -12,6 +12,13 @@ const emits = defineEmits<{
 }>()
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ResizeControlLine',
+  compatConfig: { MODE: 3 },
+}
+</script>
+
 <template>
   <ResizeControl
     v-bind="props"
diff --git a/packages/node-toolbar/src/NodeToolbar.vue b/packages/node-toolbar/src/NodeToolbar.vue
index 7a49b0f2d..89dee7b2b 100644
--- a/packages/node-toolbar/src/NodeToolbar.vue
+++ b/packages/node-toolbar/src/NodeToolbar.vue
@@ -77,6 +77,7 @@ const wrapperStyle = computed<CSSProperties>(() => ({
 <script lang="ts">
 export default {
   name: 'NodeToolbar',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>
diff --git a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
index 4e216f1e4..c341d1bb4 100644
--- a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
+++ b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue
@@ -30,6 +30,7 @@ const attrs = useAttrs() as { style: CSSProperties }
 <script lang="ts">
 export default {
   name: 'PerfectArrow',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>
diff --git a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
index a676e9b0a..a5daaa060 100644
--- a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
+++ b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue
@@ -80,6 +80,7 @@ const attrs: any = useAttrs()
 <script lang="ts">
 export default {
   name: 'PathFindingEdge',
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
 }
 </script>