Quick Start
Installation
Run one of the following commands:
bash
npx nuxi@latest module add xstatenpx nuxi@latest module add xstateAnd add it to your modules in nuxt.config.ts:
ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['nuxt-xstate']
})import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['nuxt-xstate']
})Using in the project
Module auto-imports everything you need to create your own state machines, below are the basic first steps you can take
- export
createMachineobject from your machines directory (machinesby default):
ts
export default createMachine({
id: 'loading',
initial: 'idle',
predictableActionArguments: true,
states: {
idle: {
on: {
CLICK: 'loading'
}
},
loading: {
on: {
CLICK: 'idle'
}
}
}
})export default createMachine({
id: 'loading',
initial: 'idle',
predictableActionArguments: true,
states: {
idle: {
on: {
CLICK: 'loading'
}
},
loading: {
on: {
CLICK: 'idle'
}
}
}
})- It will be auto-imported in your components/pages and ready for usage:
vue
<template>
<div>
<h1>Current state: {{ state.value }}</h1>
<button @click="send('CLICK')">
CLICK
</button>
</div>
</template>
<script setup lang="ts">
const { state, send } = useMachine(loadingMachine)
</script><template>
<div>
<h1>Current state: {{ state.value }}</h1>
<button @click="send('CLICK')">
CLICK
</button>
</div>
</template>
<script setup lang="ts">
const { state, send } = useMachine(loadingMachine)
</script>For more check out the usage page.