<VueFlowProvider />

Source on GitHub

The <VueFlowProvider /> component creates a Vue Flow store and provides it to everything it wraps, so components rendered outside of <VueFlow /> — a sidebar, a toolbar — can still read and drive the flow through useVueFlow() and the other composables.


<script setup lang="ts">
import { VueFlow, VueFlowProvider } from '@xyflow/vue';
import '@xyflow/vue/style.css';
 
import Sidebar from './Sidebar.vue';
</script>
 
<template>
  <VueFlowProvider>
    <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
    <Sidebar />
  </VueFlowProvider>
</template>


<!-- Sidebar.vue -->
<script setup lang="ts">
import { useVueFlow } from '@xyflow/vue';
 
// works because this component is rendered inside <VueFlowProvider />
const { getNodes } = useVueFlow();
</script>
 
<template>
  <aside>
    <div v-for="node in getNodes" :key="node.id">
      Node {{ node.id }} — x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
    </div>
  </aside>
</template>

Prefer the composable setupVueFlow() when you own the surrounding component — it creates and provides the same store from <script setup> without an extra wrapper component. <VueFlowProvider /> is the template-only equivalent.

Props

<VueFlowProvider /> renders its default slot and takes no props of its own.

Notes

If you’re using a router and want a flow’s state to persist across routes, place <VueFlowProvider /> (or call setupVueFlow()) outside of the router.
Each <VueFlowProvider /> owns one store. For multiple independent flows on the same page, wrap each in its own provider.