For those of you who are running Laravel 6, you must perform these steps to install Vue: 1. In your Terminal, type in "composer require laravel/ui" 2. Then type in "php artisan ui vue" or "php artisan ui vue --auth" if you want some authorization. 3. Then run "npm install" 4. Then run "npm run dev" And that's it! Hope this helps!
We subscribers are greedy, you know. May be some VueJS courses in the future is coming (you use it, you said so)? And would love some Laravel + Vue stuff. By the by, as usual, a clean, crisp video. Thanks a lot.
Just run npm install and looking at public\css\app.css it has an error on 1st line: @import url(fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; Error shows: at-rule or selector expected I deleted C:\xampp\htdocs\my-second-project ode_modules and re run npm install. Error still there and I also notice that neither app.css or app.js are minified?? Have I missed something?
Dear Coder's Tape, I'm having the hardest time importing JS libraries to my Laravel 5.8 project, I tried everything, I was following stack-overflow instructions, but I just cannot wrap my head around the idea of adding packages through NPM. Could you explain it in the most simple way possible? I run the 'npm install chart.js --save', then I run 'npm run dev', it updates my node_modules folder, as well as the package.json, but I have no idea how to require these modules in my main project, I tried including them in webpack.mix.js, but I must've been doing something wrong, because it does not appear in my public folder with all the asstes. Please help, I'm really desperate.
Hey there!! at 7:57 after executing the npm run dev why did it minify your app.js? doesnt that require npm run production?? mine is not minified just recompiles...
Thank you for sharing these videos with us. Request: Would you be willing to make a video on how to use AJAX (jQuery, for example) with Laravel? I would love to know how to incorporate AJAX requests to send forms and update data without page refresh. Let me know if you could do something like that. Thanks!
when i putted a class like you did, why my app isn't working? might it because applied @charset "UTF-8"; on app.css ? i tried to deleted it but it always appears. what should i do? @import url(fonts.googleapis.com/css?family=Nunito);@charset "UTF-8"; x at-rule or selector expected css(css-ruleorselectorexpected) [1, 61]
After I write 'npm install' it gives me this error { npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) added 1286 packages from 678 contributors and audited 1291 packages in 79.155s 34 packages are looking for funding run `npm fund` for details found 2 vulnerabilities (1 low, 1 high) run `npm audit fix` to fix them, or `npm audit` for details } any help please
Hello sir, I have coded along with you in this episode25, but my div background-color did not change with the .new-class? I have compiled with npm run dev and npm run watch, but I cannot make it. I would be appreciate your reply sir. Thanks
thanks for the awesome tutorial but Sir, but my command line trows an error message: "rm" not recognised as an internal or external command, operatable program or batch file
i am a lot confused about this that if you want to have an admin panel for example, should you use the laravel template engine @yield @section to make the master layout for it or you should use vue.js slots or scope and why to pick each of them if u can use both ty for help and greate share
That's a great question, I tell you in my experience, a combination of both is what you will more than likely end up with. Any given app is a combination of static content, dynamic content and forms. For something like an admin panel, most of the content is dynamic and some of it needs to be "live" for example, if you have a trending items that changes every 10 seconds, you are going to need Vue to update that chart without the user reloading the page but if you are just changing some records in the database, then a full PHP page without any Vue is perfectly fine. Vue is great for complicated forms, where you need to change your form based on user input, for example, if the first question is "Color", that may change the form to filter down to just the selected color. This is impossible to do with PHP unless you reload the page which isn't great in this case. For something like that Vue is the way to go. I hope that sheds some light on this topic.
@@CodersTape Yes for sure lad , you are a true teacher . but now lets discus some thing else should i make the base with blade and php and use vue when ever needed or no make vue as a base and use blade when ever needed or its optional at all :)
@@farshadbadiee7133 Make your base be Blade/Laravel and then sprinkle Vue components throughout your app as needed. This is going to make your App faster and easier to maintain. There is such a thing as a Single Page App which is a 100% Vue frontend with a Laravel backend. You can research that.
@@CodersTape from what i got from your answer is i do it with my old style laravel blade and folder structure and every thing but when ever i need some part not to be refreshed the whole page i make a vue component and call it in that section . please let me know if its not true :) your course is really unique ty
Hi, I'd like to integrate in a my little beginner project a Bootstrap customization, like "Bootstrap Italia (italia.github.io/bootstrap-italia/)" or "Material Design for Bootstrap (fezvrasta.github.io/bootstrap-material-design/)"; I need to use Lavarel 6 authentication middleware too... What's the best way to procede? Thank you!
Thank you @Coder's Tape for this wonderful tutorial. I have a question and i want to know how is it happen. my question is: Where is the assets came from or why it has an assest?? of this source (underline): for CSS for JS thanks for the answer. sorry for wrong grammar.
Hi im a beginner in laravel and im really finding tutorial for me to understand more about it but when im acrolling i see your starting to do some js frameworks is this is okay even if i just have a basic knowledge in Javascript can i go still under go this whole series please respond thanks in advance
Absolutely. It will be challenging but you will benefit from it all. Even if you don’t understand everything 100% the first time. This stuff takes time
When I first opened my app.js file under the 'resources' directory, it was completely blank. Laravel should have filled in that file, but it didn't. Why is that? Also, why is there no 'vendors' directory in your source code? Additionally, in my package.json, there's no Bootstrap, jQuery, or Popper.js dependencies. The file looks like this: "devDependencies": { "axios": "^0.19", "cross-env": "^5.1", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue-template-compiler": "^2.6.10" }, "dependencies": { "vue": "^2.6.10" } I also don't have a '_variables.scss' file. What's going on here? Why is so much code missing?
Check your version of laravel "php artisan -V", maybe you're in 6.0.4. And this series is running on 5.8 Second 'vendors' directory is restricted on .gitignore, and you cant see that directory on his github.
Just one question, are you working with the advanced laravel tutorial now? because Im still on the half way through the course but I cant get enough... Its my third day here now
Great video and great explanation. I'm using the template CoreUI and I realized that if I use Vue , then the profile dropdown doesn't work. If I don't use Vue and I remove the that links to public js app.js , then the dropdown works again.... What can I do? thanks so much
Well the dropdown is actually working with jQuery. Bootstrap’s JS is al jQuery so I’m not sure why Vue has anything to do. You must be getting some sort of conflict. Check the console in the Chrome Dev Tools.
@@CodersTape Thanks so much. I think that maybe the problema would be that the theme loads a version of bootstrap and jquery and laravel mix is loading others... I'm not sure if this is the problema. Could be the problema? thanks so much in advance
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) this what happened after i type npm install how to fix this guys?
hi i'm new. I get this error " At line:1 char:21 + rm -rf node_modules && npm install + ~~ The token '&&' is not a valid statement separator in this version. " I'm using VS-code
That's a windows issue, it doesn't allow you to put more than one command at a time. You will need to separate the commands. Run rm -rf node_modules [HIT ENTER] npm install [HIT ENTER]
@@CodersTape I did this in windows 1)"remove-node-modules C:\xampp\htdocs\my-first-project ode_modules" 2) npm install and had to force refresh chrome 3) "shift+F5" 4) Finally worked
npm run watch, doesn't seem to be working, neither did npm run dev. I don't get any errors, it just returns to a new prompt. Anyone got any ideas. I'm using Laravel 5.8, node 13.1.0, npm 6.12.1. I'm on Windows 10.
Good day sir How to fix this error $ npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar ode_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none was installed. npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none was installed. thank you sir
Hello, anyone who might have encountered these errors why trying to install npm for a Laravel project, npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 npm WARN deprecated urix@0.1.0: Please see github.com/lydell/urix#deprecated npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
For those of you who are running Laravel 6, you must perform these steps to install Vue:
1. In your Terminal, type in "composer require laravel/ui"
2. Then type in "php artisan ui vue" or "php artisan ui vue --auth" if you want some authorization.
3. Then run "npm install"
4. Then run "npm run dev"
And that's it! Hope this helps!
A MILESTONE!!! I can feel that I have progressed a lot because of this shift... Woohoo!
We subscribers are greedy, you know. May be some VueJS courses in the future is coming (you use it, you said so)? And would love some Laravel + Vue stuff. By the by, as usual, a clean, crisp video. Thanks a lot.
I’ll keep that in mind! Vue is fantastic, highly recommend it.
supported!!!! thanks a lot Coder's Tape your explanations just moves in
@@CodersTape Moaaaar Vue
I disagree since there are many fantastic Vue courses out there and this is the best Laravel course I've tried so far.
Thanks,
Your explanation for all course is so clear and simple,
Thank you very much.
Awesome work
As usual to the point talking.....I really appreciate your works sir
Clicked the Like button even before watching the video.. that's how much I trust you. LOL
I wanted to hit like button many times, as always.
Great tutorial! *Coders Tape is the best!* I need to add some vue js tutorials to my channel!
Just run npm install and looking at public\css\app.css it has an error on 1st line:
@import url(fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";
Error shows:
at-rule or selector expected
I deleted C:\xampp\htdocs\my-second-project
ode_modules and re run npm install.
Error still there and I also notice that neither app.css or app.js are minified??
Have I missed something?
Dear Coder's Tape,
I'm having the hardest time importing JS libraries to my Laravel 5.8 project, I tried everything, I was following stack-overflow instructions, but I just cannot wrap my head around the idea of adding packages through NPM. Could you explain it in the most simple way possible?
I run the 'npm install chart.js --save', then I run 'npm run dev', it updates my node_modules folder, as well as the package.json, but I have no idea how to require these modules in my main project, I tried including them in webpack.mix.js, but I must've been doing something wrong, because it does not appear in my public folder with all the asstes.
Please help, I'm really desperate.
Wow your video really helped me.Thank you
Finally Vue js tutorial is here . (⊃˘ᵌ˘)⊃
waiting for more tutorials on Vue , specially handling the forms with it .
Cheers
Hey there!! at 7:57 after executing the npm run dev why did it minify your app.js? doesnt that require npm run production?? mine is not minified just recompiles...
dude your the best
great video ,
The BEST as always!
Thank you for sharing these videos with us. Request: Would you be willing to make a video on how to use AJAX (jQuery, for example) with Laravel? I would love to know how to incorporate AJAX requests to send forms and update data without page refresh. Let me know if you could do something like that. Thanks!
thanks for the tutorials
I m learning faster!!
when i putted a class like you did, why my app isn't working? might it because applied @charset "UTF-8"; on app.css ? i tried to deleted it but it always appears. what should i do?
@import url(fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";
x at-rule or selector expected css(css-ruleorselectorexpected) [1, 61]
Bro you are awesome ,,,love you bro
After I write 'npm install' it gives me this error
{
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1286 packages from 678 contributors and audited 1291 packages in 79.155s
34 packages are looking for funding
run `npm fund` for details
found 2 vulnerabilities (1 low, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details }
any help please
Hello sir, I have coded along with you in this episode25, but my div background-color did not change with the .new-class? I have compiled with npm run dev and npm run watch, but I cannot make it. I would be appreciate your reply sir. Thanks
Try hard refreshing your browser or clearing your cache.
@@CodersTape yes I got it.
Thank you sir :)
Can you make a tutorial about how to use Angular with Laravel?
thanks for the awesome tutorial but Sir, but my command line trows an error message: "rm" not recognised as an internal or external command, operatable program or batch file
In windows, use del instead of rm
i am a lot confused about this that if you want to have an admin panel for example, should you use the laravel template engine @yield @section to make the master layout for it or you should use vue.js slots or scope and why to pick each of them if u can use both ty for help and greate share
That's a great question, I tell you in my experience, a combination of both is what you will more than likely end up with. Any given app is a combination of static content, dynamic content and forms. For something like an admin panel, most of the content is dynamic and some of it needs to be "live" for example, if you have a trending items that changes every 10 seconds, you are going to need Vue to update that chart without the user reloading the page but if you are just changing some records in the database, then a full PHP page without any Vue is perfectly fine. Vue is great for complicated forms, where you need to change your form based on user input, for example, if the first question is "Color", that may change the form to filter down to just the selected color. This is impossible to do with PHP unless you reload the page which isn't great in this case. For something like that Vue is the way to go.
I hope that sheds some light on this topic.
@@CodersTape Yes for sure lad , you are a true teacher . but now lets discus some thing else should i make the base with blade and php and use vue when ever needed or no make vue as a base and use blade when ever needed or its optional at all :)
@@farshadbadiee7133 Make your base be Blade/Laravel and then sprinkle Vue components throughout your app as needed. This is going to make your App faster and easier to maintain. There is such a thing as a Single Page App which is a 100% Vue frontend with a Laravel backend. You can research that.
@@CodersTape from what i got from your answer is i do it with my old style laravel blade and folder structure and every thing but when ever i need some part not to be refreshed the whole page i make a vue component and call it in that section . please let me know if its not true :) your course is really unique ty
@@farshadbadiee7133 That's correct.
Hi, I'd like to integrate in a my little beginner project a Bootstrap customization, like "Bootstrap Italia (italia.github.io/bootstrap-italia/)" or "Material Design for Bootstrap (fezvrasta.github.io/bootstrap-material-design/)"; I need to use Lavarel 6 authentication middleware too... What's the best way to procede? Thank you!
Thank you @Coder's Tape for this wonderful tutorial. I have a question and i want to know how is it happen.
my question is:
Where is the assets came from or why it has an assest?? of this source (underline): for CSS
for JS
thanks for the answer.
sorry for wrong grammar.
assets is just a helper function to help you locate assets folder. That way you don’t have to type the full path name.
@@CodersTape thank you so much sir
It is strange but public/js/app.js and public/css/app.css files are not minified after running 'npm run dev'. How can I fix this issue?
only the production minifies the final file. Try running npm run prod instead
Coder's Tape thx, now I see
Hi im a beginner in laravel and im really finding tutorial for me to understand more about it but when im acrolling i see your starting to do some js frameworks is this is okay even if i just have a basic knowledge in Javascript can i go still under go this whole series please respond thanks in advance
Absolutely. It will be challenging but you will benefit from it all. Even if you don’t understand everything 100% the first time. This stuff takes time
Can you share your personal config for php storm please? I'm lovin it!!
github.com/vicgonvt/phpstorm-settings
When I first opened my app.js file under the 'resources' directory, it was completely blank. Laravel should have filled in that file, but it didn't. Why is that?
Also, why is there no 'vendors' directory in your source code?
Additionally, in my package.json, there's no Bootstrap, jQuery, or Popper.js dependencies. The file looks like this:
"devDependencies": {
"axios": "^0.19",
"cross-env": "^5.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue": "^2.6.10"
}
I also don't have a '_variables.scss' file. What's going on here? Why is so much code missing?
Check your version of laravel "php artisan -V", maybe you're in 6.0.4. And this series is running on 5.8
Second 'vendors' directory is restricted on .gitignore, and you cant see that directory on his github.
Just one question, are you working with the advanced laravel tutorial now? because Im still on the half way through the course but I cant get enough... Its my third day here now
Lots more content coming
@@CodersTape Excited subscriber here!!
Just want to ask a question, maybe you already said it in one of your videos but I'll still ask. In your opinion/preference, vue or react?
thanks
Vue. But I do have experience with React Native as well
Great video and great explanation.
I'm using the template CoreUI and I realized that if I use Vue , then the profile dropdown doesn't work. If I don't use Vue and I remove the that links to public js app.js , then the dropdown works again.... What can I do?
thanks so much
Well the dropdown is actually working with jQuery. Bootstrap’s JS is al jQuery so I’m not sure why Vue has anything to do. You must be getting some sort of conflict. Check the console in the Chrome Dev Tools.
@@CodersTape Thanks so much.
I think that maybe the problema would be that the theme loads a version of bootstrap and jquery and laravel mix is loading others... I'm not sure if this is the problema. Could be the problema?
thanks so much in advance
Hard to diagnose without seeing the code. It’s going to take some trial and error
@@CodersTape It would be great to have a tutorial to set up and work with a professional template like CoreUI with Laravel :)
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
this what happened after i type npm install how to fix this guys?
hi i'm new. I get this error
" At line:1 char:21
+ rm -rf node_modules && npm install
+ ~~
The token '&&' is not a valid statement separator in this version. "
I'm using VS-code
That's a windows issue, it doesn't allow you to put more than one command at a time. You will need to separate the commands.
Run
rm -rf node_modules [HIT ENTER]
npm install
[HIT ENTER]
@@CodersTape I did this in windows 1)"remove-node-modules C:\xampp\htdocs\my-first-project
ode_modules"
2) npm install
and had to force refresh chrome 3) "shift+F5"
4) Finally worked
@@dannipals79 That's great to hear! Getting started with NPM always feels a little clunky. It's not smooth like Laravel.
npm run watch, doesn't seem to be working, neither did npm run dev. I don't get any errors, it just returns to a new prompt. Anyone got any ideas. I'm using Laravel 5.8, node 13.1.0, npm 6.12.1. I'm on Windows 10.
Ok I figured it out I had ignore-scripts=true in my .npmrc, so i removed and everything seems to be working
Awesome
Where the webpack usage with laravel?
My vue installation always fails
What is the error message being displayed?
Good day sir How to fix this error
$ npm install npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar
ode_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none was installed.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none was installed.
thank
you sir
i m just getting errors at npm run watch, etc
Delete the node_modules directory completely and start over with npm install. NPM is known for just throwing a lot of errors with no clear reason.
Hello, anyone who might have encountered these errors why trying to install npm for a Laravel project, npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated urix@0.1.0: Please see github.com/lydell/urix#deprecated
npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)