1

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!

Improve this question
3
  • at around 4:30-5:00 the video describes how to install and build your JS. is that working correctly? Also he uses {{ asset'/js/app.js') }} you've missed the {{ }} Commented Dec 4, 2020 at 7:00
  • @apokryfos - Yes, I did the npm install and npm run watch command but I ran them again, just to be sure. I also put the {{ }} back in the src parameter - they had been there for many of the different variations I'd tried earlier - but Laravel still doesn't see the file. Commented Dec 4, 2020 at 12:48
  • if npm run watch was completed sucessfully then it will not return but keep running in the background and building your JS every time you make changes. Being able to run it again indicates that it might have not ran properly Commented Dec 4, 2020 at 14:08

3 Answers 3

Reset to default
2

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

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

1 Comment

Yes, I've done all that - I've restored the {{ }} now but had used them extensively before during my experiments - but I still get the 404. I don't know what else to try. If I don't specify ASSET_URL anywhere, what is its default value?
2

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>
Improve this answer

2 Comments

I've restored the {{ }} but I still get the 404 error. (I had used the curly braces on most of my attempts to get this working but then I decided to try it without the curly braces or the asset() function and then I forgot to put them back when composing my question.
Do you have a file /public/js/app.js - check? Post the code of webpack.mix.js
0

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!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.