Vue.js Tutorial From Scratch - e07 - NPM, Webpack & Single File Component 

I was working with Vue for almost a year but never had such a clear understanding that how things work. This explanation wraps it all. Thanks for the series.

Magnificent !! As always, to the point and showing the errors and pitfalls that we novices may fall into while doing it. "Laravel Mix can be used independently" - this is the most illuminating lesson for me. Wow !! Once more, THANK YOU SO VERY MUCH !!!

Woow Thank you for this video. Was what i looking for. I had 3 days trying to understand Webpack and how to make it work. Laravel-mix is magical and i could it understand it thanks to you.

You just made this so easy for me. And now I understand better what am doing, not just running CLI commands within an understanding of why am doing it. Thanks so much. Am loving this.

Error notice If you see the `Error time compiler error` so you just need to do the following: import Vue from 'vue/dist/vue.js'; instead of import Vue from 'vue'; And then type "npx mix" in the terminal and reload your document. I hope that helps.

I encurred in a problem with cross-env. I solved it by run the command below the script section in laravel-mix docs, the command is "npm install cross-env --save-dev". I'm saying it cause I'm very loving your works and I think maybe other people find it useful. Thank you, Victor

The best explanation i've found. Perfect job, thank you.

Auto-liker here! Thank you so much for uploading this topic sir. You are the best!

great videos...very well explained... best vue tutorial

Great tutorial, as always! Thanks so much Victor!

The BEST as always!

Thank you so much! this explanation helped me a lot! love ur videos!

Victor, great. Would appreciate if you focus on imports in vue-router. Dynamic imports i.e. If you have 20+ routes, you have to write 20+ import... and then component line. In cli project you can write import to component line, but it doesn't work with laravel mix. I did it, but it comes a trouble importing css. And paths... with @ ./ or tilda.. pain and headache each time. And different approaches through vue cli and laravel mix. It would be useful!

insanely great! Keep up your good work

You are the best! Thank you so much!

Thanks dude! Keep up the good work!

@Coder's Tape, have you had any luck doing this with Vue3? I've been really struggling figuring this out.

at 8:55 I have "Error: Unknown option '--hide-modules' anyone has same problem when running "npm run watch" ?

Great tutorial!

Hi, nice tutorials, thanks! Question dough. I'm very new in Vue, and wonder if Laravel Mix is similar to Vue-CLI nowadays? Afaik, Vue-CLI is compiling the project as well. Or is it a matter of preference?

You saved my day ... or week ;)

good stuff man.. a little hesitant about switching from roll-your-own webpack to laravel.mix but it seems nice. Do you know if it supports rust-wasm?

for anybody else who had a problem following at 6:10 (add app.js, save and quit): if you type in "vim app.js" you land in the vim editor. Type ":wq" (for save + quit) and hit enter. More information here: www.freecodecamp.org/news/the-linux-commands-handbook/#the-linux-vim-editor-command

Sorry, this video didn't work for me. Wasnt able to run npm run watch because it said "cross-env" could not be found, even though i did npm install. And yes i was in the correct directory.

I get an error that says: ERROR in ./src/components/Accordion.vue 1:0 Module parse failed: Unexpected token(1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders > | | {{ item.title }}

i use windows 10 os . in my project directory . i can not find yarn.lock file ? please help me

what is the different this from Vue CLI ?

Hey Great Tutorial... While trying pass value into the parent component I get an error--- [Vue warn]: Error in v-on handler: "ReferenceError: Value is not defined"

I want to customize my console like yours, Can you teach us how?

hey man why my program there are error app.js:1370 [Vue warn]: Unknown custom element: but i already add components on my app.js, thanks for your help

A lot of these console commands do not work for me. Is it because I'm on windows?

Do i have to repeat all of it if i create a new project?

if you have a mac and want to install Vue.js make sure to install node.js and with it node.js will install npm automticaly make a folder named vueexample on your desktop open the terminal write the following in the command line cd desktop this brings you to the desktop now write the following in the command line cd vueexample this brings you into the folder where you now can install Vue with this: write the following in the command line vue create test if you tipe this in your terminal command line npm will create a new Vue Version with the name test in your vueexample folder during the installation you will be asked if you want to change some things change nothing and just hit enter to make sure you install a default version of Vue ONLY at the end of the installation you will be asked if you want this to be saved as a default now Type N before you hit enter in the command line, to make sure that the next times you make a new installation, you can deside yourself if you want changes during the installation by the way THANKS A LOT TO Coder's Tape for this SUPER SERIES !!!!!!!!!!!!!!

👏👏👏👍

Word of warning, mix has changed too much (installation is different and uses a different command line tool). Getting through this episode is almost impossible.

I wish you changed your command line style. It's not very user friendly with all those blue yellow effect

Javascript and and all its bullshittery is soooo... brittle.Composer is a miracle compared to npm.