docs: update component documentation with new examples

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

docs/src/guide/components/background.md

@@ -16,9 +16,18 @@ npm install @vue-flow/background
 To use the background simply pass the `Background` component as a child to the `VueFlow` component.
 
 ```vue
+<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>
-    <Background :variant="BackgroundVariant.Dots" pattern-color="#f8f8f8" />
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+    <Background />
   </VueFlow>
 </template>
 ```

docs/src/guide/components/controls.md

@@ -15,14 +15,33 @@ npm install @vue-flow/controls
 
 To use the controls simply pass the `Controls` component as a child to the `VueFlow` component.
 
+::: warning
+Make sure you also import the styles as these are *not* part of the default theme anymore.
+:::
+
 ```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+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>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
     <Controls />
   </VueFlow>
 </template>
 ```
 
+
 ## [Props](/typedocs/interfaces/ControlProps)
 
 | Name            | Definition                | Type                                           | Optional | Default |

docs/src/guide/components/minimap.md

@@ -13,9 +13,26 @@ npm install @vue-flow/minimap
 
 To use the minimap simply pass the `MiniMap` component as a child to the `VueFlow` component.
 
+::: warning
+Make sure you also import the styles as these are *not* part of the default theme anymore.
+:::
+
 ```vue
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+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>
+  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
     <MiniMap />
   </VueFlow>
 </template>

packages/background/README.md

@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/background
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'

packages/controls/README.md

@@ -16,7 +16,6 @@ $ npm i --save @vue-flow/controls
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'

packages/minimap/README.md

@@ -17,7 +17,6 @@ $ npm i --save @vue-flow/minimap
 ## 🎮 Quickstart
 
 ```vue
-
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'