chore(docs): cleanup v-model usages

Author: bcakmakoglu

docs/src/guide/components/background.md

@@ -19,14 +19,10 @@ To use the background simply pass the `Background` component as a child to the `
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <Background />
   </VueFlow>
 </template>

docs/src/guide/components/controls.md

@@ -26,16 +26,10 @@ import { Controls } from '@vue-flow/controls'
 
 // import default controls styles
 import '@vue-flow/controls/dist/style.css'
-
-import initialElements from './initial-elements'
-
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <Controls />
   </VueFlow>
 </template>

docs/src/guide/components/minimap.md

@@ -24,15 +24,10 @@ import { MiniMap } from '@vue-flow/minimap'
 
 // import default minimap styles
 import '@vue-flow/minimap/dist/style.css'
-
-import initialElements from './initial-elements'
-
-// some nodes and edges
-const elements = ref(initialElements)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow>
     <MiniMap />
   </VueFlow>
 </template>

docs/src/guide/components/node-resizer.md

@@ -16,17 +16,18 @@ npm install @vue-flow/node-resizer
 
 ```vue
 <script setup>
+import { ref } from 'vue'  
 import { VueFlow } from '@vue-flow/core'
-import initialElements from './initial-elements'
+import initialNodes from './initialNodes'
 
 // some nodes and edges
-const elements = ref(initialElements)
+const nodes = ref(initialNodes)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes">
     <template #node-custom="nodeProps">
-      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+      <CustomNode :data="nodeProps.data"  />
     </template>
   </VueFlow>
 </template>
@@ -40,14 +41,13 @@ import { NodeResizer } from '@vue-flow/node-resizer'
 // make sure to include the necessary styles!
 import '@vue-flow/node-resizer/dist/style.css'
 
-defineProps(['label'])
+defineProps(['data'])
 </script>
 
 <template>
   <NodeResizer min-width="100" min-height="30" />
 
   <Handle type="target" :position="Position.Left" />
-  <div style="padding: 10px">{{ label }}</div>
   <Handle type="source" :position="Position.Right" />
 </template>
 ```

docs/src/guide/components/node-toolbar.md

@@ -19,16 +19,16 @@ npm install @vue-flow/node-toolbar
 ```vue
 <script setup>
 import { VueFlow } from '@vue-flow/core'
-import initialElements from './initial-elements'
+import initialNodes from './initialNodes'
 
 // some nodes and edges
-const elements = ref(initialElements)
+const nodes = ref(initialNodes)
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes">
     <template #node-custom="nodeProps">
-      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
+      <CustomNode :data="nodeProps.data" />
     </template>
   </VueFlow>
 </template>
@@ -59,10 +59,6 @@ defineProps<Props>()
     <button>expand</button>
   </NodeToolbar>
 
-  <div :style="{ padding: '10px 20px' }">
-    {{ label }}
-  </div>
-
   <Handle type="target" :position="Position.Left" />
   <Handle type="source" :position="Position.Right" />
 </template>

docs/src/guide/theming.md

@@ -91,9 +91,10 @@ Below are a couple of examples on how you can do this:
 
 Directly styling the Vue Flow component:
 
-```vue{3-4}
+```vue{4-5}
 <VueFlow
-  v-model="elements"
+  :nodes="nodes"
+  :edges="edges"
   class="my-diagram-class"  
   :style="{ background: 'red' }"
 />
@@ -108,8 +109,8 @@ Styling nodes/edges with a style or class attribute:
 const nodes = ref([
   { 
     id: '1', 
-    label: 'Node 1', 
     position: { x: 250, y: 5 },
+    data: { label: 'Node 1' },
     
     // Add a class name to the node
     class: 'my-custom-node-class',
@@ -140,11 +141,11 @@ These alterations can be implemented either on a global scale or to individual e
 ```
 
 ```js{6-7} [<LogosJavascript />]
-const elements = ref([
+const nodes = ref([
   { 
     id: '1', 
-    label: 'Node 1', 
     position: { x: 100, y: 100 }, 
+    data: { label: 'Node 1' },
     /* Overriding the `--vf-node-color` variable to change node border, box-shadow and handle color */
     style: { '--vf-node-color': 'blue' } 
   },

docs/src/guide/troubleshooting.md

@@ -18,7 +18,7 @@ Vue Flow can emit several error types to help diagnose and resolve issues.
 <template>
   <!-- Ensure the parent container has a width and height -->
   <div style="width: 500px; height: 500px">
-    <VueFlow v-model="elements" />
+    <VueFlow :nodes="nodes" :edges="edges" />
   </div>
 </template>
 ```

docs/src/guide/utils/graph.md

@@ -13,8 +13,8 @@
 import { VueFlow, isEdge } from '@vue-flow/core'
 
 const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
+  { id: '1', position: { x: 250, y: 5 }, },
+  { id: '2', position: { x: 100, y: 100 }, },
 
   { id: 'e1-2', source: '1', target: '2', class: 'light' },
 ])
@@ -27,9 +27,10 @@ const toggleClass = () => {
   })
 }
 </script>
+
 <template>
   <VueFlow v-model="elements">
-    <button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
+    <button @click="toggleClass">Toggle classes</button>
   </VueFlow>
 </template>
 ```
@@ -61,33 +62,34 @@ const toggleClass = () => {
   })
 }
 </script>
+
 <template>
   <VueFlow v-model="elements">
-    <button style="position: absolute; top: 10px; right: 10px;" @click="toggleClass">Toggle classes</button>
+    <button @click="toggleClass">Toggle classes</button>
   </VueFlow>
 </template>
 ```
 
-## [addEdge](/typedocs/functions/isEdge)
+## [addEdge](/typedocs/functions/isEdge) (deprecated)
 
 ::: warning
-In the composition API you should use [`addEdges`](/typedocs/types/AddEdges)
-of [`useVueFlow`](/guide/composables#usevueflow/)
+In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
 :::
 
 - Details:
 
-  Confirms if an element is a node.
+  Adds an edge to the elements array.
 
 - Example:
 
 ```vue{12}
 <script setup>
+import { ref } from 'vue'
 import { VueFlow, addEdge } from '@vue-flow/core'
 
 const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '1', position: { x: 250, y: 5 } },
+  { id: '2', position: { x: 100, y: 100 } },
 
   { id: 'e1-2', source: '1', target: '2' },
 ])
@@ -101,16 +103,15 @@ const onConnect = (params) => {
 </template>
 ```
 
-## [updateEdge](/typedocs/functions/updateEdge-1)
+## [updateEdge](/typedocs/functions/updateEdge-1) (deprecated)
 
 ::: warning
-In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge)
-of [`useVueFlow`](/guide/composables#usevueflow/)
+In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
 :::
 
 - Details:
 
-  Updates an edge and applies new source/target.
+  Updates an edge to a new source or target node.
 
 - Example:
 
@@ -119,8 +120,8 @@ of [`useVueFlow`](/guide/composables#usevueflow/)
 import { VueFlow, updateEdge } from '@vue-flow/core'
 
 const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
+  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
 
   { id: 'e1-2', source: '1', target: '2' },
 ])

docs/src/guide/vue-flow/config.md

@@ -812,7 +812,7 @@ const edges = ref([
 
 ```vue{2}
 <template>
-  <VueFlow v-model="elements" auto-connect />
+  <VueFlow :auto-connect="true" />
 </template>
 ```