Failed to resolve directive: auto-animate
WouS95 opened this issue · comments
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!
Are you using composition api?
Yes I am!
Hmm. Then I would need to see a reproduction.
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.