Как подключить wow.js к nuxt проекту?

Для подключения библиотеки wow.js к проекту на Nuxt.js, следуйте следующим шагам:

1. Установите wow.js и animate.css. Выполните следующую команду в командной строке вашего проекта:

npm install wowjs animate.css --save

2. Создайте новый файл в директории plugins, например, wow.js. В этом файле мы будем настраивать и подключать wow.js.

3. В файле wow.js добавьте следующий код:

import Vue from 'vue';
import WOW from 'wow.js';

// Подключение animate.css
require('animate.css/animate.css');

export default () => {
  // Инициализация wow.js
  new WOW().init();
};

4. Затем добавьте новый плагин в файл nuxt.config.js. Откройте файл и найдите массив plugins. Добавьте в него новый объект:

module.exports = {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/wow.js', ssr: false }
  ],
  // ...
}

Обратите внимание на настройку ssr: false, поскольку wow.js не поддерживает SSR (Server-Side Rendering). Это позволяет избежать потенциальных проблем во время предварительного рендеринга сервера.

5. Теперь вы можете использовать классы wow.js и animate.css в ваших компонентах. Например:

<template>
  <div>
    <h2 class="wow fadeIn">Привет, мир!</h2>
  </div>
</template>

<script>
  export default {
    mounted() {
      // Если вы хотите переинициализировать wow.js после загрузки новых данных (например, после AJAX-запроса), можете использовать следующий код
      this.$nextTick(() => {
        this.$wow.init();
      });
    },
  };
</script>

6. Важно: Если вы используете серверный рендеринг (SSR), убедитесь, что у вас есть проверка наличия DOM в вашем коде компонента, чтобы избежать ошибок при сборке на сервере во время запуска приложения:

<template>
  <div>
    <h2 :class="existingDOM ? 'wow fadeIn' : ''" v-if="existingDOM">Привет, мир!</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        existingDOM: false
      };
    },
    mounted() {
      // Проверка на наличие DOM
      if (process.client) {
        this.existingDOM = true;

        // Переинициализация wow.js после загрузки данных (если необходимо)
        this.$nextTick(() => {
          this.$wow.init();
        });
      }
    },
  };
</script>

После выполнения этих шагов, вы успешно подключили wow.js к вашему проекту на Nuxt.js. Теперь вы можете использовать анимации wow.js и animate.css в вашем приложении.