Quick Start

npm install --save @xstate-ninja/vue xstate-ninja @xstate/vue xstate

To track state machines in your project, do this:

<script setup lang="ts">
import { useInterpret } from '@xstate-ninja/vue'

const actor = useInterpret(machine, { devTools: true })
</script>

The useMachine hook is available too:

import { useMachine } from '@xstate-ninja/vue'

const [state, send, service] = useMachine(machine, { devTools: true })

Install the browser extension, open browser devtools (F12) and select the XState panel.