Skip to content

Laravel Mix support

Jump to bottom Edit New page
Tortue Torche edited this page Dec 13, 2017 · 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 root application

[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')
   .minify('public/js/app.js')
   .version();

If you use Bootstrap, you should edit the resources/assets/js/bootstrap.js, to comment or remove this line:

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

Then edit the resources/assets/js/app.js file, to replace the line require('./bootstrap'); by:

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

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

require('./bootstrap');

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
// global.Turbolinks = require('turbolinks');
// Turbolinks.start();

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

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

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

    <!-- Scripts -->
    <script src="{{ asset('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