diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index faf9ea38..dd2c53b4 100644
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -64,7 +64,7 @@ const toggleClass = () => (dark.value = !dark.value)
 </script>
 
 <template>
-  <VueFlow v-model="elements" :class="{ dark }" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+  <VueFlow v-model="elements" :class="{ dark }" class="basicflow" :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4">
     <Background :pattern-color="dark ? '#FFFFFB' : '#aaa'" gap="8" />
     <MiniMap />
     <Controls />
diff --git a/docs/components/examples/custom-node/App.vue b/docs/components/examples/custom-node/App.vue
index c22e08dc..df9db52c 100644
--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -105,7 +105,7 @@ onMounted(() => {
     :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
     :connection-line-style="connectionLineStyle"
-    :default-zoom="1.5"
+    :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
     <template #node-custom="{ data }">
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 5cb9e32c..34dcb35f 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -18,7 +18,7 @@ onConnect((params) => addEdges([params]))
     v-model="elements"
     class="basicflow"
     :default-edge-options="{ type: 'smoothstep' }"
-    :default-zoom="1.5"
+    :default-viewport="{ zoom: 1.5 }"
     :min-zoom="0.2"
     :max-zoom="4"
     fit-view-on-init
diff --git a/docs/components/examples/intersection/App.vue b/docs/components/examples/intersection/App.vue
index 6e1b986d..610bbbeb 100644
--- a/docs/components/examples/intersection/App.vue
+++ b/docs/components/examples/intersection/App.vue
@@ -22,5 +22,5 @@ onNodeDrag(({ intersections }) => {
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" />
+  <VueFlow v-model="elements" fit-view-on-init :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" />
 </template>
diff --git a/packages/pathfinding-edge/example/App.vue b/packages/pathfinding-edge/example/App.vue
index 4fe8f895..c41a97ea 100644
--- a/packages/pathfinding-edge/example/App.vue
+++ b/packages/pathfinding-edge/example/App.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements } from '@vue-flow/core'
-import { VueFlow, addEdge } from '@vue-flow/core'
-import { Background } from '@vue-flow/additional-components'
+import type { Elements } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import initialElements from './elements'
 import { PathFindingEdge, PerfectArrow } from '~/index'
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
+
+const { addEdges, onConnect } = useVueFlow()
+
+onConnect((params) => addEdges([params]))
 </script>
 
 <template>
@@ -17,7 +19,6 @@ const onConnect = (params: Edge | Connection) => (elements.value = addEdge(param
       :default-edge-options="{ type: 'perfectArrow' }"
       :fit-view-on-init="true"
       class="vue-flow-basic-example"
-      @connect="onConnect"
     >
       <template #edge-pathFinding="props">
         <PathFindingEdge v-bind="props" />
@@ -25,8 +26,6 @@ const onConnect = (params: Edge | Connection) => (elements.value = addEdge(param
       <template #edge-perfectArrow="props">
         <PerfectArrow v-bind="props" />
       </template>
-
-      <Background color="#aaa" :gap="8" />
     </VueFlow>
   </div>
 </template>
diff --git a/packages/pathfinding-edge/example/elements.ts b/packages/pathfinding-edge/example/elements.ts
index eb751d74..3cb36864 100644
--- a/packages/pathfinding-edge/example/elements.ts
+++ b/packages/pathfinding-edge/example/elements.ts
@@ -123,7 +123,7 @@ export default [
     id: 'e2a2b',
     source: '2a',
     target: '2b',
-    type: 'pathFinding',
+    type: 'perfectArrow',
     markerEnd,
   },
 ] as Elements