# @xstate/vue

> XState tools for Vue

Latest version **5.0.2** (published 2026-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xstate/vue
pnpm add @xstate/vue
yarn add @xstate/vue
bun add @xstate/vue
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.2 |
| Published | 2026-10-19 |
| First published | 2020-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 30364 |
| Author | David Khourshid |
| Maintainers | davidkpiano, andarist |
| Keywords | state, machine, statechart, scxml, state, graph, vue, composable |

## Links

- npm: https://www.npmjs.com/package/@xstate/vue
- Repository: https://github.com/statelyai/xstate
- Homepage: https://github.com/statelyai/xstate/tree/main/packages/xstate-vue#readme
- Issues: https://github.com/statelyai/xstate/issues
- npm.io page: https://npm.io/package/@xstate/vue

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 5.0.2 (latest) — 2026-10-19
- 6.0.0-alpha.5 (alpha) — 2026-11-02
- 3.0.0-beta.6 (beta) — 2023-11-13
- 6.0.0-alpha.4 — 2026-10-19
- 6.0.0-alpha.3 — 2026-09-28
- 6.0.0-alpha.2 — 2026-09-22
- 5.0.1 — 2026-07-14
- 6.0.0-alpha.1 — 2026-06-20
- 5.0.0 — 2025-06-19
- 4.0.4 — 2025-05-31
- 4.0.3 — 2025-05-12
- 4.0.2 — 2025-01-12
- 4.0.1 — 2024-12-24
- 4.0.0 — 2024-11-12
- 3.1.4 — 2024-09-21
- … 27 more at https://npm.io/package/@xstate/vue/versions

## README

# @xstate/vue

This package contains utilities for using [XState](https://github.com/statelyai/xstate) with [Vue](https://github.com/vuejs/vue).

- [Read the full documentation in the XState docs](https://stately.ai/docs/xstate-vue).
- [Read our contribution guidelines](https://github.com/statelyai/xstate/blob/main/CONTRIBUTING.md).

## :warning: Vue 2 Notice:

If you're using Vue 2.x, please see [the Vue recipe](https://xstate.js.org/docs/recipes/vue.html) instead, or use the [`xstate-vue2` package](https://github.com/ChrisShank/xstate-vue2) if you want to use the Vue Composition API.

## Quick start

1. Install `xstate` and `@xstate/vue`:

```bash
npm i xstate @xstate/vue
```

**Via CDN**

```html
<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:

```vue
<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>
```

---
_Source: https://npm.io/package/@xstate/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._