Sharing & Tooling

useSharedMachine

Creates or retrieves a singleton machine instance by config.id. Useful when unrelated components need to share the same running machine without prop-drilling or Pinia.

function useSharedMachine<TState, TEvent, TContext>(
  config: MachineConfig<TState, TEvent, TContext>,
  options?: UseMachineOptions,
): MachineInstance<TState, TEvent, TContext>

Requires VueMachinePlugin to be installed.

// In component A
const { state } = useSharedMachine(cartMachine)

// In component B (completely separate tree)
const { send } = useSharedMachine(cartMachine)

// Both share the same machine instance — same state, same context
await send('ADD_ITEM') // component A's state.value updates reactively

If a machine with config.id is already registered in the store, the existing instance is returned. Otherwise a new one is created and registered automatically.

Vue plugin

Install VueMachinePlugin to enable the global machine registry (useMachineStore, useSharedMachine) and DevTools integration.

import { createApp } from 'vue'
import { VueMachinePlugin } from 'vue-state-machine'
import App from './App.vue'

const app = createApp(App)
app.use(VueMachinePlugin)
app.mount('#app')

useMachineStore()

Provides direct access to the global registry. Useful for debugging or admin UIs.

const store = useMachineStore()

store.register('cart', instance) // register manually
store.unregister('cart')
store.get('cart') // MachineInstance | undefined
store.getAll() // Map<string, MachineInstance>

Calling useMachineStore() without the plugin installed throws a descriptive error.

DevTools

The DevTools integration lives in a separate entry point so it never ends up in production bundles.

import { createApp } from 'vue'
import { VueMachinePlugin } from 'vue-state-machine'
import { VueMachineDevtools } from 'vue-state-machine/devtools'
import App from './App.vue'

const app = createApp(App)
app.use(VueMachinePlugin)

// Only in development
if (import.meta.env.DEV) {
  app.use(VueMachineDevtools)
}

app.mount('#app')

Panel features:

• List of all registered machines (from MachineStore)
• Current state, context as a JSON tree, full transition history
• "Send Event" button — pick an event type and add a custom payload
• Timeline: every transition is emitted as a named DevTools timeline event with timestamp and payload

VueMachinePlugin must be installed before VueMachineDevtools.