SSR doesn't seem to work as intended

[cerinoligutom]

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"
}

[Tahul]

Hello @cerino-ligutom!

Thanks for pointing that out, I have my little idea about why this happens!

Will keep you posted about the fix.

[Tahul]

Could you try @vueuse/[email protected] ?

Sorry for the last answer, this one is now tracked in #81

[cerinoligutom]

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.

[BobbieGoede]

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.

[BobbieGoede]

With 2.2.0 released you can now use the <Motion> component which will work better for SSR projects, I have edited your reproduction to demonstrate here.

Unfortunately we're having some issues deploying the updated docs which describes the <Motion> component so I'll add a link when that is resolved.

I'll close this issue now, if you specifically prefer the v-motion directive and would like SSR to work with that we could open a separate issue, the solution for that will be a bit more complicated but it's not impossible. Let me know if you have any questions!

[BobbieGoede]

Docs have been updated, you can find more about the components here https://motion.vueuse.org/features/components!