[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?

[K3TH3R]

@fcieminski There's a few options for you...

1. You can get the composables inside of <script setup> and then pass that to the machine when you start it up:

const router = useRouter()
const service = useActor(MyMachine, { input: { router }})

2. Alternatively, you can also import your router directly from the export path. For example, if your router definition exists at src/router.ts and your machine is at src/MyMachine/MyMachine.ts, then you could do this:

import { router } from '../router.ts'

Assuming you have the following in that router.ts file:

export const router = createRouter({
	history: createWebHistory(),
	routes,
})

Generally speaking, there's ways to work around these things, but it's annoying to deal with. For example, you can have utility functions for vue-i18n inside of your state machines by doing the following:

export const i18n = setupI18n({
	locale: DEFAULT_LOCALE,
	fallbackLocale: DEFAULT_LOCALE,
	legacy: false,
	messages,
})

/**
 * Translation Utilities
 *
 * The normal translation functions are not available outside of the Vue composition API,
 * so we need to expose the global translation functions here. These can be used to get a
 * translation in any TypeScript or JavaScript file without first having to render the messages
 * within a Vue component.
 */
const { t: $translate, tc: $plural, d: $date, n: $number }: any = i18n.global

// Utility wrapper functions
export function getTranslation(key: string, params?: any) {
	return $translate(key, params)
}

export function getPlural(key: string, params?: any) {
	return $plural(key, params)
}

export function getDateTime(key: string, params?: any) {
	return $date(key, params)
}

export function getNumber(key: string, params?: any) {
	return $number(key, params)
}

From there you can just import your translation function to use inside of your state machine:

import { getTranslation } from '../translations.ts'