Nuxt3 SSR Issue

[itsmnthn]

[Vue warn]: Failed to resolve directive: auto-animate
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'getSSRProps')
   at component line where v-auto-animate is used

[pmcp]

I have the same issue, any insight into this? I tried wrapping my list in but still get an error in my console: "dir is undefined"

[itsmnthn]

Nope i'm not able to solve this

[chris-visser]

I'm not getting the error on my current nuxt 3 stable. Maybe its resolved?

import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(autoAnimatePlugin)
})

[kllpff]

I have the same issue... need help :(

[justin-schroeder]

Can someone produce a minimal reproduction and post it back to here? Happy to take a look

[MarkDonatelli]

I had the same issue with Nuxt 3 and updated my plugin the same as @chris-visser and it worked like a charm

[SuddenDev]

Okay, so I still experience the same problem, but maybe this is useful to someone.
The problem seems to be, that in the Vue Directive the getSSRProps() node is missing for nuxt to correctly work with the directive on the server side. A quick and dirty workaround from me:

// <your-nuxt-root>/plugins/auto-anim-directive.ts

import autoAnimate from "@formkit/auto-animate"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('auto-anim', {
    mounted: (el, binding) => {
      autoAnimate(el, binding.value || {});
    },
   // we can just return this as an empty object
    getSSRProps(binding, vnode) {
      return {}
    }
  })
})

Nuxt should import that directive automatically. Maybe restart your dev server.
In your Vue Component you can then use it as intended:

<script setup>
const toggle = ref(false);
</script>

<template>
  <!-- <ClientOnly> -->
    <div class="mb-20 m-container" v-auto-anim>
      <button class="p-5 bg-green" @click="toggle = !toggle">click me</button>
      <div class="bg-red w-20 h-20" v-if="toggle"></div>
    </div>
  <!-- </ClientOnly> -->
  </div>
</template>

@justin-schroeder: Maybe worth giving it a shot? If you want to, i can make a PR.

[ymansurozer]

Just in case someone wanders in here: Delete .client from your Nuxt 3 auto animate plugin, otherwise you get this error.

[Timothy1102]

for anyone got this issue, check your module name in nuxt config file. it has to be @formkit/auto-animate/nuxt.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@formkit/auto-animate/nuxt'],
})