Typing XState in Vue 3

In this follow-up tutorial on using XState for state management in Vue 3, we will create a more advance state machine using Typescript to define "typed states" while learning how to invoke asynchronous data fetching.

Typed states allow us to create a discriminated union of possible states and to "narrow" the the type of our XState context on a per-state basis.

Using typed states will greatly improve working with our state, context, and events inside of Vue templates by providing type hints and only allowing us to access fields of the context that pertain to any particular state.

I really enjoyed the developer experience of working with XState, Typescript, and Vue (and the Vite dev/build tool).

I hope you will, too!

Contents
00:00 Intro
3:00 Scaffold wit Vite
7:15 XState Inspect
11:14 Restaurant Data
13:09 Typing XState
18:50 XState Config
20:50 Invoking Async Methhod
28:15 Using State in Vue
33:30 Completed App Demo

[MarkBernardinis]

What's good about your video is that you add a little troubleshooting of problems and solutions. A lot of videos have the perfect example without the trial and error behind it which is where the learnings come from. Love the Typescript in them as well, definitely has a way to go (from a fully integrated bug free experience) but is definitely better than it used to be.

[DaveCollison]

Thank you for a very useful video. I know tiny bits are out of date now (that's computers for you) but the official docs helped me through.

[santicros]

OMG!! Awesome tutorial!!! I've used XState with Vue many times but never with Typescript and this was gold! Thanks so much ❤️

[FlorianSinatra]

At 33:00 that's not an error, unless you narrow the type (like in your template) context.restaurants can still be undefined. It only shows an error in the template if you don't narrow the type because undefined is not iterable (in the v-for).

[wobsoriano]

thanks for this but holy crap, xstate is so complicated for a simple app hahaha