How do I import a jQuery library into Vue.js

Question

From a HTML template i am converting to vue js application with Laravel so like There is function which is drag and drop table

 src="assets/js/jquery.dataTables.min.js">
 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js">

And Table is like

                    <table class="table exampleleft tble-dsg tables_ui t_draggable sourcetable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Lead Source</th>
                                <th>Value</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody class="t_sortable">
                            <tr>
                                <td>lOREM IPSUM</td>
                                <td>Website</td>
                                <td> $ 750,000.00</td>
                                <td> <div class="btn-group justify-content-center">

                            </div>
                        </div></td>
                            </tr>
                            </tbody>
                            <table>






$(document).ready(function() {
  var $tabs = $('.t_draggable')
  $("tbody.t_sortable").sortable({
    connectWith: ".t_sortable",
    //items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    zIndex: 999990
  }).disableSelection();

  var $tab_items = $(".nav-tabs > li", $tabs).droppable({
    accept: ".t_sortable tr",
    hoverClass: "ui-state-hover",
    drop: function( event, ui ) { return false; }
  });
});

Now When i try with vue js

i included file require('../jquery.dataTables.min.js'); Than

mounted: function() {
        console.log('initilizede -adfg');
        var $tabs = $('.t_draggable')
        $("tbody.t_sortable").sortable({
            connectWith: ".t_sortable",
            //items: "> tr:not(:first)",
            appendTo: $tabs,
            helper:"clone",
            zIndex: 999990
        }).disableSelection();

        var $tab_items = $(".nav-tabs > li", $tabs).droppable({
            accept: ".t_sortable tr",
            hoverClass: "ui-state-hover",
            drop: function( event, ui ) { return false; }
        });

}

So nothing is happend If someone can help with that how can we used Jquery Library in Vue js with Laravel

I am very thankful to all

This question is not duplicate. i am asking how to include jQuery library not jQuery. — Impunkj, Feb 06 '19 at 04:12

score 1 · Answer 1 · answered Feb 05 '19 at 11:47

1

You need to run npm install jquery --save

Open file build/webpack.base.conf.js and add plugins:

Add:

const webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

answered Feb 05 '19 at 11:47

Satyam Pathak

6,612
3
25
52

How to add custom library and call their function? – Impunkj Feb 05 '19 at 11:50

score 0 · Answer 2 · answered Feb 05 '19 at 11:30

0

Use ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

plugins: [


  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
]

answered Feb 05 '19 at 11:30

Waleed Raza

73
11

jquery is available but that library is not initialized and not working – Impunkj Feb 05 '19 at 11:38
it seems like Jquery is complete its execution before Vusjs render. try Vue.NextTick its makes the Dom ready. – Waleed Raza Feb 05 '19 at 12:01
https://vuejs.org/v2/api/#Vue-nextTick – Waleed Raza Feb 05 '19 at 12:03
Not working i tried with => jQuery('#progress-1').LineProgressbar({ percentage: 25 }); console.log('Vue is Great'); this.msg = 'VUE is great'; }); – Impunkj Feb 05 '19 at 12:37

How do I import a jQuery library into Vue.js

2 Answers2