vueuse / motion

🤹 Vue Composables putting your components in motion

Home Page:https://motion.vueuse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

useSpring not working

mickaelchanrion opened this issue · comments

Hello,
It seems like useSpring is not working. Or at least, not working like the documentation is describing it. Is it up to date?

Check this minimal setup: https://stackblitz.com/edit/github-2k6bjv?file=nuxt.config.ts,app.vue

Also, it's not visible in stackblitz but on my vscode, this very code is screaming like never regarding typings (which I only get if I import explicitly @vueuse/motion in the .vue component, otherwise the function is not typed).

image

After some digging in the source code, I understand the v2 expects more something like this (no typescript error this way):

const box = ref<HTMLElement>()
const scale = ref(0)
const spring = useSpring({ scale: scale.value }, { target: box })

function scaleUp() {
  spring.set({ scale: 2 })
}

But even this doesn't work and the reactivity seems to get lost as this template doesn't get updated:

<pre>{{ scale }}</pre>

I need help please! 🙏