Level 10
Laravel uses Vite now, when you run npm run dev it is watching for changes to css and js files. I am new to Vite, but this is what I have noticed thus far.
Some details can be found here:
1 like
Aug 16, 2022
11
Level 3
Npm Run dev is different [ SOLVED ]
Laravel is different, I don't know if it's an error or if I need to do something more than usual. Last time I used laravel it was 6 months ago and everything was normal.
The sequence of commands that I performed to start my project was the following:
1 - composer create-project --prefer-dist laravel/laravel versiculos
2 - composer require laravel/ui
3 - php artisan ui vue --auth
4 - npm install
5 - npm run dev
As soon as I run npm run dev what I get is already different from what I'm used to, see: https://prnt.sc/iLQMZe1xdR_4
and I notice that it creates a file called "hot" inside the public folder with this line: http://127.0.0.1:5173
if I call the "npm run watch" , I get the following error:
C:\xampp\htdocs\versiculos>npm run watch
npm ERR! Missing script: "watch"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\marqu\AppData\Local\npm-cache\_logs22-08-16T23_48_40_492Z-debug-0.log
This made me super confused because I'm a beginner in laravel, but I've always used it following the steps I informed and it always worked. Now it's different and I don't know what it is.
My node version is: 16.17.0
Can anyone guide me?
Level 3
So instead of me using "npm run prod" to compile my css and vuejs I will use "npm run build" ??
Other than that, is everything normal?
Level 10
@mvnobrega Correct. I am new to Vite as I said, but this has been my understanding and has worked for me.
1 like
Level 3
right! But I added the following in "< head >": @vite(['resources/css/app.css', 'resources/js/app.js'])
but it does not load the example component on the blade, and on the blade I put it like this:
<example-component> </example-component>
Also npm run build compiles the data inside public > build > assets
And on the page the file sought is:
<link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" />
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>
These details are making me a little confused. If you can guide me I would appreciate it
Level 10
@mvnobrega After you run npm run build you would need to change to production and it will include the files generated in public folder.
While you are in local mode, running npm run dev will keep the css and js files updated and working on the pages.
After you run npm run build change your .env file
APP_ENV=local
to
APP_ENV=production
Then you can run it without having npm run dev, at least that is how it had worked for myself.
Level 3
did not work. Regardless of whether it is local or production , when I run npm run build the files are generated:
But the vuejs components are not loaded and in my < head > it looks like this:
It doesn't make much sense and I'm confused
Level 50
First, You have to fire a command:
npm install
After this command, you have to fire the following command:
npm run build
After firing this command, the output will be the following:
> build
> vite build
vite v3.0.4 building for production...
✓ 59 modules transformed.
public/build/manifest.json 0.25 KiB
public/build/assets/app.b1527257.css 43.38 KiB / gzip: 7.27 KiB
public/build/assets/app.ab93cf8a.js 129.03 KiB / gzip: 46.77 KiB
If you still get an error then try to reinstall the packages
Or you can read out the steps from the following blog:
https://techvblogs.com/blog/how-to-install-bootstrap-5-in-laravel-9-with-vite
1 like
Level 3
I followed your steps and it seems to work. But the vuejs component is still not displayed on the page. It loads correctly inside:
<script type="module" src="http://127.0.0.1:8000/build/assets/app.3603fcc5.js"></script>
but in the welcome view I put:
<example-component></example-component>
And they just don't load. In the js file the component appears, but in the blade it is not loading. What can it be ?
Level 50
@mvnobrega First, please check that path. The js file is generated or not? If generated, then copy and rename it.
app.js
The second try is that reinstall Vue js and tries to load that.
And the last thing I noticed was that the component should be like this:
<example-component />
Not this:
<example-component></example-component>
This is not a big issue. If you still have confusion according to steps or something, try to create a new test project following this blog and check where your mistake is:
https://www.tutsmake.com/laravel-9-vue-js-crud-example-tutorial/
1 like
Level 3
Level 50
@mvnobrega glad to help you.
Please or to participate in this conversation.