[xstate/vue] Using Vue 3 composables in xState machines

[fcieminski]

Hi!

My question might seem trivial, but it's been bothering me. How should I use Vue 3's built-in composables, like for example Router, or useAttrs etc.? From what I know, these composables can’t be used outside of the <script setup> or other composables. However, when creating an XState machine, there should ideally be only one source of truth. So, if there's something I need to process after a certain action, I should be able to use those composables inside the XState machine, for example in actions.

Is there any way to make this work? Or am I misunderstanding how XState machines should work, and I should separate concerns between XState and Vue? What’s the best approach for this?