Use AOS library in NuxtJS

How to use the AOS library with NuxtJS ?

Published 2021-07-16

AOS (Animate On Scroll) is a library that triggers animation on scroll when an element is visible. It's really easy to use and can add some cool UI elements to your project 😎

1 - Import AOS

yarn add aos

1 - Create a mixin

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

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

3 - Use it in your pages and/or components

    <template>
        <div data-aos="fade-up" data-aos-delay="500" data-aos-duration="3000">
          Hello, world.
        </div>
    </template>
    
    <script>
    import aosMixin from '~/mixins/aos'
    export default {
      mixins: [aosMixin],
    }
    </script>

Related Tutorials :