Laravel 9: Where to place common javascript file?

Question

In my Laravel 9 project that I am working on, I want to put a javascript file containing common functions in app.blade.php. As per How to include External CSS and JS file in Laravel 5.5, I placed the js file in public/js folder and included the following in app.blade.php

 <!-- common js functions added by Ravi  -->
<script src="{{ asset('js/common_js.js') }}" ></script>

However, this file is not getting included on the page, and the js functions included in the file are not available in console.

Could someone advise me how to include a js file so that it is available for all pages?

Thanks.

Omar, I looked at the answer you referred to. That is an old question, perhaps applicable to old versions of Laravel. One more observation: When I update my app.blade.php, it does not refresh, in spite of using "npm run dev" as well as clearing browser cache and running php artisan cache:clear, php artisan config:cache; etc — user761100
– user761100, Commented Apr 9, 2022 at 14:37

Gev99 · Accepted Answer · 2022-04-09 19:31:11Z

1

if you are using laravel vue do this

place th common_js.js file in resources folder than change this

//in webpack.mix.js
mix.js(["resources/js/app.js","resources/js/common_js.js"], "public/js")

and in app.blade.php use this

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

than

npm run dev

edited Apr 9, 2022 at 19:31

answered Apr 9, 2022 at 15:00

Gev99

2881 silver badge5 bronze badges

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

3 Comments

Gev99 Over a year ago

@user761100 than do this

user761100 Over a year ago

I updated webpack.mix.js to include my javascript file. After this, I used npm run dev, and I noticed that javascript functions from my file are included in public/js/app.js. In the second part of your instructions, I believe that you meant to include the script in app.blade.php (and not app.blade.js). This file already includes <script src="{{ asset('js/app.js') }}" defer></script> therefore do I need to <script src="{{ mix('js/app.js') }}" defer></script>. However, I am still not able to use the functions defined in a Vue component. Any suggestion?

user761100 Over a year ago

I have noticed that the javascript functions I included in <script src="{{ asset('js/common_js.js') }}" ></script> are available. Not sure why they were not available earlier. May be the cache issue?

Gev99 · Accepted Answer · 2022-04-09 01:03:55Z

0

run command

php artisan view:clear

answered Apr 9, 2022 at 1:03

Gev99

2881 silver badge5 bronze badges

5 Comments

user761100 Over a year ago

It did not help.

Gev99 Over a year ago

@user761100 are you using laravel with vue?

Gev99 Over a year ago

or only laravel?

user761100 Over a year ago

Laravel with Vue

Gev99 Over a year ago

@user761100 follow this answer stackoverflow.com/a/71809190/17154158

Ahmed Hassan · Accepted Answer · 2022-04-09 01:54:49Z

0

you need to check the path rendered by asset() if it's not the correct path you can change the asset path from the .env file ASSET_URL

answered Apr 9, 2022 at 1:54

Ahmed Hassan

6595 silver badges7 bronze badges

7 Comments

user761100 Over a year ago

I don't think I should be changing the ASSET_URL. Rather, I would rather like to put the file in required (correct) folder. On my local system, when I use asset('js/common_ravi.js'), it displays "localhost/js/common_ravi.js". Not sure if this is correct.

Ahmed Hassan Over a year ago

when you open localhost/js/common_ravi.js did you get the file content? if not please check if the files exist in public/js

user761100 Over a year ago

Well not with localhost, but with 127.0.0.1:8000/js/common_ravi.js, I do see the file contents in browser. The path for my javascript file is /Users/Home/laravel_apps/cota/public/js/common_ravi.js (My application's root folder is /Users/Home/laravel_apps/cota. So I believe that everything is at correct location.

Ahmed Hassan Over a year ago

try to correct your app URL in the .env file change APP_URL=http://localhost to APP_URL=http://127.0.0.1:8000

user761100 Over a year ago

Ahmed, I made the change you suggested. Now asset('js/common_ravi.js') returns "127.0.0.1:8000/js/common_ravi.js" However, I still don't see the file in "view-source". I have noticed that page source is not reflecting changes to app.blade.php in spite of using npm run dev and clearing browser cache as well as php artisan cache:clear. Perhaps that is the issue...But why the changes are not getting reflected.

|

Collectives™ on Stack Overflow

Laravel 9: Where to place common javascript file?

3 Answers 3

3 Comments

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related