jQuery should not be used with VueJS

[emahuni]

I have noticed that you use jQuery to hide and show dialogs, however, it is recommended not to since it manipulates the DOM. Besides this, I couldn't even use the component since jQuery doesn't even load. Here is the error:

webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17 [vue-router] uncaught error during route navigation:
warn @ webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:17
webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1898 ReferenceError: jQuery is not defined
    at eval (webpack-internal:///./node_modules/semantic-ui-css/semantic.min.js:11)
    at Object../node_modules/semantic-ui-css/semantic.min.js (:8080/2.js:1969)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:14)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:115)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at eval (webpack-internal:///./node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js&:2)
    at Module../node_modules/semantic-kanban/src/semanticKanban.vue?vue&type=script&lang=js& (:8080/2.js:1923)

I am trying to use it in a Quasar Framework app.

Please see my recommendation about your component here, notice the comments about the use of jQuery in Vue. If possible make this Quasar Framework compatible or even a QF component. Quasar has all the dialogs, cards and things you need. A lot of developers consider jQuery deprecated because of modern approaches to reactive designs. This is a very nice component and I would like to see it go far.

Therefore, this issue is related to the use of jQuery instead of VueJS features, Vue actually doesn't want you to do exactly what you are doing; manually manipulate the DOM. Consider using v-show or v-if. Create or use QF dialogs instead of jQuery UI dialogs.

I noticed that your component is utilizing Semantic-UI-css to create dialogs. Anyway, the jQuery fact still remains. Do without it pliz. Consider doing this:

<div class="ui basic modal" v-show="showDialog">
   ....
</div>

// ...
data() {
   return {
       showDialog: false,
   }
},
// ...
methods: {
show () {
   // $(this.$el).modal('show')
   this.showDialog = true
},
hide () {
   // $(this.$el).modal('hide')
   this.showDialog = false
},
}

see no need for jQuery there 🤷🏽‍♂️

[danilosampaio]

@emahuni

Replace $(this.$el).modal('hide') with v-show didn't work, becasue semantic-kanban is built using Semantic-UI, and Sematic-UI depends on jquery.

[emahuni]

I thought you were using just the CSS part of Semantic UI? In that case you have to change the UI lib you are using because of VueJS. VueJS doesn't need and strongly discourages the use of JQ. It means most projects where this package could be used will not use it because of JQ presence. Developers who are aware of the issues it causes won't even try to use it because of the presence of JQ.

[niallobrien]

Agreed, a Vue component should not depend on jQuery.