diff --git a/package.json b/package.json
index 6ee0ddf8..c74f55aa 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "d3": "^7.1.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "defu": "^5.0.0",
     "microdiff": "^1.2.0",
     "pinia": "^2.0.0-rc.10"
   },
diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index e1ed7390..80aa4219 100644
--- a/src/additional-components/Background/Background.vue
+++ b/src/additional-components/Background/Background.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { SVGAttributes } from 'vue'
 import { BackgroundVariant } from '../../types'
 import { useStore } from '../../composables'
 
-export interface BackgroundProps extends SVGAttributes {
+interface BackgroundProps {
   variant?: BackgroundVariant
   gap?: number
   color?: string
@@ -47,6 +46,11 @@ const d = computed(
     }`,
 )
 </script>
+<script lang="ts">
+export default {
+  name: 'Background',
+}
+</script>
 <template>
   <svg class="vue-flow__background" style="width: 100%; height: 100%">
     <pattern
diff --git a/src/additional-components/Controls/ControlButton.vue b/src/additional-components/Controls/ControlButton.vue
index becc783a..f2c11d6d 100644
--- a/src/additional-components/Controls/ControlButton.vue
+++ b/src/additional-components/Controls/ControlButton.vue
@@ -1,12 +1,10 @@
-<script lang="ts" setup>
-import { ButtonHTMLAttributes } from 'vue'
-
-export interface ControlButtonProps extends ButtonHTMLAttributes {}
-
-const props: any = defineProps<ControlButtonProps>()
+<script lang="ts">
+export default {
+  name: 'ControlButton',
+}
 </script>
 <template>
-  <button class="vue-flow__controls-button" v-bind="props">
+  <button class="vue-flow__controls-button">
     <slot></slot>
   </button>
 </template>
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index b9264c6d..2d7243d7 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/src/additional-components/Controls/Controls.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
 import { FitViewParams } from '../../types'
 import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
@@ -9,7 +8,7 @@ import Fitview from '~/assets/icons/fitview.svg'
 import Lock from '~/assets/icons/lock.svg'
 import Unlock from '~/assets/icons/unlock.svg'
 
-export interface ControlProps extends HTMLAttributes {
+interface ControlProps {
   showZoom?: boolean
   showFitView?: boolean
   showInteractive?: boolean
@@ -55,6 +54,11 @@ const onInteractiveChangeHandler = () => {
   emit('interaction-change', !isInteractive.value)
 }
 </script>
+<script lang="ts">
+export default {
+  name: 'Controls',
+}
+</script>
 <template>
   <div class="vue-flow__controls">
     <template v-if="props.showZoom">
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index 8390822d..7e2369ca 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import { HTMLAttributes } from 'vue'
-import { Node } from '../../types'
+import { ShapeRendering, StringFunc } from '../../types'
 import { useStore, useWindow } from '../../composables'
+import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import MiniMapNode from './MiniMapNode.vue'
-import { getBoundsofRects, getRectOfNodes } from '~/utils'
 
-type StringFunc = (node: Node) => string
-type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
-
-export interface MiniMapProps extends HTMLAttributes {
+interface MiniMapProps {
   nodeColor?: string | StringFunc
   nodeStrokeColor?: string | StringFunc
   nodeClassName?: string | StringFunc
@@ -82,6 +78,11 @@ const d = computed(() => {
   else return ''
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'MiniMap',
+}
+</script>
 <template>
   <svg
     :width="elementWidth"
diff --git a/src/additional-components/MiniMap/MiniMapNode.vue b/src/additional-components/MiniMap/MiniMapNode.vue
index b9f83f2a..804bb138 100644
--- a/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/src/additional-components/MiniMap/MiniMapNode.vue
@@ -12,6 +12,7 @@ interface MiniMapNodeProps {
   strokeColor?: string
   strokeWidth?: number
 }
+
 const props = withDefaults(defineProps<MiniMapNodeProps>(), {
   shapeRendering: 'geometricPrecision',
 })
@@ -20,6 +21,11 @@ const attrs = useAttrs()
 const styles = (attrs.style ?? {}) as CSSProperties
 const fill = computed(() => props.color || (styles.background as string) || styles.backgroundColor)
 </script>
+<script lang="ts">
+export default {
+  name: 'MiniMapNode',
+}
+</script>
 <template>
   <rect
     class="vue-flow__minimap-node"
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index 5f6023df..d7dcb72e 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/src/components/ConnectionLine/ConnectionLine.vue
@@ -72,6 +72,11 @@ const dAttr = computed(() => {
   return path
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'ConnectionLine',
+}
+</script>
 <template>
   <g class="vue-flow__connection">
     <slot
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 43288977..79c8acb8 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -61,6 +61,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'BezierEdge',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/Edges/EdgeAnchor.vue b/src/components/Edges/EdgeAnchor.vue
index caa7a2f1..603a2c15 100644
--- a/src/components/Edges/EdgeAnchor.vue
+++ b/src/components/Edges/EdgeAnchor.vue
@@ -39,6 +39,11 @@ const cy = computed(() => {
   else return val
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'EdgeAnchor',
+}
+</script>
 <template>
   <circle class="vue-flow__edgeupdater" :cx="cx" :cy="cy" :r="props.radius" stroke="transparent" fill="transparent" />
 </template>
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index b130a617..3cdaf865 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -30,6 +30,11 @@ const { width, height, x, y } = useElementBounding(edgeRef)
 const transform = computed(() => `translate(${props.x - width.value / 2 || 0} ${props.y - height.value / 2 || 0})`)
 const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[1]])
 </script>
+<script lang="ts">
+export default {
+  name: 'EdgeText',
+}
+</script>
 <template>
   <g :transform="transform" class="vue-flow__edge-textwrapper">
     <rect
diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue
index cab48768..713f9cb1 100644
--- a/src/components/Edges/EdgeWrapper.vue
+++ b/src/components/Edges/EdgeWrapper.vue
@@ -130,6 +130,11 @@ const edgePos = computed(() =>
 )
 const elementsSelectable = computed(() => store.elementsSelectable)
 </script>
+<script lang="ts">
+export default {
+  name: 'Edge',
+}
+</script>
 <template>
   <g
     v-show="!props.edge.isHidden && isVisible(edgePos)"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 057ce2de..7e7563c0 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -64,6 +64,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'SmoothStepEdge',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index d01fb66e..7a029fb6 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -43,6 +43,11 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
 })
 const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
+<script lang="ts">
+export default {
+  name: 'StepEdge',
+}
+</script>
 <template>
   <SmoothStepEdge v-bind="{ ...props, ...attrs }" :border-radius="0">
     <slot />
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index 418c03e4..b1b09c0d 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -66,6 +66,7 @@ const attrs = useAttrs() as Record<'style', CSSProperties>
 </script>
 <script lang="ts">
 export default {
+  name: 'StraightEdge',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index 76bf6898..5a5a74a6 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -25,6 +25,11 @@ const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
   handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection ?? (() => true))
 </script>
+<script lang="ts">
+export default {
+  name: 'Handle',
+}
+</script>
 <template>
   <div
     :data-handleid="props.id"
diff --git a/src/components/Loading/LoadingIndicator.vue b/src/components/Loading/LoadingIndicator.vue
index 9dcefbea..e0135fc1 100644
--- a/src/components/Loading/LoadingIndicator.vue
+++ b/src/components/Loading/LoadingIndicator.vue
@@ -11,6 +11,11 @@ const props = withDefaults(defineProps<LoadingIndicatorProps>(), {
   label: 'Almost ready...',
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'VueFlowLoading',
+}
+</script>
 <template>
   <div class="vue-flow__loading-indicator" :class="props.class" :style="props.style">
     <slot name="label"> {{ props.label }} </slot>
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index 403bebac..5b1018bf 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/src/components/Nodes/DefaultNode.vue
@@ -18,6 +18,7 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'DefaultNode',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index c13066b7..e376bd15 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/src/components/Nodes/InputNode.vue
@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'InputNode',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index f3e1f1ec..64bf3166 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/src/components/Nodes/NodeWrapper.vue
@@ -141,6 +141,11 @@ onMounted(() => {
   })
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'Node',
+}
+</script>
 <template>
   <DraggableCore
     cancel=".nodrag"
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index ab9b374d..b96f2b03 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/src/components/Nodes/OutputNode.vue
@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 </script>
 <script lang="ts">
 export default {
+  name: 'OutputNode',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index 567b37fb..f938bead 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -58,6 +58,11 @@ const onContextMenu = (event: MouseEvent) => {
 
 const transform = computed(() => store.transform)
 </script>
+<script lang="ts">
+export default {
+  name: 'NodesSelection',
+}
+</script>
 <template>
   <div
     class="vue-flow__nodesselection"
diff --git a/src/components/UserSelection/SelectionRect.vue b/src/components/UserSelection/SelectionRect.vue
index 07097551..3e682ece 100644
--- a/src/components/UserSelection/SelectionRect.vue
+++ b/src/components/UserSelection/SelectionRect.vue
@@ -8,6 +8,11 @@ interface SelectionRectProps {
 
 const props = defineProps<SelectionRectProps>()
 </script>
+<script lang="ts">
+export default {
+  name: 'SelectionRect',
+}
+</script>
 <template>
   <div
     class="vue-flow__selection"
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index ec7865b3..42bbf774 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/src/components/UserSelection/UserSelection.vue
@@ -38,6 +38,11 @@ useEventListener(el, 'click', onMouseUp)
 useEventListener(el, 'mouseup', onMouseUp)
 useEventListener(el, 'mouseleave', onMouseLeave)
 </script>
+<script lang="ts">
+export default {
+  name: 'UserSelection',
+}
+</script>
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index d231886b..f1356a25 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -29,6 +29,11 @@ const connectionLineVisible = computed(
 const dimensions = computed(() => store.dimensions)
 const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
 </script>
+<script lang="ts">
+export default {
+  name: 'Edges',
+}
+</script>
 <template>
   <svg :width="dimensions.width" :height="dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
diff --git a/src/container/EdgeRenderer/Marker.vue b/src/container/EdgeRenderer/Marker.vue
index c2c6a807..3a61b686 100644
--- a/src/container/EdgeRenderer/Marker.vue
+++ b/src/container/EdgeRenderer/Marker.vue
@@ -5,6 +5,11 @@ interface MarkerProps {
 
 const props = defineProps<MarkerProps>()
 </script>
+<script lang="ts">
+export default {
+  name: 'Marker',
+}
+</script>
 <template>
   <marker
     :id="props.id"
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.vue b/src/container/EdgeRenderer/MarkerDefinitions.vue
index 1117ccd8..c5cd2b5d 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -9,6 +9,11 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
   color: '',
 })
 </script>
+<script lang="ts">
+export default {
+  name: 'MarkerDefinitions',
+}
+</script>
 <template>
   <defs>
     <Marker id="vue-flow__arrowclosed">
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index 6a7bb2a3..7247ee70 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/src/container/NodeRenderer/NodeRenderer.vue
@@ -18,6 +18,11 @@ const store = useStore()
 const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.snapGrid ?? store.snapGrid : undefined))
 </script>
+<script lang="ts">
+export default {
+  name: 'Nodes',
+}
+</script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
     <Node
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 793b6118..261ae170 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -59,6 +59,7 @@ const nodesSelectionActive = computed(() => store.nodesSelectionActive)
 </script>
 <script lang="ts">
 export default {
+  name: 'SelectionPane',
   inheritAttrs: false,
 }
 </script>
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index e4779440..4e9df7b8 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -9,7 +9,6 @@ import {
   KeyCode,
   TranslateExtent,
   NodeExtent,
-  FlowOptions,
   NodeTypes,
   EdgeTypes,
   FlowStore,
@@ -25,7 +24,7 @@ import LoadingIndicator from '../../components/Loading/LoadingIndicator.vue'
 import { createHooks, initFlow, useZoomPanHelper } from '../../composables'
 import { onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
-export interface FlowProps extends Partial<FlowOptions> {
+interface FlowProps {
   id?: string
   store?: FlowStore
   modelValue?: Elements
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index 9875d19e..ed4da748 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -203,6 +203,11 @@ watch(
   { flush: 'pre' },
 )
 </script>
+<script lang="ts">
+export default {
+  name: 'ZoomPane',
+}
+</script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot
diff --git a/yarn.lock b/yarn.lock
index 84d71155..255fb734 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1974,6 +1974,11 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+defu@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.0.tgz#5768f0d402a555bfc4c267246b20f82ce8b5a10b"
+  integrity sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ==
+
 del@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"