Introduction

What is a Plugin?

A plugin is a function that takes Vue Flow app lifecycle hooks as an argument and returns void. It allows you to extend on the core functionalities of Vue Flow by using the existing store and hooks.

type Plugin = (hooks: PluginHooks) => void

interface PluginHooks {
  beforeCreate: EventHookOn<[string, FlowOptions | undefined]>
  created: EventHookOn<VueFlowStore>
  beforeDestroy: EventHookOn<VueFlowStore>
  destroyed: EventHookOn<string>
}

How to use a Plugin?

To use a plugin, you first need to create a new Vue Flow app and then pass the plugin to the use method.

// main.ts
import { createApp } from 'vue'
import { createVueFlow } from '@vue-flow/core'

import { MyPlugin } from './my-plugin'

const app = createApp(App)

const vueFlow = createVueFlow()

vueFlow.use(MyPlugin)

app.mount('#app')

How to create a Plugin?

To create a plugin, you need to create a function that takes the PluginHooks as an argument and returns void.

// my-plugin.ts
import { PluginHooks } from '@vue-flow/core'

export const MyPlugin: Plugin = (hooks) => {
  hooks.created(([store, extend]) => {
    console.log('Vue Flow App instance created')
    
    // use the extend fn to extend the store instance
    extend({
      myTestPlugin: () => console.log('Hello from my plugin!')
    })
    
  })
}

Plugin Hooks

beforeCreate

The beforeCreate hook is called before the store is created. It takes the id and options as arguments.

hooks.beforeCreate(([id, options]) => {
  console.log('store is about to be created')
})

created

The created hook is called after the store is created. It takes the store as the first and an extend function as the second argument. You can use the extend function to extend the store instance with your custom properties.

hooks.created(([store, extend]) => {
  console.log('store created')
  
  // Extend the store
  extend({ myProp: () => {} })
  
  // myProp is now accessable from store.myProp
})

beforeDestroy

The beforeDestroy hook is called before the store is destroyed. It takes the store as an argument.

hooks.beforeDestroy((store) => {
  console.log('store is about to be destroyed')
})

destroyed

The destroyed hook is called after the store is destroyed. It takes the id as an argument.

hooks.destroyed((id) => {
  console.log('store destroyed')
})

TypeScript

You can create a type for your plugin so users have proper IDE support for your custom properties on their store instance.

import type { UseTestPlugin } from './types'

declare module '@vue-flow/core' {
  // extend the StoreBase interface to add your custom properties  
  interface StoreBase {
    myTestPlugin: UseTestPlugin
  }
}

Introduction ​

What is a Plugin? ​

How to use a Plugin? ​

How to create a Plugin? ​

Plugin Hooks ​

beforeCreate ​

created ​

beforeDestroy ​

destroyed ​

TypeScript ​