CODEWITHSUNDEEP
laravel
Henry
Henry

Reputation: 1755

How do I make asset() work correctly in Laravel 8.x?

I am using Laravel 8.x in Windows 10 along with Vue 2.6.12. I am working my way through a video on combining Vue with Laravel. The video is for an older version of Laravel, probably 5.5, and probably a slightly older Vue as well so that may well be the nature of my problem. Here's the link to the video. I'm at about the 8:00 minute mark.

The problem I'm having is that when I try to execute my code, Laravel isn't seeing the app.js file no matter how much I experiment with the src parameter of the script tag. (I have a good imagination and I've done a LOT of experimenting.) The Laravel manual has not been of much help here except that I saw it mentioned an ASSET_URL parameter for the .env file so I tried specifying the leading part of the path there but nothing I've tried works; I inevitably get a 404 error. (For what it's worth, I've tried removing asset() and just coding a path the traditional way but that doesn't work either.)

My app.js file is at /resources/assets/js/app.js. The file that contains the script tag, layout.blade.php, is at /resources/views/layout.blade.php. The code in the script tag says:

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

just like the video. In the .env file, ASSET_URL='/resources/assets/'. What do I need to change to make this work? I can't think of anything else to try!

Upvotes: 1

Views: 25557

Answers (3)

Henry
Henry

Reputation: 1755

Okay, I fixed the 404 error - but now I have a new problem. I'll ask a new question about it. First, let me explain how I fixed the 404 error for app.js.

  1. I removed ASSET_URL from .env since the guy in the video hadn't done that.
  2. I imitated what the video was doing more precisely. I had been putting the script tag in a layout.blade.php file but I abandoned that and created a welcome.blade.php that was identical to the one in the video.

I'm not quite sure why my original approach wouldn't work but Laravel successfully fetches the app.js file now.

If anyone has any ideas why putting the script tag in a layout file that is then imbedded in the welcome.blade.php doesn't work, I'd be interested in hearing from you.

Thank you to everyone who tried to help!

Upvotes: 0

Donkarnash
Donkarnash

Reputation: 12835

You need to use the compiled version of the file /resources/assets/js/app.js.

npm run dev or npm run watch to compile the assets which will create corresponding app.js file in /public/js/app.js folder

Use this in your script tag

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

Upvotes: 2

Kamlesh Paul
Kamlesh Paul

Reputation: 12391

you write code in /resources/assets/js/app.js and then run npm run dev to build it file which will be generated in public/js/app.js that asset you need to include in your blade file like

in /resources/views/layout.blade.php

<script src="{{ asset('js/app.js') }}"></script> // make sure use {{ }} as asset() is helper function it need to run

here asset() point to public dir so asset('js/app.js' it means dir public/js/app.js

ref link https://laravel.com/docs/8.x/helpers#method-asset

Upvotes: 2

Related Questions