feat(core): add VueFlowProvider

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vue-flow/core
 
+## 1.43.1
+
+### Patch Changes
+
+- [#1833](https://github.com/bcakmakoglu/vue-flow/pull/1833) [`8eccc19`](https://github.com/bcakmakoglu/vue-flow/commit/8eccc19d9ffc7534bee6e085d2be6f5a7c8b857b) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add missing vue-flow\_\_container class to marker defs.
+
 ## 1.43.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.43.0",
+  "version": "1.43.1",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<[email protected]>",

packages/core/src/components/VueFlowProvider/VueFlowProvider.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useVueFlow } from '../../composables'
+import { VueFlow } from '../../context'
+import type { VueFlowProviderProps } from '../../types'
+
+const props = defineProps<VueFlowProviderProps>()
+
+const hasInjection = inject(VueFlow, null)
+
+if (!hasInjection) {
+  // createVueFlow() or setupVueFlow()
+  useVueFlow({
+    nodes: props.initialNodes,
+    edges: props.initialEdges,
+    fitViewOnInit: props.fitViewOnInit,
+  })
+}
+</script>
+
+<template>
+  <slot />
+</template>

packages/core/src/composables/useVueFlow.ts

@@ -19,7 +19,7 @@
  *
  * @public
  * @returns a vue flow store instance
- * @param idOrOpts - id of the store instance or options to create a new store instance
+ * @param idOrOpts - id of the store instance or options to pass to the store instance (options are deprecated!)
  */
 export function useVueFlow(id?: string): VueFlowStore
 export function useVueFlow(options?: FlowOptions): VueFlowStore

packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg class="vue-flow__marker" aria-hidden="true">
+  <svg class="vue-flow__marker vue-flow__container" aria-hidden="true">
     <defs>
       <MarkerSymbols
         v-for="marker of markers"

packages/core/src/types/flow.ts

@@ -331,3 +331,9 @@ export interface FlowSlots extends NodeSlots, EdgeSlots {
   'zoom-pane': () => any
   'default': () => any
 }
+
+export interface VueFlowProviderProps {
+  initialNodes?: Node[]
+  initialEdges?: Edge[]
+  fitViewOnInit?: boolean
+}