This package contains utilities for using XState with Vue.
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.
- Install
xstateand@xstate/vue:
npm i xstate @xstate/vueVia CDN
<script src="https://unpkg.com/@xstate/vue/dist/xstate-vue.min.js"></script>By using the global variable XStateVue
- Import the
useMachinecomposition function:
<script setup>
import { useMachine } from '@xstate/vue';
import { createMachine } from 'xstate';
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: { TOGGLE: 'active' }
},
active: {
on: { TOGGLE: 'inactive' }
}
}
});
const { snapshot, send } = useMachine(toggleMachine);
</script>
<template>
<button @click="send({ type: 'TOGGLE' })">
{{
snapshot.value === 'inactive'
? 'Click to activate'
: 'Active! Click to deactivate'
}}
</button>
</template>