Как осуществить подключение внешнего файла *.js к компоненту *.vue?

Question

[sizmailov]

Есть проект на vue.js
-src
|--assets
|--components
|---component.vue
|--router
|---index.js
|--script
|---hover.js
|--App.vue
|--main.vue

Смысл такой. Мне нужно подключить к component.vue файл hover.js и еще разместить такой код:

Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
      const imgs = Array.from(el.querySelectorAll('img'));

      new hoverEffect({
        parent: el,
        intensity: el.dataset.intensity || undefined,
        speedIn: el.dataset.speedin || undefined,
        speedOut: el.dataset.speedout || undefined,
        easing: el.dataset.easing || undefined,
        hover: el.dataset.hover || undefined,
        image1: imgs[0].getAttribute('src'),
        image2: imgs[1].getAttribute('src'),
        displacementImage: el.dataset.displacement
      });
});

Пробовал

import { hoverEffect } from '../script/hover.js'
// и
import '../script/hover.js'

Но ничего не хочет работать. Подскажите куда конкретно нужно все это разложить?

Comments

[Алексей Ярков]

Но ничего не хочет работать

Это не описание проблемы. Ошибки есть?

[Ro37A]

Как вы экспортите hoverEffect?

Answer 1

[Антон Швец]

Идем сюда и смотрим как подключать

npm install hover-effect

import hoverEffect from 'hover-effect'

для корректной работы эффекты нужно вешать после mounted, и следить за измененем списка картинок, если что-то поменялось, то вешать ховер-эффект на новые картинки.
Возможно он сам умеет замещать себя, тогда достаточно будет просто развесить заново на все картинки. Но для более конкретной инфы надо смотреть как этот сам ховер устроен.

Answer 2

[Григорий К.]

import hover from '../script/hover.js'

Этот код должен корректно импортировать. Если так не импортируется, то проблема в файле. Есть ли в нём собственно export?

Если hoverEffect создаёт эффект, напрямую манипулируя DOM, то он может не работать потому, что это противоречит vue, в котором страница рендерится посредством манипулирования над Virtual DOM.

В любом случае, опишите подробнее, что именно вы хотите сделать (задачу, а не просто "вот код подключить"), что за библиотеку используете, какие ошибки вылезают.

Comments

[sizmailov]

Задача. Есть картинка в img, сам тег лежит в родительском блоке .grid__item-img
Вот сайт с ховером, который нужно добавить на картинку. Помимо hover.js подключается еще three.js.
Ошибку пишет, что hoverEffect is not defined. Либо вообще не отрабатывает данный скрипт

Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
      const imgs = Array.from(el.querySelectorAll('img'));

      new hoverEffect({
        parent: el,
        intensity: el.dataset.intensity || undefined,
        speedIn: el.dataset.speedin || undefined,
        speedOut: el.dataset.speedout || undefined,
        easing: el.dataset.easing || undefined,
        hover: el.dataset.hover || undefined,
        image1: imgs[0].getAttribute('src'),
        image2: imgs[1].getAttribute('src'),
        displacementImage: el.dataset.displacement
      });
});

[Григорий К.]

sizmailov, эта библиотека - простой js файл старой версии, не ES модуль.

Попробуйте подключить её, используя exports-loader.

Полезная ссылка: Export from old school libraries in Webpack.

При этом ей требуется также подключать ещё пару либ, THREE, например.

Вообще, учитывая, что сам hover.js довольно маленький, и не является npm пакетом, я бы предложил просто переписать его на ES модуль: добавить в него явный импорт threejs и tween (которые, конечно, надо установить через npm install), и добавить явный экспорт нужной функции hoverEffect.

Но библиотека напрямую манипулирует DOM, и скорее всего эффект будет слетать при каждом ререндере. Тут надо либо как-то шаманить с v-once и вешать эффект после рендера, либо перезапускать эффект при каждом ререндере...