Categories
Front-end Development

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.

By Justin Ritchie

Hello world! I'm the co-founder of EX Media and Refresh Bahamas. I'm also UI/UX designer, front-end developer and Digital Marketer based in Florida and from The Bahamas. I specialize in design but I am also a Full-Stack Developer. Always repping my Hurricanes! UMiami Alumni.