Xstate: @xstate/vue README example doesn't work

[BurningDog]

Description

I copied the Vue component in the README at https://github.com/davidkpiano/xstate/tree/master/packages/xstate-vue into a file in a local @vue/cli project (Vue 2.6.11) and ran it.

Expected Result

Click on the button and see the copy Active! Click to deactivate appear.

Actual Result

First I was prompted to install @vue/composition-api - is the xstate Vue readme example only for Vue 3?

Console error:

[Vue warn]: Property or method "state" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <XstateExample> at src/components/XstateExample.vue

So the component has no idea what state is (or send). Declaring state as a root-level reactive property didn't work either.

Additional context

However, following the example at https://xstate.js.org/docs/recipes/vue.html works fine, which uses a very different (and more complex) approach.

[davidkpiano]

Yes, this is for the Vue composition API.

CC. @AleksejDix can we add the render component for Vue 2?

[RomainLanz]

Hey there! 👋

If needed, I can make a PR to create an example with Vue 2.

[davidkpiano]

@RomainLanz That would be greatly appreciated!

[coolfarmer]

Any news about the example with Vue 2 ? I have the same error and I'm new to XState.
All the documentation is about Vue3 ? :/

[davidkpiano]

@coolfarmer The recipe for Vue 2.x is here: https://xstate.js.org/docs/recipes/vue.html

[coolfarmer]

@coolfarmer The recipe for Vue 2.x is here: https://xstate.js.org/docs/recipes/vue.html

Excellent thanks!! :)

[davidkpiano]

This has been updated in the @xstate/vue docs with a 2.x notice.