41

I am new to Laravel framework. I want to use jQuery in web application built using Laravel framework.

But don't know how to link to jQuery library in Laravel project.

3
  • 2
    just add the jquery link manually in your blade template head or you can use elixer/gulp..though I think you need to watch laracasts.com/series/laravel-5-fundamentals which will guide you better in your laravel journey .
    – codegenin
    Sep 10, 2015 at 9:46
  • thank you, i am still watching these video, though I've got little understanding ...
    – Misterk
    Sep 10, 2015 at 10:19
  • same here when I was starting..the secret is never give up on learning..just keep repeating the videos as you needed :-) good luck.
    – codegenin
    Sep 10, 2015 at 10:23

5 Answers 5

31

you can use online library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

or else download library and add css in css folder and jquery in js folder.both folder you keep in laravel public folder then you can link like below

<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

or else

{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}
6
  • I have a write <script src="{{asset('js/jquery.min.js')}}"></script> in the page, and I also have jquery.min.js in js folder in public folder. Still i have got error: Failed to load resource: the server responded with a status of 404 (Not Found) (16:17:19:682 | error, network) at public/js/jquery-1.11.3.js Uncaught ReferenceError: $ is not defined (16:17:19:690 | error, javascript) at (anonymous function) (localhost:8000/jquery/index:7:9) Debugging session with browser was closed.
    – Misterk
    Sep 10, 2015 at 10:21
  • try using online library then what hapeen ? Sep 10, 2015 at 10:22
  • better ypu use online library instead of loading from your resource folder Sep 10, 2015 at 10:24
  • also you can look at this question stackoverflow.com/questions/29614890/… Sep 10, 2015 at 10:25
  • even i get error some time.so i am using online library Sep 10, 2015 at 11:35
23

To add jquery to laravel you first have to add the Scaffolded javascript file, app.js to your top layout.

This can easily be done adding this tag.

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

There are two main procesess depending on the version but at the end of both you will have to execute:

npm run dev

That adds all the dependencies to the app.js file. But if you want this process to be done automatically for you, you can also run:

npm run watch

Wich will keep watching for changes and add them.

Laravel 5.*

jQuery is already included in this version of laravel as a dev dependency.

You just have to run:

npm install

This first command will install the dependencies. jquery will be added.

Laravel 6.* , 7.* and 8.*

jQuery has been taken out of laravel that means you need to import it manually like so.

npm i jquery

Then add it to the bootstrap.js file in resources/js/bootstrap.js You may notice that axios and lodash are imported there as well so in the same way we can import jquery.

Just add wherever you want there:

//In resources/js/bootstrap.js
window.$ = require('jquery');

If you follow this process in the 5.* version it won't affect laravel but it will install a more updated version of jquery.

15
  • This does not work for laravel 6 you need to download the jquery library and add it to your public folder
    – Jiren
    May 21, 2020 at 14:04
  • @Jiren Your way also works. The difference with mine is that am using laravel mix to add this to the app.js file. The advantage of my way is scripts management and laravel mix uglifies your code using webpack. Also you may wish to import specific functionalities of jquery instead of the complete library, you can do that my way. If you are commenting because it didn't worked for you remember you need to execute npm run dev or npm run watch. This is the way i use.
    – jogarcia
    May 21, 2020 at 15:10
  • @Jiren I just want to say that this is standard good practice to add external javascript libraries to laravel. You just have to check the resources/js/bootstrap.js file and you'll notice that lodash and axios are imported this way.
    – jogarcia
    May 21, 2020 at 15:14
  • 2
    This was helpful. For whatever reason, I imported a library with npm whose .js file already included jquery, but it refused to work. Manually pulling jquery and then including that line in bootstrap.js resolved this. Laravel is great in many ways, but the learning curve for this type of task is rather high. I went from wanting to just learning Laravel to being forced to also learn about npm, mixins, etc, because Laravel seems to be reliant on it.
    – David Tran
    Feb 18, 2021 at 6:54
  • please make sure to remove "defer" keyword from the <script src="{{ mix('js/app.js') }}" defer></script>
    – Nehal
    Nov 7, 2021 at 7:17
19

For those using npm to install packages, you can install jquery via npm install jquery and then use elixir to compile jquery and your other npm packages into one file (e.g. vendor.js). Here's a sample gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix

    .scripts([
        'jquery/dist/jquery.min.js',
        // list your other npm packages here
    ],
    'public/js/vendor.js', // 2nd param is the output file
    'node_modules')        // 3rd param is saying "look in /node_modules/ for these scripts"

    .scripts([
        'scripts.js'       // your custom js file located in default location: /resources/assets/js/
    ], 'public/js/app.js') // looks in default location since there's no 3rd param

    .version([             // optionally append versioning string to filename
        'js/vendor.js',    // compiled files will be in /public/build/js/
        'js/app.js'
    ]);

});
5

You can link libraries from cdn (Content delivery network):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Or link libraries locally, add css files in the css folder and jquery in js folder. You have to keep both folders in the laravel public folder then you can link like below:

<link rel="stylesheet" href="{{asset('css/bootstrap-theme.min.css')}}">
<script src="{{asset('js/jquery.min.js')}}"></script>

or else

{{ HTML::style('css/style.css') }}
{{ HTML::script('js/functions.js') }}

If you link js files and css files locally (like in the last two examples) you need to add js and css files to the js and css folders which are in public\js or public\css not in resources\assets.

5

In Laravel 6 you can get it like this:

try {
    window.$ = window.jQuery = require('jquery');
} catch (e) {}
1
  • 1
    Assigning require('jquery') to window.$ and window.jQuery instead of just to window.$ is absolutely necessary when dealing with older libraries like boostrap3. This saved my day. Jan 27, 2021 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.