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

It's time for us to depart from the compiled CDN of Vue and start compiling our own assets with NPM and Webpack. We will be pulling in Laravel Mix but just for it's Webpack configurations. Finally, we are going to refactor into a Single-File Component.

Resources

Download VSCode

DigitalOcean Referral

About This Course

[tayyabrasool]

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.

[shumit]

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 !!!

[codingnetworks]

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.

[h.serhan]

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.

[josephajibodu]

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.

[andrearimmaudo]

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

[SethSetiadha]

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

[matejchmela]

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

[floflo]

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

[dmdk]

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!

[mavbcn]

Great tutorial, as always! Thanks so much Victor!

[carlosmillanmazzucco]

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

[acedecastro]

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

[craigtcooper]

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

[gunterotte]

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?

[bphil]

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

[ted]

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?

[emrozemorsalin]

insanely great! Keep up your good work <3

[jandirporta]

I get an error that says: ERROR in 1:0
Module parse failed: Unexpected token(1:0)
> <template>
| <div>
| <p>{{ item.title }}</p>

[kevinmutinda]

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"