docs: add documentation for Vue Flow slots

docs/src/.vuepress/theme/index.ts

@@ -56,8 +56,10 @@ export default {
             '/guide/',
             '/guide/getting-started',
             '/guide/theming',
-            '/guide/config',
-            '/guide/state',
+            {
+              text: 'Vue Flow',
+              children: ['/guide/vue-flow/config', '/guide/vue-flow/state', '/guide/vue-flow/slots'],
+            },
             '/guide/node',
             '/guide/edge',
             '/guide/composables',

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

@@ -1,4 +1,4 @@
-# Config
+# Config (Props)
 
 Vue Flow allows you to configure zoom, graph and flow behavior.
 Configuration can be passed either as props to the `VueFlow` component or

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

@@ -0,0 +1,42 @@
+# Slots
+
+Vue Flow provides several slots for customization.
+In addition to the node and edge slots (see the guide on [nodes](/guide/nodes.html) and [edges](/guide/edges.html)),
+there are a number of other slots you can use to customize the visualization.
+
+## Default
+
+The default slot can be used to nest elements inside the Vue Flow wrapper `<div>`.
+It will not be rendered inside the viewport, meaning it will not receive a transformation for scale or positioning.
+You can use the default slot to add a sidebar or floating toolbar etc. to your graph.
+
+## Connection Line
+
+The connection line slot allows you to pass down a custom connection line component, which will be used, when a connection
+is triggered.
+
+```vue:no-line-numbers
+<template>
+  <VueFlow>
+    <template #connection-line="connectionLineProps">
+      <CustomConnectionLine v-bind="connectionLineProps" />
+    </template>
+  </VueFlow>
+</template>
+```
+
+The full description of connection line props can be found [here](/typedocs/interfaces/ConnectionLineProps.html/).
+
+## Zoom Pane
+
+The zoom pane slot is placed inside the viewport transformation, so that it scales and moves with the current viewport zoom and position.
+
+```vue:no-line-numbers
+<template>
+  <VueFlow>
+    <template #zoom-pane>
+      <div>Some element inside the zoom pane</div>
+    </template>
+  </VueFlow>
+</template>
+```

docs/src/guide/state.md → docs/src/guide/vue-flow/state.md

@@ -25,7 +25,7 @@ watch(getNodes, (nodes) => console.log('nodes changed', nodes))
 </script>
 ```
 
-## Accessing internal state
+## Accessing Internal State
 
 Using the composition API also allows us to pass the state around outside the current component context, thus we have a lot more flexibility when  it comes
 to reading, writing and updating the state.
@@ -89,7 +89,7 @@ If you have multiple store instances in the same context, make sure to give them
 Otherwise `useVueFlow` will try to inject the first instance it can find in the current context, which would usually be the last one that has been injected.
 ::: 
 
-## State updates
+## State Updates
 
 State updates like removing elements or updating positions are applied by default.
 If you want to strictly control state changes you can disable this behavior by setting the `applyDefault` option/prop to `false`.
@@ -104,7 +104,7 @@ State changes are emitted by the `onNodesChange` or `onEdgesChange` events, whic
 To take control of state changes you can implement your own state update handlers or use the state helper functions that
 come with the library to mix it up.
 
-## Access state in options API
+## Access State in Options API
 
 `useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API.
 Though it is necessary to pass a unique id for your Vue Flow state instance, otherwise a look-up will fail and Vue Flow will create a new state instance