Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lichnow's avatar

Jquery init not work in laravel mix

in bootstrap.js window.$ = window.jQuery = require('./vendor/jquery/jquery'); after I require jquery-ui in a vue component

this work fine

mounted () {
    $(function() {
          $("#sidebar").draggable();
     });
 }

but this has a error vendor.js:31706 TypeError: $(...).draggable is not a function

(function($) {
    $("#sidebar").draggable();
 })(window.jQuery);

Is it a bug?

0 likes
2 replies
WebKenth's avatar

jQuery and jQuery-ui are two different things

You need to pull in jQuery-ui in order to use it

lichnow's avatar

@WebKenth

It's not Jquery-ui problem,I was require jquery-ui plugin and any other Jquery plugin what I want to use.

It is the error of jquery's namespace....

use laravel-mix in app.js(or bootstrap.js), namespacing Jquery like this

window.$ = window.jQuery = require('./vendor/jquery/jquery');

but when I use a Jquery Plugin in vue component,of course,first I require this plugin in app.js or anywhere js file what will use in mix

second,I write to a vue component's mounted to call this plugin like this:

 $(function() {
          $("#sidebar").scrollbar();
     });

and I work....

but when I call it like this:

(function($) {
    $("#sidebar").scrollbar();
 })(window.jQuery);

I get a errorfunction draggable() not found,I think this is a bug of laravel-mix

Please or to participate in this conversation.