Clever Geek Handbook

Using laravel mix to include js dependencies

I can't get my js libraries to work, a while ago I decided to have a separate js file for each library I used (so I have a jquery.js file and a bootstrap.js file included in my layout), everything worked fine until I didn't have to add jquery-ui to this chaos and got this error

Uncaught TypeError: $(...).slider is not a function

until i loaded, jquery and jquery-ui in the same file. The problem is I don't want to include jquery ui wherever I include jquery, beacuse I only use it on 2 pages. Below I will put my code:

JQuery-ui.slider.js:

require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');

app.js:

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

webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');

I am using the following npm modules:

  • bootstrapping-sass
  • jquery
  • JQuery-u
+3


source to share


2 answers


I ended up just creating a file where I need jquery, bootstrap.js, and then I need that file in a specific file for two pages ... Below is its code:

app.js

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


page.js

require('./app.js')
require('jquery-ui/ui/widgets/slider');

He tosses that now it works even though now I have to include the js file in all kinds ... The question is that it is still open, I hope someone has a beter idea.

+1


source


I think you should load jquery-ui when the condition is met, for example:

if (window.loadJQueryUI) {
    require('jquery-ui');
}


And you need to initialize loadJQueryUI

for two pages, for example:

<script type="text/javascript">
    window.loadJQueryUI = true;
</script>
0


source






More articles:


All Articles