vueuse
SSR doesn't seem to work as intended
As per docs on SSR Support section, there are 2 options that should work:
<template>
<div
v-motion="{
initial: {
y: 100,
opacity: 0
},
enter: {
y: 0,
opacity: 1
}
}"
>
Hello
</div>
<!-- OR -->
<div
v-motion
:initial="initial"
:enter="enter"
>
Hello
</div>
</template>
<script setup>
const initial = ref({
y: 100,
opacity: 0,
})
const enter = ref({
y: 0,
opacity: 1,
})
</script>
The 1st option where we put a stringified object as value on the v-motion directive works. However, the 2nd option where we bind variables to :initial and :enter doesn't work. The latter shows the elements normally and then the animations get applied afterwards. See gif below:
That said, the composable usage isn't working either. It seems to behave as if the variables only gets bound on mounted but that doesn't work for SSR.
Additional Context:
This works and I'm getting away with this for the meantime:
<template>
<div v-motion="motion">Hello</div>
</template>
<script setup>
const motion = {
initial: {
y: 100,
opacity: 0
},
enter: {
y: 0,
opacity: 1
}
};
</script>
Versions used:
{
"nuxt3": "latest",
"@vueuse/motion": "2.0.0-beta.18"
}
Hello @cerino-ligutom!
Thanks for pointing that out, I have my little idea about why this happens!
Will keep you posted about the fix.
Hi @Tahul , thanks for getting back on this. Not using it anymore on my SSR projects as the template got unwieldy with all the animations but would be happy to assist.
I think it's still happening. Check this repro on stackblitz and refresh the web view.
I'm not sure if we can make SSR work using the v-motion directive with separate variant props (e.g. :initial, :enter), we can't retrieve the separate props during SSR as the node does not exist yet 🤔.
The usage of passing the variants directly to v-motion allows us to correctly set the node's style during SSR, no existing node is required as the directive is provided all the necessary information.
I think we should probably mention this in the docs, I'll look into the (undocumented?) <Motion> component as well SSR should work without issues for components using the prop usage.
