xState and state machines in VueJS - visualize and finally understand your UI flows

[@isaacsouza17]

State machines are great because you can "lock" the behaviour of the UI/application to the machine so you know exactly whats going to happens next. There are plenty of videos of xstate being used with React, but not many using Vue. Thanks a lot for this one.

[@sangomalsa]

I finished Sarah Dayan's talk about Finite State Machine with StateX in Vue 3 from VueConf Toronto. I really liked the idea, but didn't quite grasp how to use it, and found your video. Loved the explanation and your step-by-step introduction to this foreign concept (to me). Amazing job!

[@TheMalni]

Thanks a lot for making this informative video Constantin, especially because it's a Vue version, your effort is much appreciated! :)

[@CesarICAO]

Awesome awesome awesome awesome, thanks for sharing this. Good explanation, now I need to put it into practice. I'm currently developing a stepper component and I'm investigating how to make use of XSTATE.

[@cdruc]

Glad it was helpful!

[@pauln1274]

Awesome overview. Would love to see a Vue 3 example as well!

[@cdruc]

I honestly haven't got the chance to try out Vue 3 just yet - but I will at some point :)

[@alextkd2003]

awesome video, thansk, I was trying to do the same using typescript but I get few errors. Can you do this same example using typescript?

[@almeralmazan]

Thank you for this video tutorial with xstate using vuejs, it would be great if you could create like these with inertiajs soon. By the way you're inertiajs videos are awesome, and I did transition immediately. Any thoughts on creating a course with inertiajs?

[@cdruc]

Hey, thanks for watching! I am thinking on launching a full inertiajs course once v1 is tagged. It will be completely **free** for my e-mail subscribers - so if you’re interested, please signup to my newsletter here: tallpad.com/

[@almeralmazan]

@@cdruc That's awesome, already signed up. Can't wait for your inertiajs course.

[@pascalraymond8424]

I've watched many videos of David K Piano about XState, and it's good to see a concrete case, very well explained ! I understand the benefits of State Machines, but IMO the final result looks much more verbose and confusing than sticking to booleans... I have to practice :) It should be possible to keep the v-model and rely on methods to reduce our code in template ? I wish I see more videos like this... Thanks you very much !

[@cdruc]

You are correct! In most cases you can just go with booleans. xState shows its value when you are building complex UIs that have lots of different states you need to keep track of. Making the shift to xState can be a bit annoying at first but once you get used to it, you are flying - it makes it so much easier to reason about the flow of your components.

[@iAmTheSquidThing]

Yes, XState currently looks very verbose, like Vuex. Perhaps something like Pinia needs to come along and cut out the boilerplate.

[@ChristianHohlfeld]

thank you, great video!

[@isaacsouza17]

Would be awesome to see you code some more complex example... This is a great starting point though. Do you have a repo with the code?

[@cdruc]

No repo, but I just added a code sandbox link in the description ☝️ As for a more complex example - I understand where you're coming from but the video would end up way too long for people to watch. This relatively simple one took me about 30mins to go through 😅

[@bowaller6892]

I was watch your inertia tutorials make a tour on your channel. I see something new and click to watch it. And I think the review of xstate is a best video for this year. WOW brilliant project. I didnt know that exist. Nice explanation bro. Like and subscribe for the nice content. When xstate is good to use? I think with big project will be a mess. Do you think can replace vuex or other state manager like vuex? (i dont remember the react state manager lol) Any tips, content or examples for more read except docs?

[@isaacsouza17]

It may be a little verbose, but it definitely pays of in the long run, specially when the application grows

[@cdruc]

Exactly. The more complex your UI gets, the more value you get from state machines. 👌