Failed to resolve directive: auto-animate

[WouS95]

I just updated the plugin used in my Vue.js application. (running Vite) I'm using auto-animate to animate a custom component (which is a list item). After the update I get a bunch of the following warning:

Failed to resolve directive: auto-animate

The animation also doesn't work anymore.

I import using this line: import { vAutoAnimate } from '@formkit/auto-animate';

Then in my template the following code:

 <ul v-if="vossenteams" id="voslocaties" v-auto-animate>
        <Voslocatie v-for="voslocatie in foxLocations" :key="voslocatie.id" :voslocatie="voslocatie"
          :vossenteams="vossenteams" />
      </ul>

<Voslocatie .../> is my custom component containing a template with <li>

In my package.json i made sure to use version 0.8.0 (removed the package from the node_modules folder and reinstalled with npm install) "@formkit/auto-animate": "^0.8.0",

I can't figure out what is going wrong. Could you please help me out? Thanks!

[justin-schroeder]

Are you using composition api?

[WouS95]

Yes I am!

[justin-schroeder]

Hmm. Then I would need to see a reproduction.

[WouS95]

I found out why it didn't work. I made a small new project and tried to reproduce it.

The difference was I am using the 'old' composition api with the setup function like this: Following code doesn't work and produces the failed to resolve warning:

<script lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import vAutoAnimate from '@formkit/auto-animate';

export default {
  components: {
    HelloWorld,
  },
  setup() {

    const objectlist = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
    const addListItem = () => {
      objectlist.value.push({ id: objectlist.value.length + 1 })

    }
    return {
      objectlist,
      addListItem,
      vAutoAnimate,
    }
  }

}
</script>

I need to refactor to something like this to get it to work:

<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
import vAutoAnimate from '@formkit/auto-animate';
const objectlist = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
const addListItem = () => {
  objectlist.value.push({ id: objectlist.value.length + 1 })
}
</script>

So put the setup keyword inside the script tag. I will try to refactor this on my main project as well.