How to use Jquery with Vue.js?

Question

During the implementation of Vue.js with sematic-ui,

I have the following Jquery to open the modal:

$('.ui.modal').modal('show');

how to make this integration in Vue?

Answer 1

With v-el it is possible to "mark" html elements to be used inside components.
It is also possible to use custom directives to make these manipulations.

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

---

References:

http://vuejs.org/api/#v-el
http://vuejs.org/examples/select2.html

Answer 2

When doing jQuery include via tag script the jQuery object will be automatically attached to the window object, and can then be used normally within a Vue component. Just take a reference to the modal Markup using v-el.

Ex.:

<div class="modal fade" tabindex="-1" role="dialog" v-el:modal>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

And in its component:

{
  methods: {
    metodoAssociadoAoCliqueUsuario () {
      jQuery(this.$els.modal).modal('show')
    }
  }
}

Answer 3

This answer is for those who dropped here by Google or search in the same OS.

It is not indicated to use Jquery with Vue, because both manipulate the DOM (in Vue we have the virtual DOM and this is only the simple answer). Whenever you need to use something that uses jquery (as it materializes, although the version from 1.0 does not use anymore, or bootstrap) look if there is no component ready for Vue. Nowadays (2019), it is possible to call jquery normally in a 'method' or 'computed' of Vue, and run it as in the example of Fabio Vedovelli.

{
    methods: {
        metodoaAssocioadoAoClique: function() {
            $('#id_do_componente').modal('show');
        }
}

One important thing to remember is that if you need to call another function within the jquery call, you should initialize this before, as follows:

{
    methods: {
        outraFuncao: function() {
            return alert("teste")
        }
        metodoaAssocioadoAoClique: function() {
            var self = this;
            $('#id_do_componente').modal({
                //como opção do componente, tenho que chamar outra função
                self.outraFuncao();
            });
        }
}

I’m not yet a deep connoisseur, because I’m still knowing and experiencing Vue (and I’m also new to programming yet).

References:

https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

DOM and the Virtual DOM of Vue

https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20

This is a Vue against Jquery (more propaganda for Vue than analysis)

https://www.educba.com/vue-js-vs-jquery/