AOS в Nuxt не работает при переключении между страницами

Question

Я пытаюсь использовать AOS в своем проекте Nuxt в "универсальном" режиме, но при переключении страниц возникают проблемы. Инструмент отлично работает, когда я вручную перезагружаю страницу, но по какой-то причине AOS перестает работать, когда я переключаюсь между страницами. Например, на моей домашней странице текст исчезает, и когда я впервые попадаю на домашнюю страницу, он работает, когда я прокручиваю этот элемент в поле зрения. Однако, если я уйду с домашней страницы, а затем вернусь на домашнюю страницу в какой-то момент, текст больше не будет блекнуть и останется скрытым, а непрозрачность будет равна нулю.

Здесь aos.js плагин в каталоге плагинов моего проекта

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

Вот массив плагинов в nuxt.config.js

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

Вот элемент HTML в моем компоненте Vue.

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

Любая помощь будет принята с благодарностью. Благодарю.

Answer 1

Принятый ответ больше не действителен для более новых версий Nuxt. Вам придется отключить SSR для библиотек, которые работают с браузером. windowв Нуст. Вы можете узнать больше об этом 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

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

должно сработать

Answer 3

В случае, если это сработает для меня, Nuxt 2:

ссылка на ресурс: https://github.com/michalsnik/aos/issues/87#issuecomment-615953927