Как использовать JQuery и его плагины во Vue?

Question

[Артем Кондрацкий]

Для начала скажу, что я гуглил. Нашел вроде бы как подключить JQuery его плагины, но это не работает должным образом. Сам JQuery работает нормально, но при попытке инициализировать плагин вылазит

ошибка

Uncaught ReferenceError: jQuery is not defined
    at eval (jaliswall.js?b0c2:118)
    at Module../public/js/jaliswall.js (app.js:2404)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:933)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (App.vue?c53a:1)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:2428)

код инициализации

.....
import $ from 'jquery'
import '../public/js/jaliswall'
...
mounted: function () {
    $('.main section.section.section-portfolio .wall').jaliswall({
      item: '.wall-item',
      columnClass: '.wall-column'
    })
  }
.....

Как мне подключить JQuery и плагин? Есть еще вроде плагин ProvidePlugin для Webpack, но я не понял как его подключить и куда, вроде бы в настройки Webpack'а в файле vue.config.js. Заранее спасибо.

Answer 1

[Andrey Suha]

здесь можете почитать как ProvidePlugin использовать. Ну и как бы использовать jq во vue это кусок г...на

Comments

[Артем Кондрацкий]

согласен с

использовать jq во vue это кусок г...на

, но приходится использовать

[Михаил]

Артем Кондрацкий,
import $ from 'jquery'
window.$ = window.jQuery = $;

[Артем Кондрацкий]

Михаил, не работает

[Andrey Suha]

Артем Кондрацкий, Вам ну8 именно provide plugin я ж скинул ссылку как его использовать

[Михаил]

Артем Кондрацкий, это в главном файле нужно

[Andrey Suha]

Михаил, это далеко не всегда работает учитывая ещё что плагин самописный. Я толком не знаю почему это не работает, но нужен именно provide plugin, проверено опытным путём

[Артем Кондрацкий]

Andrey Suha, я сделал все по инструкции и оно не работает, как ошибка была так и осталась

[Andrey Suha]

Артем Кондрацкий, покажите vue.config

[Артем Кондрацкий]

Andrey Suha,

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        appConfig: ['~/core/appConfig', 'default']
      })
    ]
  }
}

[Andrey Suha]

Артем Кондрацкий, зачем Вам appConfig?

"jQuery": "jquery"

Добавьте

[Артем Кондрацкий]

Andrey Suha, исправил, ошибок нет, но сам плагин не работает. Думаю я сам уже разберусь. Пересоздайте ответ, отмечу как решение

Answer 2

[PEMOK]

Не читал, не одобряю. Это как рисовать карандашом красками

Comments

[ivankalita]

PEMOK, друг, посоветуй тогда best practics, если необходимо после рендера компонентов Vue, работать с элементами DOM, анимацией (и прочими фичами, которые раньше делались на jQuery), как быть тогда?!?

[Артем Кондрацкий]

ivankalita, писать на чистом js тогда

[ivankalita]

Артем Кондрацкий, т.е. раз уж перешли на Vue, то никакого jQuery, да (а что насчет Lodash, Underscore и т.д.)?
Спасибо за ответ, спас от говнокода :)

[PEMOK]

ivankalita, анимация есть в vue. А зачем тебе работать с dom. Пример приведи?

[ivankalita]

PEMOK, а вот буквально вчера столкнулся с тем, что надо было выводить в блоке повторяющиеся элементы с витиеватыми условиями (пользователь может оценить "товар" по 5-ти бальной шкале, с помощью иконок звезд) и как я понимаю, большая часть механизма Vue направлена на работу с компонентами (их рендера + фичи всякие типа роутинга и т.д.), а вот чтобы работать с отдельными элементами, как было в моём случае (иконки) необходимо использовать JS, вопрос только в каком виде (нативный, библиотеки какие и др.) ????
Вот если, подскажешь как правильнее считается, буду очень благодарен

[PEMOK]

Несовсем понял, речь о звездочках на которые можно нажимать? Или о выводе повторяющихся элементов наполняемые в зависимости от входных параматров?