CODEGURU

Как подружить nuxt и scrollToPlugin

GSAP — отличная и заслуженно очень популярная библиотека. Соответственно, и плагин scrollToPlugin тоже пользуется большой популярностью. Но если вы решите использовать его с nuxt.js, то вас ждёт сюрприз. Вот сейчас мы и разберёмся что с ним делать.

Сюрприз в следующем: вы импортировали GSAP, сам плагин, на dev сервере у вас всё прекрасно работает. А вот при запуске production версии ситуация не такая радужная. Плагин не работает и консоль радует ошибкой Failed to execute scrollTo on Window: parameter 1 (options) is not an object.. Такая ошибка говорит о том, что scrollToPlugin просто не загрузился. Что? А куда он делся? А его заботливый webpack при сборке исключил. Он же заботится, чтобы размер итоговых файлов был как можно меньше. И в данном случае оказывает нам медвежью услугу. Но это не страшно и решается буквально одной строчкой кода:

import { TweenMax } from "gsap/umd/TweenMax";
import ScrollToPlugin from "gsap/umd/ScrollToPlugin";

//вот эта строчка и решает проблему
const plugins = [ ScrollToPlugin ];

Есть, кстати, ещё один вариант решения этой проблемы. Вы ведь не обязаны устанавливать GSAP через NPM. CDN прекрасно работает. Просто добавьте ссылку в nuxt.config.js в секции head на https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js.