diff --git a/packages/renderer-vue/package.json b/packages/renderer-vue/package.json
index 69c28bd6..8b0e7d24 100644
--- a/packages/renderer-vue/package.json
+++ b/packages/renderer-vue/package.json
@@ -5,6 +5,7 @@
     "author": "newcat <freddy.wagner@web.de>",
     "homepage": "https://newcat.github.io/baklavajs",
     "license": "MIT",
+    "type": "module",
     "files": [
         "dist/**/!(report.html)"
     ],
diff --git a/packages/renderer-vue/src/components/Minimap.vue b/packages/renderer-vue/src/components/Minimap.vue
index 5a50a33a..e2fa2df6 100644
--- a/packages/renderer-vue/src/components/Minimap.vue
+++ b/packages/renderer-vue/src/components/Minimap.vue
@@ -10,8 +10,8 @@
     />
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { AbstractNode } from "@baklavajs/core";
 import getDomElements, { getDomElementOfNode } from "../connection/domResolver";
 import { getPortCoordinates } from "../connection/portCoordinates";
@@ -24,222 +24,229 @@ interface IRect {
     y2: number;
 }
 
-export default defineComponent({
-    setup() {
-        const { viewModel } = useViewModel();
-        const { graph } = useGraph();
-
-        const canvas = ref<HTMLCanvasElement | null>(null);
-        const showViewBounds = ref(false);
-
-        let ctx: CanvasRenderingContext2D | undefined;
-        let dragging = false;
-        let bounds: IRect = { x1: 0, y1: 0, x2: 0, y2: 0 };
-
-        const updateCanvas = () => {
-            if (!ctx) {
-                return;
-            }
-
-            const nodeCoords = new Map<AbstractNode, IRect>();
-            const nodeDomElements = new Map<AbstractNode, HTMLElement | null>();
-            for (const n of graph.value.nodes) {
-                const domElement = getDomElementOfNode(n);
-                const width = domElement?.clientWidth ?? 0;
-                const height = domElement?.clientHeight ?? 0;
-                const posX = n.position?.x ?? 0;
-                const posY = n.position?.y ?? 0;
-                nodeCoords.set(n, {
-                    x1: posX,
-                    y1: posY,
-                    x2: posX + width,
-                    y2: posY + height,
-                });
-                nodeDomElements.set(n, domElement);
-            }
-
-            // get bound rectangle
-            const newBounds: IRect = {
-                x1: Number.MAX_SAFE_INTEGER,
-                y1: Number.MAX_SAFE_INTEGER,
-                x2: Number.MIN_SAFE_INTEGER,
-                y2: Number.MIN_SAFE_INTEGER,
-            };
-            for (const nc of nodeCoords.values()) {
-                if (nc.x1 < newBounds.x1) {
-                    newBounds.x1 = nc.x1;
-                }
-                if (nc.y1 < newBounds.y1) {
-                    newBounds.y1 = nc.y1;
-                }
-                if (nc.x2 > newBounds.x2) {
-                    newBounds.x2 = nc.x2;
-                }
-                if (nc.y2 > newBounds.y2) {
-                    newBounds.y2 = nc.y2;
-                }
-            }
-
-            // add some padding
-            const padding = 50;
-            newBounds.x1 -= padding;
-            newBounds.y1 -= padding;
-            newBounds.x2 += padding;
-            newBounds.y2 += padding;
-            bounds = newBounds;
-
-            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-            // draw connections
-            ctx.strokeStyle = "white";
-            for (const c of graph.value.connections) {
-                const [origX1, origY1] = getPortCoordinates(getDomElements(c.from));
-                const [origX2, origY2] = getPortCoordinates(getDomElements(c.to));
-                const [x1, y1] = transformCoordinates(origX1, origY1);
-                const [x2, y2] = transformCoordinates(origX2, origY2);
-                ctx.beginPath();
-                ctx.moveTo(x1, y1);
-                if (viewModel.value.settings.useStraightConnections) {
-                    ctx.lineTo(x2, y2);
-                } else {
-                    const dx = 0.3 * Math.abs(x1 - x2);
-                    ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
-                }
-                ctx.stroke();
-            }
-
-            // draw nodes
-            ctx.strokeStyle = "lightgray";
-            for (const [n, nc] of nodeCoords.entries()) {
-                const [x1, y1] = transformCoordinates(nc.x1, nc.y1);
-                const [x2, y2] = transformCoordinates(nc.x2, nc.y2);
-                ctx.fillStyle = getNodeColor(nodeDomElements.get(n));
-                ctx.beginPath();
-                ctx.rect(x1, y1, x2 - x1, y2 - y1);
-                ctx.fill();
-                ctx.stroke();
-            }
-
-            if (showViewBounds.value) {
-                const viewBounds = getViewBounds();
-                const [x1, y1] = transformCoordinates(viewBounds.x1, viewBounds.y1);
-                const [x2, y2] = transformCoordinates(viewBounds.x2, viewBounds.y2);
-                ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
-                ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
-            }
-        };
-
-        /** Transforms coordinates from editor space to minimap space */
-        const transformCoordinates = (origX: number, origY: number): [number, number] => {
-            return [
-                ((origX - bounds.x1) / (bounds.x2 - bounds.x1)) * ctx!.canvas.clientWidth,
-                ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.clientHeight,
-            ];
-        };
-
-        /** Transforms coordinates from minimap space to editor space */
-        const reverseTransform = (thisX: number, thisY: number): [number, number] => {
-            return [
-                (thisX * (bounds.x2 - bounds.x1)) / ctx!.canvas.clientWidth + bounds.x1,
-                (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.clientHeight + bounds.y1,
-            ];
-        };
-
-        const getNodeColor = (domElement?: HTMLElement | null) => {
-            if (domElement) {
-                const content = domElement.querySelector(".__content");
-                if (content) {
-                    const contentColor = getComputedColor(content);
-                    if (contentColor) {
-                        return contentColor;
-                    }
-                }
-                const nodeColor = getComputedColor(domElement);
-                if (nodeColor) {
-                    return nodeColor;
-                }
-            }
-            return "gray";
-        };
-
-        const getComputedColor = (domElement: Element): string | undefined => {
-            const c = getComputedStyle(domElement).backgroundColor;
-            if (c && c !== "rgba(0, 0, 0, 0)") {
-                return c;
-            }
-        };
-
-        /** Returns view bounds in editor space */
-        const getViewBounds = (): IRect => {
-            const parentWidth = canvas.value!.parentElement!.offsetWidth;
-            const parentHeight = canvas.value!.parentElement!.offsetHeight;
-            const x2 = parentWidth / graph.value.scaling - graph.value.panning.x;
-            const y2 = parentHeight / graph.value.scaling - graph.value.panning.y;
-            return { x1: -graph.value.panning.x, y1: -graph.value.panning.y, x2, y2 };
-        };
-
-        const mousedown = (ev: MouseEvent) => {
-            if (ev.button === 0) {
-                dragging = true;
-                mousemove(ev);
-            }
-        };
-
-        const mousemove = (ev: MouseEvent) => {
-            if (dragging) {
-                // still slightly off when zoomed
-                const [cx, cy] = reverseTransform(ev.offsetX, ev.offsetY);
-                const viewBounds = getViewBounds();
-                const dx = (viewBounds.x1 - viewBounds.x2) / 2;
-                const dy = (viewBounds.y1 - viewBounds.y2) / 2;
-                graph.value.panning.x = -(cx + dx);
-                graph.value.panning.y = -(cy + dy);
-            }
-        };
-
-        const mouseup = () => {
-            dragging = false;
-        };
-
-        const mouseenter = () => {
-            showViewBounds.value = true;
-        };
-
-        const mouseleave = () => {
-            showViewBounds.value = false;
-            mouseup();
-        };
-
-        // TODO: This destroys the performance
-        /*watch(
-            [
-                showViewBounds,
-                graph.value.panning,
-                () => graph.value.scaling,
-                graph.value.nodes,
-                graph.value.connections,
-            ],
-            () => {
-                updateCanvas();
-            }
-        );
-
-        const nodePositions = computed(() => graph.value.nodes.map((n) => n.position));
-        watch(
-            nodePositions,
-            async () => {
-                updateCanvas();
-            },
-            { deep: true }
-        );*/
-
-        onMounted(() => {
-            ctx = canvas.value!.getContext("2d")!;
-            ctx.imageSmoothingQuality = "high";
-            updateCanvas();
+const { viewModel } = useViewModel();
+const { graph } = useGraph();
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+const showViewBounds = ref(false);
+
+let ctx: CanvasRenderingContext2D | undefined;
+let dragging = false;
+let bounds: IRect = { x1: 0, y1: 0, x2: 0, y2: 0 };
+let interval: number;
+
+const updateCanvas = () => {
+    if (!ctx) {
+        return;
+    }
+    ctx.canvas.width = canvas.value!.offsetWidth;
+    ctx.canvas.height = canvas.value!.offsetHeight;
+
+    const nodeCoords = new Map<AbstractNode, IRect>();
+    const nodeDomElements = new Map<AbstractNode, HTMLElement | null>();
+    for (const n of graph.value.nodes) {
+        const domElement = getDomElementOfNode(n);
+        const width = domElement?.offsetWidth ?? 0;
+        const height = domElement?.offsetHeight ?? 0;
+        const posX = n.position?.x ?? 0;
+        const posY = n.position?.y ?? 0;
+        nodeCoords.set(n, {
+            x1: posX,
+            y1: posY,
+            x2: posX + width,
+            y2: posY + height,
         });
+        nodeDomElements.set(n, domElement);
+    }
+
+    // get bound rectangle
+    const newBounds: IRect = {
+        x1: Number.MAX_SAFE_INTEGER,
+        y1: Number.MAX_SAFE_INTEGER,
+        x2: Number.MIN_SAFE_INTEGER,
+        y2: Number.MIN_SAFE_INTEGER,
+    };
+    for (const nc of nodeCoords.values()) {
+        if (nc.x1 < newBounds.x1) {
+            newBounds.x1 = nc.x1;
+        }
+        if (nc.y1 < newBounds.y1) {
+            newBounds.y1 = nc.y1;
+        }
+        if (nc.x2 > newBounds.x2) {
+            newBounds.x2 = nc.x2;
+        }
+        if (nc.y2 > newBounds.y2) {
+            newBounds.y2 = nc.y2;
+        }
+    }
+
+    // add some padding
+    const padding = 50;
+    newBounds.x1 -= padding;
+    newBounds.y1 -= padding;
+    newBounds.x2 += padding;
+    newBounds.y2 += padding;
+    bounds = newBounds;
+
+    // ensure aspect ratio matches canvas
+    const canvasRatio = ctx.canvas.width / ctx.canvas.height;
+    const boundsRatio = (bounds.x2 - bounds.x1) / (bounds.y2 - bounds.y1);
+    if (canvasRatio > boundsRatio) {
+        const diff = (canvasRatio - boundsRatio) * (bounds.y2 - bounds.y1) * 0.5;
+        bounds.x1 -= diff;
+        bounds.x2 += diff;
+    } else {
+        const boundsWidth = bounds.x2 - bounds.x1;
+        const boundsHeight = bounds.y2 - bounds.y1;
+        const diff = ((boundsWidth - canvasRatio * boundsHeight) / canvasRatio) * 0.5;
+        bounds.y1 -= diff;
+        bounds.y2 += diff;
+    }
+
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    // draw connections
+    ctx.strokeStyle = "white";
+    for (const c of graph.value.connections) {
+        const [origX1, origY1] = getPortCoordinates(getDomElements(c.from));
+        const [origX2, origY2] = getPortCoordinates(getDomElements(c.to));
+        const [x1, y1] = transformCoordinates(origX1, origY1);
+        const [x2, y2] = transformCoordinates(origX2, origY2);
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        if (viewModel.value.settings.useStraightConnections) {
+            ctx.lineTo(x2, y2);
+        } else {
+            const dx = 0.3 * Math.abs(x1 - x2);
+            ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
+        }
+        ctx.stroke();
+    }
+
+    // draw nodes
+    ctx.strokeStyle = "lightgray";
+    for (const [n, nc] of nodeCoords.entries()) {
+        const [x1, y1] = transformCoordinates(nc.x1, nc.y1);
+        const [x2, y2] = transformCoordinates(nc.x2, nc.y2);
+        ctx.fillStyle = getNodeColor(nodeDomElements.get(n));
+        ctx.beginPath();
+        ctx.rect(x1, y1, x2 - x1, y2 - y1);
+        ctx.fill();
+        ctx.stroke();
+    }
+
+    if (showViewBounds.value) {
+        const viewBounds = getViewBounds();
+        const [x1, y1] = transformCoordinates(viewBounds.x1, viewBounds.y1);
+        const [x2, y2] = transformCoordinates(viewBounds.x2, viewBounds.y2);
+        ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
+        ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+    }
+};
+
+/** Transforms coordinates from editor space to minimap space */
+const transformCoordinates = (origX: number, origY: number): [number, number] => {
+    return [
+        ((origX - bounds.x1) / (bounds.x2 - bounds.x1)) * ctx!.canvas.width,
+        ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.height,
+    ];
+};
+
+/** Transforms coordinates from minimap space to editor space */
+const reverseTransform = (thisX: number, thisY: number): [number, number] => {
+    return [
+        (thisX * (bounds.x2 - bounds.x1)) / ctx!.canvas.width + bounds.x1,
+        (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.height + bounds.y1,
+    ];
+};
+
+const getNodeColor = (domElement?: HTMLElement | null) => {
+    if (domElement) {
+        const content = domElement.querySelector(".__content");
+        if (content) {
+            const contentColor = getComputedColor(content);
+            if (contentColor) {
+                return contentColor;
+            }
+        }
+        const nodeColor = getComputedColor(domElement);
+        if (nodeColor) {
+            return nodeColor;
+        }
+    }
+    return "gray";
+};
+
+const getComputedColor = (domElement: Element): string | undefined => {
+    const c = getComputedStyle(domElement).backgroundColor;
+    if (c && c !== "rgba(0, 0, 0, 0)") {
+        return c;
+    }
+};
+
+/** Returns view bounds in editor space */
+const getViewBounds = (): IRect => {
+    const parentWidth = canvas.value!.parentElement!.offsetWidth;
+    const parentHeight = canvas.value!.parentElement!.offsetHeight;
+    const x2 = parentWidth / graph.value.scaling - graph.value.panning.x;
+    const y2 = parentHeight / graph.value.scaling - graph.value.panning.y;
+    return { x1: -graph.value.panning.x, y1: -graph.value.panning.y, x2, y2 };
+};
+
+const mousedown = (ev: MouseEvent) => {
+    if (ev.button === 0) {
+        dragging = true;
+        mousemove(ev);
+    }
+};
+
+const mousemove = (ev: MouseEvent) => {
+    if (dragging) {
+        // still slightly off when zoomed
+        const [cx, cy] = reverseTransform(ev.offsetX, ev.offsetY);
+        const viewBounds = getViewBounds();
+        const dx = (viewBounds.x2 - viewBounds.x1) / 2;
+        const dy = (viewBounds.y2 - viewBounds.y1) / 2;
+        graph.value.panning.x = -(cx - dx);
+        graph.value.panning.y = -(cy - dy);
+    }
+};
+
+const mouseup = () => {
+    dragging = false;
+};
+
+const mouseenter = () => {
+    showViewBounds.value = true;
+};
+
+const mouseleave = () => {
+    showViewBounds.value = false;
+    mouseup();
+};
+
+watch([showViewBounds, graph.value.panning, () => graph.value.scaling, () => graph.value.connections.length], () => {
+    updateCanvas();
+});
 
-        return { canvas, showViewBounds, mousedown, mousemove, mouseup, mouseenter, mouseleave };
+const nodePositions = computed(() => graph.value.nodes.map((n) => n.position));
+watch(
+    nodePositions,
+    () => {
+        updateCanvas();
     },
+    { deep: true },
+);
+
+onMounted(() => {
+    ctx = canvas.value!.getContext("2d")!;
+    ctx.imageSmoothingQuality = "high";
+    updateCanvas();
+    interval = setInterval(updateCanvas, 500);
+});
+
+onBeforeUnmount(() => {
+    clearInterval(interval);
 });
 </script>
diff --git a/packages/themes/src/classic/components/minimap.scss b/packages/themes/src/classic/components/minimap.scss
index 84ee8513..98879944 100644
--- a/packages/themes/src/classic/components/minimap.scss
+++ b/packages/themes/src/classic/components/minimap.scss
@@ -1,4 +1,4 @@
-.minimap {
+.baklava-minimap {
     position: absolute;
     height: 15%;
     width: 15%;
@@ -7,4 +7,4 @@
     top: 20px;
     right: 20px;
     z-index: 900;
-}
\ No newline at end of file
+}