From ffdadda0510a7ce3bc11065ba0cb2311c1350b5c Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Nov 2021 20:34:02 +0100
Subject: [PATCH] update!: Rename Flow container to VueFlow

* Export renamed to VueFlow

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .github/FUNDING.yml                             |  1 +
 examples/Basic/Basic.vue                        |  6 +++---
 .../CustomConnectionLine.vue                    |  6 +++---
 examples/CustomNode/CustomNode.vue              |  6 +++---
 examples/DragNDrop/DnD.vue                      | 12 +++++++++---
 examples/EdgeTypes/EdgeTypesExample.vue         | 17 ++++++++++++++---
 examples/EdgeWithButton/EdgeWithButton.vue      |  6 +++---
 examples/Edges/EdgesExample.vue                 |  6 +++---
 examples/Empty/EmptyExample.vue                 |  6 +++---
 examples/Header.vue                             |  2 +-
 examples/Hidden/HiddenExample.vue               |  6 +++---
 examples/Interaction/InteractionExample.vue     |  6 +++---
 examples/Layouting/LayoutingExample.vue         |  6 +++---
 examples/MultiFlows/Flow.vue                    |  6 +++---
 .../NodeTypeChange/NodeTypeChangeExample.vue    |  6 +++---
 .../NodeTypesIdChangeExample.vue                |  6 +++---
 examples/Overview/Overview.vue                  |  8 ++++----
 examples/Provider/ProviderExample.vue           |  6 +++---
 examples/Provider/Sidebar.vue                   |  4 +++-
 examples/SaveRestore/SaveRestoreExample.vue     |  6 +++---
 examples/Stress/StressExample.vue               |  6 +++---
 examples/Switch/SwitchExample.vue               |  6 +++---
 .../Unidirectional/UnidirectionalExample.vue    |  4 ++--
 examples/UpdatableEdge/UpdatableEdgeExample.vue |  6 +++---
 examples/UpdateNode/UpdateNodeExample.vue       |  6 +++---
 .../UpdateNodeInternalsExample.vue              |  6 +++---
 examples/Validation/ValidationExample.vue       |  4 ++--
 examples/ZoomPanHelper/ZoomPanHelperExample.vue |  6 +++---
 .../{Flow/Flow.vue => VueFlow/VueFlow.vue}      |  0
 src/container/index.ts                          |  2 +-
 src/index.ts                                    |  2 +-
 31 files changed, 98 insertions(+), 78 deletions(-)
 create mode 100644 .github/FUNDING.yml
 rename src/container/{Flow/Flow.vue => VueFlow/VueFlow.vue} (100%)

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..aca79916
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: bcakmakoglu
diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index 367a7536..1d0d1067 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -56,7 +56,7 @@ const toggleclasss = () => {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     class="vue-flow-basic-example"
     :elements="elements"
     :default-zoom="1.5"
@@ -78,5 +78,5 @@ const toggleclasss = () => {
       <button style="margin-right: 5px" @click="toggleclasss">toggle classs</button>
       <button @click="logToObject">toObject</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
index ea882aee..bddacbdf 100644
--- a/examples/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
+import { VueFlow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
 const elements = ref<Elements>([
   {
@@ -14,10 +14,10 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <template #custom-connection-line="props">
       <ConnectionLine v-bind="props" />
     </template>
     <Background :variant="BackgroundVariant.Lines" />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index 3f632b8b..2175d80a 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
-  Flow,
+  VueFlow,
   isEdge,
   removeElements,
   addEdge,
@@ -111,7 +111,7 @@ const onConnect = (params: Connection | Edge) =>
   ))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :style="`background: ${bgColor}`"
     :node-types="nodeTypes"
@@ -128,5 +128,5 @@ const onConnect = (params: Connection | Edge) =>
   >
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index 4baed54a..9240e929 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import { Flow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import { VueFlow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()
@@ -48,9 +48,15 @@ const onDrop = (event: DragEvent) => {
 <template>
   <div class="dndflow">
     <div class="vueflow-wrapper" @drop="onDrop">
-      <Flow :elements="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+      <VueFlow
+        :elements="elements"
+        @elements-remove="onElementsRemove"
+        @load="onLoad"
+        @connect="onConnect"
+        @dragover="onDragOver"
+      >
         <Controls />
-      </Flow>
+      </VueFlow>
     </div>
     <Sidebar />
   </div>
diff --git a/examples/EdgeTypes/EdgeTypesExample.vue b/examples/EdgeTypes/EdgeTypesExample.vue
index a9c67122..d44ff309 100644
--- a/examples/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,17 @@
 <script lang="ts" setup>
 import { getElements } from './utils'
-import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
+import {
+  VueFlow,
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  FlowInstance,
+  Connection,
+  Edge,
+  Elements,
+} from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
@@ -12,8 +23,8 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" :min-zoom="0.2" @load="onLoad" @elements-remove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/EdgeWithButton/EdgeWithButton.vue b/examples/EdgeWithButton/EdgeWithButton.vue
index 61398906..8a5f861b 100644
--- a/examples/EdgeWithButton/EdgeWithButton.vue
+++ b/examples/EdgeWithButton/EdgeWithButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import ButtonEdge from './ButtonEdge.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   Background,
   Connection,
@@ -39,7 +39,7 @@ const onConnect = (params: Connection | Edge) =>
   (elements.value = addEdge({ ...params, type: 'buttonedge' } as Edge, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     key="edge-with-button"
     :elements="elements"
     :snap-to-grid="true"
@@ -51,5 +51,5 @@ const onConnect = (params: Connection | Edge) =>
     <MiniMap />
     <Controls />
     <Background />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index 04dad94d..dfd03d23 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -3,7 +3,7 @@ import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -89,7 +89,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :snap-to-grid="true"
     :edge-types="edgeTypes"
@@ -102,5 +102,5 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
     <MiniMap />
     <Controls />
     <Background />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index dceefa2e..903336b4 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import {
-  Flow,
+  VueFlow,
   MiniMap,
   Controls,
   Background,
@@ -37,7 +37,7 @@ const addRandomNode = () => {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     @load="onLoad"
     @element-click="onElementClick"
@@ -50,5 +50,5 @@ const addRandomNode = () => {
     <Background :variant="BackgroundVariant.Lines" />
 
     <button type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Header.vue b/examples/Header.vue
index 559fb4d4..1d136fb7 100644
--- a/examples/Header.vue
+++ b/examples/Header.vue
@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue VueFlow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index 51022722..a56caea7 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { VueFlow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -23,7 +23,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <Flow :elements="elements" @connect="onConnect">
+  <VueFlow :elements="elements" @connect="onConnect">
     <MiniMap />
     <Controls />
 
@@ -35,5 +35,5 @@ watchEffect(() => {
         </label>
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index a74cb580..0e8ed7a0 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   addEdge,
   MiniMap,
   Controls,
@@ -47,7 +47,7 @@ const captureZoomScroll = ref(false)
 const captureElementClick = ref(false)
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :elements-selectable="isSelectable"
     :nodes-connectable="isConnectable"
@@ -148,5 +148,5 @@ const captureElementClick = ref(false)
         </label>
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
index e220b5e6..0502319c 100644
--- a/examples/Layouting/LayoutingExample.vue
+++ b/examples/Layouting/LayoutingExample.vue
@@ -4,7 +4,7 @@ import initialElements from './initial-elements'
 import './layouting.css'
 
 import {
-  Flow,
+  VueFlow,
   Controls,
   addEdge,
   ConnectionMode,
@@ -59,7 +59,7 @@ const onLayout = (direction: string) => {
 </script>
 <template>
   <div class="layoutflow">
-    <Flow
+    <VueFlow
       :elements="elements"
       :node-extent="nodeExtent"
       :connection-mode="ConnectionMode.Loose"
@@ -68,7 +68,7 @@ const onLayout = (direction: string) => {
       @load="() => onLayout('TB')"
     >
       <Controls />
-    </Flow>
+    </VueFlow>
     <div class="controls">
       <button :style="{ marginRight: 10 }" @click="() => onLayout('TB')">vertical layout</button>
       <button @click="() => onLayout('LR')">horizontal layout</button>
diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
index 92880ef1..cfa42632 100644
--- a/examples/MultiFlows/Flow.vue
+++ b/examples/MultiFlows/Flow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { VueFlow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
@@ -14,7 +14,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
     <Background />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index ce22bbee..add9afe5 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -41,7 +41,7 @@ const changeType = () => {
 }
 </script>
 <template>
-  <Flow :elements="elements" @connect="onConnect" @load="onLoad">
+  <VueFlow :elements="elements" @connect="onConnect" @load="onLoad">
     <button :style="buttonStyle" @click="changeType">change type</button>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
index 3f0fe636..75428562 100644
--- a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
+++ b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import NodeA from './NodeA.vue'
 import NodeB from './NodeB.vue'
-import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+import { VueFlow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
 
 const initialElements: Elements = [
   {
@@ -48,7 +48,7 @@ const changeType = () => {
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
+  <VueFlow :elements="elements" :node-types="nodeTypesObjects[nodeTypesId]" :node-types-id="nodeTypesId" @connect="onConnect">
     <template #node-a>
       <NodeA :node-styles="nodeStyles" />
     </template>
@@ -56,5 +56,5 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
       <NodeB :node-styles="nodeStyles" />
     </template>
     <button :style="buttonStyle" @click="changeType">change type</button>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
index 58a98434..84d0591a 100644
--- a/examples/Overview/Overview.vue
+++ b/examples/Overview/Overview.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   MiniMap,
@@ -51,7 +51,7 @@ const initialElements: Elements = [
     id: '1',
     type: 'input',
     data: {
-      label: 'Welcome to <strong>Vue Flow!</strong>',
+      label: 'Welcome to <strong>Vue VueFlow!</strong>',
     },
     position: { x: 250, y: 0 },
   },
@@ -136,7 +136,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :connection-line-style="connectionLineStyle"
     :snap-to-grid="true"
@@ -167,5 +167,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
     <Background color="#aaa" :gap="20" />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
index 5cbeda11..cd42db64 100644
--- a/examples/Provider/ProviderExample.vue
+++ b/examples/Provider/ProviderExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   removeElements,
   Controls,
@@ -37,7 +37,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
   <div class="providerflow">
     <Sidebar />
     <div class="vue-flow-wrapper">
-      <Flow
+      <VueFlow
         :elements="elements"
         :connection-mode="ConnectionMode.Loose"
         @element-click="onElementClick"
@@ -46,7 +46,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
         @load="onLoad"
       >
         <Controls />
-      </Flow>
+      </VueFlow>
     </div>
   </div>
 </template>
diff --git a/examples/Provider/Sidebar.vue b/examples/Provider/Sidebar.vue
index 6ad050de..a9154ea1 100644
--- a/examples/Provider/Sidebar.vue
+++ b/examples/Provider/Sidebar.vue
@@ -12,7 +12,9 @@ const selectAll = () => {
 </script>
 <template>
   <aside>
-    <div class="description">This is an example of how you can access the internal state outside of the Vue Flow component.</div>
+    <div class="description">
+      This is an example of how you can access the internal state outside of the Vue VueFlow component.
+    </div>
     <div class="title">Zoom & pan transform</div>
     <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
     <div class="title">Nodes</div>
diff --git a/examples/SaveRestore/SaveRestoreExample.vue b/examples/SaveRestore/SaveRestoreExample.vue
index 95568910..c736b2b3 100644
--- a/examples/SaveRestore/SaveRestoreExample.vue
+++ b/examples/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
+import { VueFlow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
 
 import './save.css'
 
@@ -20,7 +20,7 @@ const onRestore = (els: Elements) => (elements.value = els)
 const onAdd = (el: Node) => (elements.value = elements.value.concat(el))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @load="onLoad">
     <Controls :flow-instance="flowInstance" @restore="onRestore" @add="onAdd" />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
index e447230d..386c0c50 100644
--- a/examples/Stress/StressExample.vue
+++ b/examples/Stress/StressExample.vue
@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import { getElements } from './utils'
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   MiniMap,
@@ -49,7 +49,7 @@ const updateElements = () => {
 }
 </script>
 <template>
-  <Flow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
+  <VueFlow :elements="elements" @load="onLoad" @elementsRemove="onElementsRemove" @connect="onConnect">
     <MiniMap />
     <Controls />
     <Background />
@@ -58,5 +58,5 @@ const updateElements = () => {
       <button style="margin-right: 5px" @click="updatePos">change pos</button>
       <button @click="updateElements">update elements</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
index 482680d1..c253d06a 100644
--- a/examples/Switch/SwitchExample.vue
+++ b/examples/Switch/SwitchExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { VueFlow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
@@ -32,7 +32,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"
@@ -43,5 +43,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
       <button style="margin-right: 5px" @click="() => (elements = elementsA)">flow a</button>
       <button @click="() => (elements = elementsB)">flow b</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Unidirectional/UnidirectionalExample.vue b/examples/Unidirectional/UnidirectionalExample.vue
index 0660844e..7122326e 100644
--- a/examples/Unidirectional/UnidirectionalExample.vue
+++ b/examples/Unidirectional/UnidirectionalExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   NodeType,
   addEdge,
   useZoomPanHelper,
@@ -193,7 +193,7 @@ const onPaneClick = (evt: MouseEvent) =>
   } as Node))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :node-types="nodeTypes"
     :connection-line-type="ConnectionLineType.SmoothStep"
diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
index 5bf36154..21bc155f 100644
--- a/examples/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   Controls,
   updateEdge,
   addEdge,
@@ -50,7 +50,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :snap-to-grid="true"
     :connection-mode="ConnectionMode.Loose"
@@ -62,5 +62,5 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
     @edge-update-end="onEdgeUpdateEnd"
   >
     <Controls />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index 58dd4a02..7a70827e 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Flow, Elements } from '~/index'
+import { VueFlow, Elements } from '~/index'
 
 import './updatenode.css'
 
@@ -35,7 +35,7 @@ watchEffect(() => {
 })
 </script>
 <template>
-  <Flow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+  <VueFlow :elements="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
       <label>label:</label>
       <input v-model="nodeName" />
@@ -48,5 +48,5 @@ watchEffect(() => {
         <input v-model="nodeHidden" type="checkbox" />
       </div>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
index 0c0036f7..1c5c19f9 100644
--- a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
+++ b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   NodeType,
   addEdge,
   useZoomPanHelper,
@@ -73,11 +73,11 @@ const onLoad = (instance: FlowInstance) => {
 const updateNodeInternals = () => flowInstance.value?.updateNodeInternals('1')
 </script>
 <template>
-  <Flow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
+  <VueFlow :elements="elements" :node-types="nodeTypes" @connect="onConnect" @pane-click="onPaneClick" @load="onLoad">
     <div :style="buttonWrapperStyles">
       <button @click="toggleHandleCount">toggle handle count</button>
       <button @click="toggleHandlePosition">toggle handle position</button>
       <button @click="updateNodeInternals">update node internals</button>
     </div>
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/examples/Validation/ValidationExample.vue b/examples/Validation/ValidationExample.vue
index 31106e87..745ef0f2 100644
--- a/examples/Validation/ValidationExample.vue
+++ b/examples/Validation/ValidationExample.vue
@@ -2,7 +2,7 @@
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 import {
-  Flow,
+  VueFlow,
   addEdge,
   Handle,
   Connection,
@@ -40,7 +40,7 @@ const nodeTypes: Record<string, NodeType> = {
 }
 </script>
 <template>
-  <Flow
+  <VueFlow
     :elements="elements"
     :select-nodes-on-drag="false"
     class="validationflow"
diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
index 6cd0de91..8088a493 100644
--- a/examples/ZoomPanHelper/ZoomPanHelperExample.vue
+++ b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  Flow,
+  VueFlow,
   removeElements,
   addEdge,
   Background,
@@ -44,8 +44,8 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 </script>
 <template>
-  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
+  <VueFlow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect" @pane-click="onPaneClick">
     <Background />
     <MiniMap />
-  </Flow>
+  </VueFlow>
 </template>
diff --git a/src/container/Flow/Flow.vue b/src/container/VueFlow/VueFlow.vue
similarity index 100%
rename from src/container/Flow/Flow.vue
rename to src/container/VueFlow/VueFlow.vue
diff --git a/src/container/index.ts b/src/container/index.ts
index fedc6c10..a5913013 100644
--- a/src/container/index.ts
+++ b/src/container/index.ts
@@ -1,4 +1,4 @@
-export { default as Flow } from './Flow/Flow.vue'
+export { default as VueFlow } from './VueFlow/VueFlow.vue'
 export { default as EdgeRenderer } from './EdgeRenderer/EdgeRenderer.vue'
 export { default as Marker } from './EdgeRenderer/Marker.vue'
 export { default as MarkerDefinitions } from './EdgeRenderer/MarkerDefinitions.vue'
diff --git a/src/index.ts b/src/index.ts
index e2984ea2..6943770e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { default as Flow } from './container/Flow/Flow.vue'
+export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'