How to add Javascript dependencies and CSS files in Laravel correctly

Question

I am using Laravel 7 to build one of my application. I have the following Javascript dependencies.

Bootstrap
Data Tables
jQuery
Select 2
Toastr
D3

Now I am using the new laravel/ui package and has scaffolded a Bootstrap based application. It uses Laravel Mix and has compiled app.css and app.js file. The app.js has the following code:

require('./bootstrap');

The bootstrap file has following code :

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

I think in this file we need to add the other dependencies. In the documentation also it says to add the Javascript dependencies to here. I have a confusion on how to add DataTables and other above mentioned dependencies to the file. Which package names I need to use in the require ?

Also, most of these packages has their own CSS files too. How can I add the CSS files for all the dependencies in file like the bootstrap.js ? Currently all the CSS files are imported in the app layout blade template. If someone can add a tutorial link , that also will be great.

Well if you see inside package.json there are all dependencies that are included in bootstrap.js file. So you can install dependencies like Datatable or select2 etc... using npm and then you can include it in bootstrap.js — Akhtar Munir
– Akhtar Munir, Commented May 16, 2020 at 13:29

Mohammad · Accepted Answer · 2020-05-16 13:28:57Z

2

for install JavaScript Package on your laravel project you cad do this, example Datatable :

Install npm package

npm install --save datatables.net-bs4
include it in Include it in resources/js/bootstrap.js

require('datatables.net-bs4');

Include in resources/sass/app.scss

@import '~datatables.net-bs4/css/dataTables.bootstrap4.css';

Run npm run dev in your terminal to compile the necessary files

last create a js file and include it on your bootstrap.js file and use package

<script>
$(document).ready(function () {
  $('table').DataTable();
});
 </script>

dont forget check your webpack.mix.js file

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

and include your compile js and css file in your template

  <link href="{{ mix('css/app.css') }}" rel="stylesheet">

<script src="{{ mix('js/app.js') }}"></script>

i hope to help you and sorry for bad my English

answered May 16, 2020 at 13:28

Mohammad

6761 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Happy Coder Over a year ago

Perfect. This is what I need exactly. Now if you can suggest me how can I include page wise JS also to mix, that would be great. I need to initialize the data table only in listing page and not in loading page. How can I do this effectively ?

Mohammad Over a year ago

@HappyCoder Thanks, i don't know about that, but u can look at on sitepoint.com/use-laravel-mix-non-laravel-projects and github.com/JeffreyWay/laravel-mix/tree/master/docs maybe you can find your solutions about your question

Happy Coder Over a year ago

Actually it was for Laravel project only. I have some Javascript in the view files like Ajax requests for loading some dropdowns and all. What I am doing now is adding these files specifically in mix configurations, and using the <script> to include it in the page. Thanks a lot !!

Collectives™ on Stack Overflow

How to add Javascript dependencies and CSS files in Laravel correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related