Using AOS library with Vue

Question

I use AOS (Animate on scroll) library with vue. AOS provides custom JS event: document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); });

I would like to fire a function when this event happens. How do I apply that into my vue component? It would look like: v-on-aos:in using v-on / @, but it doesn't work.

This is what I have tried: <div v-on:aos:in="myFunction" />

Answer 1

Add your document event listeners on created method, then pass your vue component method.

  created() {
    document.addEventListener('aos:in', this.aosEvent)
  },
   methods: {
    aosEvent(d){
      // event data
      console.log(d);
    }
  }