Include JS libraries in Laravel 5.5

Question

I read this page of documentation on how to include a library like JQuery. I proceeded like this:

npm install jquery
npm run dev

Since JQuery didn't become magically available after this, I looked around, and there it is referenced and used in public/js/app.js. So I used the following line in my master layout file, and now I can use JQuery.

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

I did not see such a workaround anywhere online, so my question is, am i doing it right? Furthermore I get this error in the Console:

TypeError: window.Laravel is undefined[Learn More] http://localhost/js/app.js:1697:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:778:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:41491:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:66:18 http://localhost/js/app.js:1:11

It's laravel 5.4...

Fahmi
– Fahmi

2017-06-17 16:55:56 +00:00
Commented Jun 17, 2017 at 16:55 — Fahmi
– Fahmi, Commented Jun 17, 2017 at 16:55

Neadan Ceors · Accepted Answer · 2017-10-07 03:40:54Z

Yes, that is the most direct way to include jQuery in both Laravel 5.4 and 5.5. But that may not be the only way nor the best way. Laravel allows at least two ways to include external or custom JS libraries.

Method A : Without Laravel Mix

Method B : With Laravel Mix (npm run dev/production)

Laravel includes jQuery using Method B, in the file resources/assets/js/bootstrap.js.

For any changes in resources/assets to take effect, one would need to run npm run dev/production under the project directory first. This combines all the JS files included in assets/js/ into a single file public/js/app.js, which can then be used by including

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

in the

<head>...</head>

block of a view.

As to the window.Laravel is undefined error, this

<script>
    window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
    ]) !!};
</script>

is also required in the <head>...</head> of every view file that requires and before public/js/app.js.

Ru Chern Chong · Accepted Answer · 2017-06-19 02:33:13Z

1

Laravel 5.5 comes with jQuery out of the box. You don't actually need to do anything.

Your error seemed to be related to its CSRF token. Referring to window.Laravel is undefined

Add this to the <head></head> section of your HTML file.

<script>
    window.Laravel = {!! json_encode([
        'csrfToken'=>csrf_token()
    ]) !!}
</script>

edited Jun 19, 2017 at 2:33

answered Jun 16, 2017 at 15:20

Ru Chern Chong

3,78613 gold badges36 silver badges43 bronze badges

2 Comments

Makan Over a year ago

So, Back to the question. How can i generally include JS libraries?

Ru Chern Chong Over a year ago

@MakanTayebi so when you first Laravel, you will have a file called bootstrap.js inside app.js. bootstrap.js has already configured jQuery right out of the box. All you need to do is to link your app.js script inside your HTML file and that is all you need. Like I've said, your problem could be a Laravel CSRF token. See the answer above for the code block.

Collectives™ on Stack Overflow

Include JS libraries in Laravel 5.5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related