Skip to content

Laravel Mix support

Jump to bottom Edit New page
Tortue Torche edited this page Dec 8, 2020 · 15 revisions

If you don't want to use an asset pipeline package like Larasset you can use jQuery-Laravel with Laravel Mix.

In your Laravel application root

[Optional] To publish jQuery-Laravel JavaScript libraries in your resources/assets/js directory, run this command:

php artisan vendor:publish --provider="Efficiently\JqueryLaravel\JqueryLaravelServiceProvider" --force

[Optional] If you want to use the Turbolinks package, run this command:

php artisan vendor:publish --provider="Frenzy\Turbolinks\TurbolinksServiceProvider" --force

Add/replace the code below in your webpack.mix.js file:

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

You should edit the resources/assets/js/bootstrap.js, to replace these lines:

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

By the code below, you can uncomment some lines according to your needs:

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

    // [Optional] If you want to use the Turbolinks package
    // See: https://github.com/wshostak/turbolinks-jquery
    // require('./turbolinks-jquery');

    require('bootstrap-sass');

    require('./jquery_ujs');
    // or if you can install the jquery-ujs module, with this command:
    //   npm install --save jquery-ujs
    // See: https://github.com/rails/jquery-ujs
    // require('jquery-ujs');

    // [Optional] If you want to use the Turbolinks package, install the JS module with this command:
    //   npm install --save turbolinks
    // See: https://github.com/turbolinks/turbolinks
    // window.Turbolinks = require('turbolinks');
    // Turbolinks.start();

Edit the resources/views/layouts/app.blade.php file to move the <script src="{{ mix('js/app.js') }}"></script> line inside the <head> tag just after the <link href="{{ mix('css/app.css') }}" rel="stylesheet"> line, like this:

<head>
    <!-- ... -->

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

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

Finally, to compile the jQuery-Laravel scripts, run this Laravel Mix command:

npm run dev

Or for production (minify, versioning...):

npm run prod
Add a custom footer
Add a custom sidebar
Clone this wiki locally