https://github.com/lexpeartha/nuxt-xstate

XState integration for Nuxt
https://github.com/lexpeartha/nuxt-xstate

composition-api dx finite-state-machine hacktoberfest library nuxt nuxt-module nuxtjs state-charts vue xstate

Last synced: 3 months ago
JSON representation

XState integration for Nuxt

• Host: GitHub
• URL: https://github.com/lexpeartha/nuxt-xstate
• Owner: Lexpeartha
• License: mit
• Created: 2022-08-07T12:07:26.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-19T04:01:56.000Z (4 months ago)
• Last Synced: 2025-03-29T22:05:37.432Z (4 months ago)
• Topics: composition-api, dx, finite-state-machine, hacktoberfest, library, nuxt, nuxt-module, nuxtjs, state-charts, vue, xstate
• Language: TypeScript
• Homepage: https://nuxt-xstate.lexpeartha.com/
• Size: 2.77 MB
• Stars: 56
• Watchers: 3
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Nuxt XState

![GitHub package.json version](https://img.shields.io/github/package-json/v/Lexpeartha/nuxt-xstate?style=flat-square) ![npm (prod) dependency version](https://img.shields.io/npm/dependency-version/nuxt-xstate/@nuxt/kit?style=flat-square) ![npm (prod) dependency version](https://img.shields.io/npm/dependency-version/nuxt-xstate/xstate?style=flat-square) ![npm](https://img.shields.io/npm/dm/nuxt-xstate?label=npm%20downloads&style=flat-square) ![Website](https://img.shields.io/website?down_message=offline&label=documentation&style=flat-square&up_message=online&url=https%3A%2F%2Fnuxt-xstate.lexpeartha.com%2F) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/Lexpeartha/nuxt-xstate/ci.yml?label=ci&style=flat-square&branch=main)

Nuxt XState module allows for easy integration of [XState](https://xstate.js.org/) with Nuxt.js.

- [Read documentation](https://nuxt-xstate.lexpeartha.com) :book:

- [Online playground](https://stackblitz.com/edit/nuxt-xstate-playground?file=app.vue) :video_game:

## Features :sparkles:

- Nuxt Bridge & Nuxt 3 supported

- Auto-importing of XState composables

- Auto-importing of your own state-machines

## Installation :floppy_disk:

Run one of the following commands:

```bash

npx nuxi@latest module add xstate

```

And add it to your `nuxt.config.ts`:

```js

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({

  modules: ['nuxt-xstate']

})

```

## Usage :toolbox:

:point_right: Check out the [documentation](https://nuxt-xstate.lexpeartha.com/getting-started/usage)

## Work in progress :construction:

- [ ] [`@xstate/inspect`](https://xstate.js.org/docs/packages/xstate-inspect/) support

## Development :computer:

- Clone repository and install dependencies with `yarn install`

- Run `yarn dev:prepare` to generate type stubs.

- Use `yarn dev` to start [playground](./playground) in development mode.