Composables and Providers

Vue Flow ships a set of composables and a provider that let you manage state, reach the flow’s methods, and build custom components. The composables read the flow’s store, so that store has to exist above them in the component tree.

Providing a store

<VueFlow> creates the store itself, but you can also create and provide one higher up so that parents and siblings can reach it. There are two ways to do it, and they do the same thing:

• setupVueFlow() — a composable you call in a component’s setup. It creates the store, provides it to that component’s subtree, and returns the instance right there. This is the idiomatic choice when you own the component that renders <VueFlow>.
• <VueFlowProvider> — a component you wrap around a subtree. Reach for it when you want to share one store across several sibling components.

You’ll want one of them when:

• a composable such as useVueFlow is used outside of <VueFlow>,
• you need the flow’s state or methods from a parent or sibling of <VueFlow>,
• you render multiple flows on a page (each one scopes its own store), or
• you’re working with a client-side router.

<script setup lang="ts">
import { setupVueFlow, VueFlow } from '@xyflow/vue';
import Toolbar from './Toolbar.vue';
 
// available here and to everything rendered below
const { fitView } = setupVueFlow();
</script>
 
<template>
  <Toolbar />
  <VueFlow v-model:nodes="nodes" v-model:edges="edges" />
</template>

Or with the provider component wrapping the subtree:

<script setup lang="ts">
import { VueFlowProvider } from '@xyflow/vue';
import Flow from './Flow.vue';
import Toolbar from './Toolbar.vue';
</script>
 
<template>
  <VueFlowProvider>
    <Toolbar />
    <Flow />
  </VueFlowProvider>
</template>

useVueFlow()

useVueFlow() returns the flow instance and its methods, so you can read and change nodes, edges, and the viewport from anywhere inside the store. In the example below a toolbar calls the viewport helpers zoomIn, zoomOut, and fitView: