Vue 2 support about motion HOT 16 CLOSED

Hello @timmaier ;

There is no better advice I can give you than considering updating your app to Vue 3. 🤗

Still, I want Vue 2 to be compatible with this, as it is relying entirely on Composition API, that is available to Vue 2, there should be no issue.

The main "failing" point I can see is the directives, that are not working the exact same.

I'm still digging around this daily and hope I can get a fully working version really soon.

from motion.

Hey, please try 1.2.3!

I've been trying a local Vue 2 vue-cli app, and it works like a charm!

Please let me know if you have any issues.

We're getting closer of universal support. 🙏

from motion.

Massive thankyou working in my Vue 2 project now!

from motion.

Hello @ChangJoo-Park ;

This error is due to the fact that you're using vue-cli which does not seem to support esm-bundler. 😣

I've been pushing a new version 1.2.0 that should fix this problem.

Could you give it a try and tell me if this works for you?

Thank you for your feedback. 👍

from motion.

I had the same problem. It wasn't even possible to install with npm because of wrong peer dependency of composition api. It needs to be >= 1.0 but beta or rc doesn't seem to meet the condition. I was able to install it with yarn.

I also saw an other issue related to vue 2 support.
Global state is defined as reactive (b8e35f7) but Vue 2 Composition API requires to be initialised before creating refs or reactives.
This can cause problems if vue motion is loaded in the same chunk

from motion.

I also saw an other issue related to vue 2 support.
Global state is defined as reactive (b8e35f7) but Vue 2 Composition API requires to be initialised before creating refs or reactives.
This can cause problems if vue motion is loaded in the same chunk

Ohh this seems to be fixed here 475451a

from motion.

I have met this problem too

from motion.

Hello @Donskelle, @sukai-cheng, @timmaier

I've pushed 1.0.7 that might fix the problem you have with the dependency on @vue/composition-api.

Could you please give it a try and tell me if everything is going okay?

Thank you for your patience. 🙏

from motion.

I just started a fresh project via vue cli with vue 2 using npm and still no luck getting v-motion directive to have any effect.

Thanks for all the work you've put in to this package, it works in Vue 3 and tbh this just gives me more incentive to begin the tedious task of migrating my old project to Vue 3!

from motion.

Hello everyone,

Could you please try the latest version (1.1.9) I published, and give me your feedbacks on Vue 2 support?

I think it is fixed and this issue can be considered closed, but I would love to get your feedback beforehand.

Have a good evening 😄

from motion.

Hello everyone,

Could you please try the latest version (1.1.9) I published, and give me your feedbacks on Vue 2 support?

I think it is fixed and this issue can be considered closed, but I would love to get your feedback beforehand.

Have a good evening 😄

Hello @Tahul, I tried version 1.1.9 with Vue.js 2. but It failed with error messages here.

 error  in ./node_modules/@vueuse/motion/dist/index.esm-bundler.js

Module parse failed: Unexpected token (898:39)
You may need an appropriate loader to handle this file type, currently no loaders are configured to 
process this file. See https://webpack.js.org/concepts#loaders
|     const valueTransition = getValueTransition(transition, key);
|     // Get origin
>     let origin = valueTransition.from ?? value.get();
|     // Is target animatable
|     const isTargetAnimatable = isAnimatable(key, target);

 @ ./src/main.js 7:0-46 10:8-20
 @ multi (webpack)-dev-server/client?http://192.168.0.18:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I know make a plugin supporting Vue.js 2 and 3 is painful. I hope this error message for this issue.

repo here : https://github.com/ChangJoo-Park/vueuse-motion-issue-8

from motion.

Closer but no cigar yet!
At least I'm seeing console errors now!

Uncaught (in promise) TypeError: Cannot add property opacity, object is not extensible

Thanks for all the effort!

from motion.

Closer but no cigar yet!
At least I'm seeing console errors now!

Uncaught (in promise) TypeError: Cannot add property opacity, object is not extensible

Thanks for all the effort!

I'm on it, will be fixed soon.

from motion.

I found a new issue, transform properties seem to be applied while style ones does not.

I'll continue to dig around this issue as it is working well in Vue 3.

Thank you all for your help.

from motion.

I found a new issue, transform properties seem to be applied while style ones does not.

I'll continue to dig around this issue as it is working well in Vue 3.

Thank you all for your help.

I've fixed this in 1.2.6.

Have fun using it on Vue 2 🤗

from motion.

I've made multiple tests using Vue 2, and this seem to be fixed.

I'll be closing that issue for now, feel free to re-open if needed.

from motion.