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. The integration with Nuxt is not obvious. Initially I followed this interesting tutorial. I encountered problems, which other developers have reported on Github (issue #110 or issue #87). Finally, I found my own way. I'll show you my solution in this post.

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.