How to Use AOS in a Nuxt Project demo repo

AOS (opens new window) is a CSS-Driven “On Scroll” animation library.

# 👣 Steps

  1. Create a Nuxt project and install AOS.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i aos@next
  1. Create AOS plugin and pass the options (opens new window) needed in plugins/aos.client.js.
import AOS from "aos";

import "aos/dist/aos.css";

export default ({ app }) => {
  app.AOS = new AOS.init({ disable: "phone" }); // eslint-disable-line new-cap
  1. Register the plugin in nuxt.config.js.
export default {
  plugins: ["@/plugins/aos.client"]
  1. Use AOS, e.g. in pages/aos.vue.
    <h1 data-aos="fade">AOS Demo</h1>

    <p data-aos="flip-up" data-aos-duration="1000">
      AOS is awesome! Thank you
      <a class="anchor" href="">
        Michał Sajnóg

    <p data-aos="slide-up" data-aos-easing="ease">
      Paragraph with fade up animation and <code>ease</code> easing.

    <p data-aos="zoom-in" data-aos-anchor=".anchor">
      Paragraph with fade down animation with the above link as anchor. This
      makes this paragraph animate before the previous paragraph starts

    <hr class="my-5" />

    <b-row class="list-unstyled">
        v-for="(item, index) in img"
        <b-img fluid :src="getImg(item)" class="mb-3 mr-3" />

        <h2 class="h4">{{ item }}</h2>

export default {
  data() {
    return {
      img: ["Animals", "Arch", "Nature", "People", "Tech"]
  methods: {
    getImg(name) {
      return "" + name.toLowerCase();

# 📖 Explanation

  • Use animations (opens new window) with data-aos attribute.
  • Adjust the behavior (opens new window) with data-aos-* attributes.
    • delay delays the animation start time. Both this and duration accept values (opens new window) from 50 to 3000, with step 50ms.
    • once limits the animation to fire only once.
    • duration sets how long the animation lasts.
    • easing is for changing the transition function.
    • anchor makes another element triggers the animation.
Last updated: 11/1/2020, 3:28:11 PM