How to integrate AOS in your Nuxt project

AOS is a popular library that you can use if you want to play animations on scroll. We’ve working with Nuxt [Vue.js framework] on a lot of our web app projects of lat and found that the integration with Nuxt is not obvious. While searching the interwebs for a viable tutorial, the most straightforward and easiest to implement is what I found below.

Rather than creating a plugin, I created a mixin, calling AOS.init() in the mounted lifecycle hook.

// mixins/aos.js
import AOS from 'aos'
import 'aos/dist/aos.css'

export default {
  mounted() {
    AOS.init({ })
  }
}

Then, in your vue file, import the mixin and add data-aos attribute on the element you want to animate.

<template>
  <div>
    <div data-aos="fade-up">This element should be animated on scroll</div>
    <div data-aos="fade-left">This element should be animated on scroll</div>
    <div data-aos="fade-right">This element should be animated on scroll</div>
    <div data-aos="fade-down">This element should be animated on scroll</div>
    <div data-aos="slide-up">This element should be animated on scroll</div>
    <div data-aos="slide-left">This element should be animated on scroll</div>
    <div data-aos="slide-right">This element should be animated on scroll</div>
  </div>
</template>

<script>
import aosMixin from '~/mixins/aos'
export default {
  name: 'PageIndex',
  mixins: [aosMixin]
}
</script>

This is the easiest solution I have come up with.