chore(docs): cleanup examples

docs/examples/nested/App.vue

@@ -1,93 +1,81 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
-import { onMounted } from 'vue'
 
-const { onConnect, addEdges, addNodes } = useVueFlow({
+const nodes = ref([
-  fitViewOnInit: true,
+  { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
-  // set this to true so edges get elevated when selected, defaults to false
+  {
-  elevateEdgesOnSelect: true,
+    id: '2',
-  nodes: [
+    label: 'parent node',
-    { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
+    position: { x: 100, y: 100 },
-    {
+    style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
-      id: '2',
+  },
-      label: 'parent node',
+  {
-      position: { x: 100, y: 100 },
+    id: '2a',
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
+    label: 'child node',
-    },
+    position: { x: 10, y: 50 },
-    {
+    parentNode: '2',
-      id: '2a',
+  },
-      label: 'child node',
+  {
-      position: { x: 10, y: 50 },
+    id: '4',
-      parentNode: '2',
+    label: 'parent node',
-    },
+    position: { x: 320, y: 175 },
-    {
+    style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
-      id: '4',
+  },
-      label: 'parent node',
+  {
-      position: { x: 320, y: 175 },
+    id: '4a',
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
+    label: 'child node',
-    },
+    position: { x: 15, y: 65 },
-    {
+    extent: 'parent',
-      id: '4a',
+    parentNode: '4',
-      label: 'child node',
+  },
-      position: { x: 15, y: 65 },
+  {
-      extent: 'parent',
+    id: '4b',
-      parentNode: '4',
+    label: 'nested parent node',
-    },
+    position: { x: 15, y: 120 },
-    {
+    style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
-      id: '4b',
+    parentNode: '4',
-      label: 'nested parent node',
+  },
-      position: { x: 15, y: 120 },
+  {
-      style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
+    id: '4b1',
-      parentNode: '4',
+    label: 'nested child node',
-    },
+    position: { x: 20, y: 40 },
-    {
+    parentNode: '4b',
-      id: '4b1',
+  },
-      label: 'nested child node',
+  {
-      position: { x: 20, y: 40 },
+    id: '4b2',
-      parentNode: '4b',
+    label: 'nested child node',
-    },
+    position: { x: 100, y: 100 },
-    {
+    parentNode: '4b',
-      id: '4b2',
+  },
-      label: 'nested child node',
+  { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
-      position: { x: 100, y: 100 },
+  {
-      parentNode: '4b',
+    id: '999',
-    },
+    type: 'input',
-    { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
+    label: 'Drag me to extend area!',
-  ],
+    position: { x: 20, y: 100 },
-  edges: [
+    class: 'light',
-    { id: 'e1-2', source: '1', target: '2' },
+    expandParent: true,
-    { id: 'e1-4', source: '1', target: '4' },
+    parentNode: '2',
-    { id: 'e1-4c', source: '1', target: '4c' },
+  },
-    { id: 'e2a-4a', source: '2a', target: '4a' },
+])
-    { id: 'e4a-4b1', source: '4a', target: '4b1' },
-    { id: 'e4a-4b2', source: '4a', target: '4b2' },
-    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  ],
-})
 
-onConnect((params) => addEdges(params))
+const edges = ref([
-
+  { id: 'e1-2', source: '1', target: '2' },
-onMounted(() => {
+  { id: 'e1-4', source: '1', target: '4' },
-  // add nodes to parent
+  { id: 'e1-4c', source: '1', target: '4c' },
-  addNodes([
+  { id: 'e2a-4a', source: '2a', target: '4a' },
-    {
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
-      id: '999',
+  { id: 'e4a-4b2', source: '4a', target: '4b2' },
-      type: 'input',
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-      label: 'Drag me to extend area!',
+])
-      position: { x: 20, y: 100 },
-      class: 'light',
-      expandParent: true,
-      parentNode: '2',
-    },
-  ])
-})
 </script>
 
 <template>
-  <VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
     <MiniMap />
 
     <Controls />

docs/examples/node-resizer/App.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import ResizableNode from './ResizableNode.vue'
 
-const elements = ref([
+const nodes = ref([
   {
     id: '1',
     type: 'resizable',
@@ -15,7 +15,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes" fit-view-on-init>
     <template #node-resizable="resizableNodeProps">
       <ResizableNode :label="resizableNodeProps.label" />
     </template>

docs/examples/node-toolbar/App.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Position, VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Position, VueFlow } from '@vue-flow/core'
 import ToolbarNode from './ToolbarNode.vue'
 
 const defaultNodeStyle = {
@@ -10,7 +10,7 @@ const defaultNodeStyle = {
   borderRadius: '99px',
 }
 
-const elements = ref([
+const nodes = ref([
   {
     id: '1',
     type: 'toolbar',
@@ -55,7 +55,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow :nodes="nodes" fit-view-on-init class="vue-flow-basic-example">
     <template #node-toolbar="nodeProps">
       <ToolbarNode :data="nodeProps.data" :label="nodeProps.label" />
     </template>

docs/examples/save-restore/App.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import SaveRestoreControls from './Controls.vue'
 
-const elements = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
+const nodes = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
 </script>
 
 <template>
-  <VueFlow v-model="elements">
+  <VueFlow :nodes="nodes">
     <SaveRestoreControls />
   </VueFlow>
 </template>

docs/examples/save-restore/Controls.vue

@@ -3,7 +3,7 @@ import { Panel, useVueFlow } from '@vue-flow/core'
 
 const flowKey = 'example-flow'
 
-const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
+const { nodes, addNodes, dimensions, toObject, fromObject } = useVueFlow()
 
 function onSave() {
   localStorage.setItem(flowKey, JSON.stringify(toObject()))
@@ -13,10 +13,7 @@ function onRestore() {
   const flow = JSON.parse(localStorage.getItem(flowKey))
 
   if (flow) {
-    const [x = 0, y = 0] = flow.position
+    fromObject(flow)
-    setNodes(flow.nodes)
-    setEdges(flow.edges)
-    setTransform({ x, y, zoom: flow.zoom || 0 })
   }
 }
 

docs/examples/stress/App.vue

@@ -1,33 +1,30 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'
 
-const { nodes, edges } = getElements(15, 15)
+const { nodes: initialNodes, edges: initialEdges } = getElements(15, 15)
 
-const elements = ref([...nodes, ...edges])
+const nodes = ref(initialNodes)
 
-const { onPaneReady, dimensions, fitView } = useVueFlow()
+const edges = ref(initialEdges)
 
-onPaneReady(({ fitView, getElements }) => {
+const { dimensions, fitView } = useVueFlow()
-  fitView({ padding: 0.2 })
-
-  console.log(getElements.value)
-})
 
 function toggleClass() {
-  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+  nodes.value = nodes.value.map((node) => ({ ...node, class: node.class === 'light' ? 'dark' : 'light' }))
 }
 
 function updatePos() {
-  elements.value.forEach((el) => {
+  nodes.value = nodes.value.map((node) => {
-    if (isNode(el)) {
+    return {
-      el.position = {
+      ...node,
+      position: {
         x: Math.random() * 10 * dimensions.value.width,
         y: Math.random() * 10 * dimensions.value.height,
-      }
+      },
     }
   })
 
@@ -38,7 +35,7 @@ function updatePos() {
 </script>
 
 <template>
-  <VueFlow v-model="elements" :min-zoom="0.1">
+  <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" fit-view-on-init>
     <MiniMap />
 
     <Background />

docs/examples/teleport/App.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 import TeleportableNode from './TeleportableNode.vue'
 
-const elements = ref([
+const nodes = ref([
   {
     id: '1',
     label: 'Click to teleport',
@@ -26,6 +26,9 @@ const elements = ref([
     position: { x: 0, y: 200 },
     data: {},
   },
+])
+
+const edges = ref([
   {
     id: 'e1-2',
     source: '1',
@@ -36,7 +39,7 @@ const elements = ref([
 
 <template>
   <div class="teleportflow">
-    <VueFlow v-model="elements" fit-view-on-init>
+    <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
       <template #node-teleportable="{ id }">
         <TeleportableNode :id="id" />
       </template>

docs/examples/teleport/Sidebar.vue

@@ -1,7 +1,3 @@
-<script setup>
-// ...
-</script>
-
 <template>
   <aside>
     <div class="description">Teleport destination</div>

docs/examples/transition/App.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
-const elements = ref([
+const nodes = ref([
   {
     id: '1',
     type: 'input',
@@ -18,21 +18,19 @@ const elements = ref([
     position: { x: 1000, y: 1000 },
     targetPosition: Position.Left,
   },
-
-  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
 ])
 
+const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }])
+
 const { onPaneReady } = useVueFlow()
 
-onPaneReady((i) => {
+onPaneReady(({ fitView }) => {
-  i.fitView({
+  fitView({ nodes: ['1'] })
-    nodes: ['1'],
-  })
 })
 </script>
 
 <template>
-  <VueFlow v-model="elements" :style="{ backgroundColor: '#1A192B' }">
+  <VueFlow :nodes="nodes" :edges="edges" :style="{ backgroundColor: '#1A192B' }">
     <template #edge-custom="props">
       <TransitionEdge v-bind="props" />
     </template>

docs/examples/transition/TransitionEdge.vue

@@ -1,7 +1,7 @@
 <script setup>
+import { computed, ref } from 'vue'
 import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
 import { getBezierPath, useVueFlow } from '@vue-flow/core'
-import { computed, ref } from 'vue'
 
 const props = defineProps({
   id: {

docs/examples/update-edge/App.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { ref } from 'vue'
 import { Background } from '@vue-flow/background'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { ref } from 'vue'
 
-const elements = ref([
+const { updateEdge, addEdges } = useVueFlow()
+
+const nodes = ref([
   {
     id: '1',
     type: 'input',
@@ -21,31 +23,31 @@ const elements = ref([
     position: { x: 400, y: 100 },
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
-  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
 ])
 
-const { updateEdge, addEdges } = useVueFlow()
+const edges = ref([{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true }])
 
 function onEdgeUpdateStart(edge) {
-  return console.log('start update', edge)
+  console.log('start update', edge)
 }
 
 function onEdgeUpdateEnd(edge) {
-  return console.log('end update', edge)
+  console.log('end update', edge)
 }
 
 function onEdgeUpdate({ edge, connection }) {
-  return updateEdge(edge, connection)
+  updateEdge(edge, connection)
 }
 
 function onConnect(params) {
-  return addEdges([params])
+  addEdges([params])
 }
 </script>
 
 <template>
   <VueFlow
-    v-model="elements"
+    :nodes="nodes"
+    :edges="edges"
     fit-view-on-init
     @edge-update="onEdgeUpdate"
     @connect="onConnect"

docs/examples/update-node/App.vue

@@ -1,15 +1,8 @@
 <script setup>
+import { reactive, ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { reactive } from 'vue'
 
-const defaultLabel = '-'
+const { onPaneReady, findNode, updateNode } = useVueFlow()
-const { onPaneReady, getNode } = useVueFlow({
-  nodes: [
-    { id: '1', label: defaultLabel, position: { x: 100, y: 100 } },
-    { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
-  ],
-  edges: [{ id: 'e1-2', source: '1', target: '2' }],
-})
 
 const opts = reactive({
   bg: '#eeeeee',
@@ -17,31 +10,34 @@ const opts = reactive({
   hidden: false,
 })
 
-function updateNode() {
+const nodes = ref([
-  const node = getNode.value('1')
+  { id: '1', label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden, position: { x: 100, y: 100 } },
-  node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
-  node.style = { backgroundColor: opts.bg }
+])
-  node.hidden = opts.hidden
+
-}
+const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
 
 onPaneReady(({ fitView }) => {
   fitView()
-  updateNode()
 })
+
+function handleUpdate() {
+  updateNode(nodes.value[0].id, { label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden })
+}
 </script>
 
 <template>
-  <VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges">
     <div class="updatenode__controls">
       <label>label:</label>
-      <input v-model="opts.label" @input="updateNode" />
+      <input v-model="opts.label" @input="handleUpdate" />
 
       <label class="updatenode__bglabel">background:</label>
-      <input v-model="opts.bg" type="color" @input="updateNode" />
+      <input v-model="opts.bg" type="color" @input="handleUpdate" />
 
       <div class="updatenode__checkboxwrapper">
         <label>hidden:</label>
-        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
+        <input v-model="opts.hidden" type="checkbox" @change="handleUpdate" />
       </div>
     </div>
   </VueFlow>

docs/examples/validation/App.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
 
-const elements = ref([
+const { addEdges } = useVueFlow()
+
+const nodes = ref([
   { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
   {
     id: 'A',
@@ -16,6 +18,8 @@ const elements = ref([
   { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
 ])
 
+const edges = ref([])
+
 function onConnectStart({ nodeId, handleType }) {
   return console.log('on connect start', { nodeId, handleType })
 }
@@ -26,13 +30,14 @@ function onConnectEnd(event) {
 
 function onConnect(params) {
   console.log('on connect', params)
-  addEdge(params, elements.value)
+  addEdges(params)
 }
 </script>
 
 <template>
   <VueFlow
-    v-model="elements"
+    :nodes="nodes"
+    :edges="edges"
     fit-view-on-init
     class="validationflow"
     @connect="onConnect"