AOS in Nuxt doesn't work when switching between pages

Question

I am trying to use AOS in my Nuxt project in "universal" mode but I am experiencing an issue when I switch pages. The tool works fine when I manually reload the page but for some reason AOS stops working when I switch between pages. For example, on my homepage I have text fading up and when I first get to the homepage, it works when I scroll that element into view. However, if I navigate away from the homepage and then go back to the homepage at some point, the text no longer fades up and stays hidden or opacity at zero.

Here is the aos.js plugin in my project's plugin directory

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
Vue.use(AOS.init())

Here is the plugins array in nuxt.config.js

plugins: [
    { src: '~plugins/aos', ssr: false, mode: 'client' },
  ],

Here is the HTML element in my Vue component.

<div
   :class="{
      'py-6': true,
      'px-6': !isMobile,
      'px-0': isMobile,
   }"
   data-aos="fade-up"
   data-aos-duration="1000"
>
   ...content in here...
</div>

Any help would be greatly appreciated. Thanks.

Answer 1

The accepted answer is not valid anymore for newer Nuxt versions. You will have to disable SSR for libraries that deal with the browser window in Nuxt. You can read more about this https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only

export default {
  plugins: [
    { src: '~/plugins/aos.js', mode: 'client' }, // only in client side
    '~/plugins/aos.client.js', // this syntax also works
  ]
}

Answer 2

You will have to disable SSR for libraries that deal with the browser window in Nuxt, for example this should work

plugins: [
  { src: '~plugins/aos', ssr: false },
],

You can find more information in documentation https://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only

Answer 3

In may case this work for me, Nuxt 2 :

// ~/plugins/aos.js
    import Vue from 'vue'
    import AOS from 'aos'
    import 'aos/dist/aos.css' // If you need load compiled AOS css here in plugin

    class AosPlugin {
      config = {
        // Your AOS config here
      }

      install(Vue) {
        AOS.init(this.config)

        Vue.mixin({
          updated() {
            this.$nextTick(function () {
              AOS.refreshHard() // This is needed to avoid the un-animate aos effect
            })
          }
        })
      }
    }

    Vue.use(new AosPlugin())

//file.vue
<template>
   ...
</template>

<script>
import 'aos/dist/aos.css'

export default {
//use async
   async mounted() {
          const AOS = await import('aos');
          AOS.init();
       }
//or not
   mounted() {
        import('aos').then(AOS => AOS.init());
   }
}
</script>

resource reference : https://github.com/michalsnik/aos/issues/87#issuecomment-615953927