@xstate/vue

This package contains utilities for using XState with Vue.

• Read the full documentation in the XState docs.
• Read our contribution guidelines.

:warning: Vue 2 Notice:

If you're using Vue 2.x, please see the Vue recipe instead, or use the xstate-vue2 package if you want to use the Vue Composition API.

Quick start

1. Install xstate and @xstate/vue:

1npm i xstate @xstate/vue

Via CDN

1<script src="https://unpkg.com/@xstate/vue/dist/xstate-vue.min.js"></script>

By using the global variable XStateVue

2. Import the useMachine composition function:

1<script setup>
2import { useMachine } from '@xstate/vue';
3import { createMachine } from 'xstate';
4
5const toggleMachine = createMachine({
6  id: 'toggle',
7  initial: 'inactive',
8  states: {
9    inactive: {
10      on: { TOGGLE: 'active' }
11    },
12    active: {
13      on: { TOGGLE: 'inactive' }
14    }
15  }
16});
17
18const { snapshot, send } = useMachine(toggleMachine);
19</script>
20
21<template>
22  <button @click="send({ type: 'TOGGLE' })">
23    {{
24      snapshot.value === 'inactive'
25        ? 'Click to activate'
26        : 'Active! Click to deactivate'
27    }}
28  </button>
29</template>