Vue.js Course for Beginners [2021 Tutorial]

Learn Vue 3 by in this full course. Vue.js is an open-source model-view-view model front end JavaScript framework for building user interfaces and single-page applications.
💻 Code - Static: github.com/gwenf/vue3-fcc-cou...
💻 Code - Basic Product Cart: github.com/gwenf/vue3-fcc-cou...
💻 Code - CLI Product Cart: github.com/gwenf/vue3-fcc-cou...
✏️ Course developed by Gwen Faraday. Check out her channel: / faradayacademy
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:03) What is Vue.js?
⌨️ (0:05:40) Vue 3 Setup
⌨️ (0:12:17) Vue JS Directives
⌨️ (0:19:48) Events and Methods
⌨️ (1:29:20) Components
⌨️ (0:39:27) Component Props
⌨️ (1:06:09) Lifecycle Hooks
⌨️ (1:14:30) App Demo
⌨️ (1:26:45) Adding Items to Cart
⌨️ (2:15:54) Reuseable Components
⌨️ (2:26:20) Vue CLI
⌨️ (2:32:48) Vue Folder Structure
⌨️ (2:43:58) Top Nav
⌨️ (2:48:45) Styling with SASS
⌨️ (3:06:07) Sidebar
⌨️ (3:20:46) Adding Items to Cart
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 481

  • @tthtlc
    @tthtlc Жыл бұрын

    i find your way of teaching so exciting and catching my FULL attention all the time: making mistakes, showing the results of the mistakes, explaining it, and then correcting it, and continue,.....and repeating again.....every mistakes is different and it just makes me learn SO MUCH.

  • @tomstock8634
    @tomstock8634 Жыл бұрын

    This lengthy tutorial was relaxing and very pleasant to listen to as well as incredibly informative. Thank you so much for this.

  • @bonnyboet6613
    @bonnyboet6613 Жыл бұрын

    Thank you for this course! As a non-native English speaker I really appreciate your clear way of speaking and keeping to the main points. It made it really easy to understand.

  • @WowaDreamer
    @WowaDreamer2 жыл бұрын

    This is a great tutorial! Well paced

  • @yassertarek2488
    @yassertarek24882 жыл бұрын

    A great Course in a great way which at first seemed to me to be sloppy, but with perseverance everything became clear. Thanks a lot ! ♥

  • @Bigman74066
    @Bigman740662 жыл бұрын

    I like how you didn't edit out mistakes you made. This only adds to the learning experience. Great job! Tnx!

  • @chopman83
    @chopman832 жыл бұрын

    I'm really enjoying the course so far! However, you have a typo in your chapter listings. Components are listed as starting at 1:29:20, but it should be 29:20...it's causing the following chapters to be out of sync. Thanks, and keep up the good work!

  • @MissBoom135
    @MissBoom135 Жыл бұрын

    Fantastic course thank you! This was my first delve into using Vue and you explained everything very well 🔥

  • @gueyenono
    @gueyenono2 жыл бұрын

    I just completed the course. Thank you very much. It was excellent!

  • @maxrichard8852
    @maxrichard88522 жыл бұрын

    Great course. Enjoyed it very much to the end! Waiting for more!!!

  • @jakebush8941
    @jakebush89412 жыл бұрын

    This is the best video I have found for Vue 3. My company gives us full access to PluralSight and there's nothing even close to as good as this on there. WELL DONE.

  • @zoltanhorvathandsomenumbers
    @zoltanhorvathandsomenumbers2 жыл бұрын

    I really appreciate Gwen's calm voice and her straightforward style. Very good tutorial, I really enjoyed it! :)

  • @senatorcox7171
    @senatorcox71712 жыл бұрын

    Thanks very much, great course, I like the concept and how you highlighted problems that can be encountered using the Vue CDN but then solve them all in your CLI version of the course.

  • @jesussandoval4969
    @jesussandoval49692 жыл бұрын

    Your voice is so soothing when you speak. I learned a lot from this tutorial and you earned a follower. Thank you!

  • @LevisRaju
    @LevisRaju2 жыл бұрын

    I was waiting for an updated version.

  • @goofy7791
    @goofy77912 жыл бұрын

    In just 30 minutes of video I was able to learn so much in Vue, thanks.

  • @nikhilkaushal1615
    @nikhilkaushal16152 жыл бұрын

    Great course! It really helps to get the basic Vue knowledge.

  • @gemma2901
    @gemma29012 жыл бұрын

    thank you very much for this tutorial!!!! always grateful for your free education!

  • @rachelsensenig
    @rachelsensenig Жыл бұрын

    This was a great course - very clear. I liked being stepped through creating Vue on an HTML file up through creating an app using Vue CLI. I also appreciated being shown how to debug using the Vue dev tools. For those about to watch this video - make sure you have this on your browser before you start!

  • @DaniloMotaSoares

    @DaniloMotaSoares

    4 ай бұрын

    Thanks for the tip!

  • @ListenAlQuran
    @ListenAlQuran2 жыл бұрын

    the looks so awesome.... love your recordings to such an extent!

  • @erwinaditya9824
    @erwinaditya98242 жыл бұрын

    OMG! what I was waiting for from the previous version is here

  • @jun-uen0
    @jun-uen02 жыл бұрын

    Great course!! Easy to understand. Thank you! I will check out other video courses on your channel!!

  • @brokko_le3
    @brokko_le3 Жыл бұрын

    I'm glad you start of saying that Vue can be used to slowly upgrade older software without needing a complete rewrite from the start. I've looked at angular in the past and that was exactly what I was afraid of. I more or less picked Vue based on first impressions, but I wasn't sure about this. A whole rewrite would simply be too much. Your first examples putting Vue in script tags within HTML page takes a load of my mind too. I was getting the idea that having separate js files was the only way, not just good practice. Every other tutorial did it like that. Separating JS from the HTML by itself would also already be a huge overhaul, so I love knowing I can quite safely upgrade everything step by step and page by page even. Thanks. Now I know I picked the right tool.

  • @billyzman666
    @billyzman6662 жыл бұрын

    This is awesome! Thank you. One of the best educational videos I have watched on youtube. The sites design is quite an eye sore though haha, gonna have to update that.

  • @francosbenitez
    @francosbenitez2 жыл бұрын

    What a clear tutorial! Many thanks for this.

  • @thomasgaylard7219
    @thomasgaylard72192 жыл бұрын

    Thank you for creating such a clear and engaging tutorial. It really helped me to understand some of the key concepts of Vue and has stood me in good stead as I start to build my app. You have a rare talent for teaching, and presenting ideas in a concise but clear way. I will be on the look out for more of your tutorials.

  • @husseinhammoud9865
    @husseinhammoud9865 Жыл бұрын

    I like the way you teach programming, thanks for the effort you put on this video

  • @basb3708
    @basb37082 жыл бұрын

    Thank you so much for this very straightforward and great tutorial!

  • @drivewithritik
    @drivewithritik2 жыл бұрын

    Oh my god, I am waiting for this kind of Vue Tutorial. And You uploaded it. God bless You ❤️

  • @guliyevshahriyar
    @guliyevshahriyar11 ай бұрын

    Thank you very much, Gwen Faraday! This course taught me tons of Web Programming knowledge. Looks forward to watch more from you in the Internet 😊😊 Keep up teaching good!

  • @codewithripon
    @codewithripon Жыл бұрын

    I always enjoying your tutorials. It's very helpful you have the quality to teach.... I'm extremely interested to learn more from you.

  • @Satishkumar-rx7oy
    @Satishkumar-rx7oy2 жыл бұрын

    tutorial is very helpful and explanation is pretty easy to understand. thanks for making this

  • @u2okn
    @u2okn Жыл бұрын

    Great video! It is the best learning video I've found yet. Thanks for that great content.

  • @sayedahmadnaweed1
    @sayedahmadnaweed1 Жыл бұрын

    @everyone, This tutorial structured very well using real world common daily facing problems. I recommend to watch and practice along the way. It is one of the great tutorial I have ever seen.

  • @yshiawallace7636
    @yshiawallace76362 жыл бұрын

    Thanks for this excellent crash course Gwen!

  • @darksideishere
    @darksideishere Жыл бұрын

    Vue is unbelievable! One of the best things that I've learned. Thank you so much for this!

  • @isbeb507
    @isbeb5072 жыл бұрын

    This has been very helpful so far! Thanks!

  • @nhatkhanhtran111
    @nhatkhanhtran1112 жыл бұрын

    Thank you so much for the course, this is a great course!

  • @MrSkme
    @MrSkme2 жыл бұрын

    If you want to try the splendid food app basic demo you have to delete node_modules and package-lock.json and run "npm install" in the terminal first. Then you can run "npm start".

  • @compeng5436

    @compeng5436

    2 жыл бұрын

    thanks mate, it helps!

  • @lorieldesamito3998

    @lorieldesamito3998

    2 жыл бұрын

    just running the npm install did it for me. i have no backgroud in node and had to do a little search for this to work.

  • @silvavadney2267

    @silvavadney2267

    2 жыл бұрын

    Thank So Much!!! Was struggling a lot with this part.. 😢

  • @kasperskyns
    @kasperskyns2 жыл бұрын

    Nicely structured and presented, easy to understand.. pleasant voice. I really enjoyed it.

  • @hilbillymnst1324
    @hilbillymnst1324 Жыл бұрын

    If they were explaining things at school that way, you'd catch thing way quicker. Simple but profound. Helluva tutorial.

  • @JustAZivi
    @JustAZivi Жыл бұрын

    This tutorial is awesome! Great teacher!

  • @hw7channel571
    @hw7channel5712 жыл бұрын

    Thanks a lot, that's a great video tutorial presentation at the right moment.

  • @didimarinhoo
    @didimarinhoo2 жыл бұрын

    explicação fantástica, parabéns, já me inscrevi no seu canal obrigado!

  • @AhmedABED-km6fv
    @AhmedABED-km6fv2 жыл бұрын

    I like when you did an array of objects to create a form

  • @josephbirara2493
    @josephbirara2493 Жыл бұрын

    This course is the best Vuejs course you can get all over the internet. thank you

  • @Losquepasaremoselsemestre
    @Losquepasaremoselsemestre2 жыл бұрын

    Justo necesitaba esto, muchas gracias!! =D

  • @kosyauzer4787
    @kosyauzer47872 жыл бұрын

    Vue devs: Vue is very simple and straightforward and beginners friendly also them: Lemme show you how to make simple log in form *proceeds to building a nuclear power plant

  • @webinatic216

    @webinatic216

    2 жыл бұрын

    In Angular we are building schematics to land people on Mars just for your first name in the input field.

  • @lexxluey

    @lexxluey

    2 жыл бұрын

    @@webinatic216 LMAO. i agree with both comments

  • @ugochukwuumerie6378

    @ugochukwuumerie6378

    2 жыл бұрын

    😆 🤣 😂

  • @brijwish7083
    @brijwish7083 Жыл бұрын

    Awesome tutorial for new learner and appreciated. Many small useful things are used in between that one should learn about javascript before appearing an interview.Thanks May God bless you long and happy life.

  • @user-ew1vk9cs3n
    @user-ew1vk9cs3n Жыл бұрын

    Thank you so much Gwen!! Great course!

  • @m2review283
    @m2review2832 жыл бұрын

    Thank you so much, This is awesome tutorial.

  • @user-dk6uf3bp5v
    @user-dk6uf3bp5v8 ай бұрын

    Great tutorial, very helpful, thank you!

  • @TlNYDlCK
    @TlNYDlCK Жыл бұрын

    To fix the icon issue in the ProductCard.vue class in the html tag you will want set the tag just under to be :class="class_type". So it will look like: And then in the scripts in the data function you'll want to add a class_type variable using a template literal with the class you want. So data() looks like: data () { return { quantity: 0, class_type: `icofont-10x icofont-${this.product.icon}` } }

  • @greatred2558
    @greatred25582 жыл бұрын

    wow. def gonna watch it over weekend

  • @baskaisimkalmamisti
    @baskaisimkalmamisti3 ай бұрын

    This could be the best explanation style I ever saw in 20 years.

  • @mohammadravand4351
    @mohammadravand435111 ай бұрын

    this is best and will completed it and start learning vuejs, thank you for this perfect course.

  • @M.......A
    @M.......A Жыл бұрын

    1:18:04 if it is your first time working with npm, do not forget to first type npm install to be able to run the npm start

  • @jiriboudik9210

    @jiriboudik9210

    Жыл бұрын

    Thank you a lot!!! I was lost for a while, but your comment saved me.

  • @davidbryanramboy5043

    @davidbryanramboy5043

    10 ай бұрын

    thanks

  • @imtiyazakiwat6159
    @imtiyazakiwat61592 жыл бұрын

    Excellent work!

  • @davidatebisun
    @davidatebisun2 жыл бұрын

    Nice one. This course is enough for a review for me. I have been working with nuxt for a while I just needed a review with vue way of things

  • @souravjamwal77
    @souravjamwal772 жыл бұрын

    And I was just reading the Vue js docs for project structure when this popped up

  • @KingMangaAnimeRemix
    @KingMangaAnimeRemix2 жыл бұрын

    Great Teacher. Thank for this course :)

  • @henryhsu9517
    @henryhsu9517 Жыл бұрын

    For beginners, the example 1:05:45 could be viewed as the following. inputs:[ { labelt: 'Email', value: '', typet: 'email' }, { labelt: 'Password', value: '', typet: 'password' } ], template: `{{labelp}} `, props: ['labelp', 'typep', 'modelValue'],

  • @codingcat9052

    @codingcat9052

    4 ай бұрын

    i'm newbie , i can see `labelp`, `typep` mean `labelProp`, `typeProp` but may i ask u what do the `labelt`, `typet` mean , do u mean `labelTemplate`, `typeTemplate` ? thank you

  • @SoshJam

    @SoshJam

    4 ай бұрын

    @@codingcat9052 think it's labeltext and typetext

  • @clustersnake
    @clustersnake2 жыл бұрын

    I'll never get tired or vuejs or Gwen videos!

  • @FaradayAcademy

    @FaradayAcademy

    2 жыл бұрын

    Thanks :)

  • @doraemon5990
    @doraemon5990 Жыл бұрын

    I'm glad I stumbled upon this tutorial. You speak very calm and without loads of filler sentences. Thank you 😄.

  • @surajitdas6555
    @surajitdas6555 Жыл бұрын

    Very good tutorial. First step for learning vue js is done now. Will create a similar app myself

  • @tahirgshahid
    @tahirgshahid2 жыл бұрын

    This is awesome tutorial.

  • @anazabalo3379
    @anazabalo33792 жыл бұрын

    Her voice is so soothing that I just fall sleep every 20 minutes. Great explanation though

  • @veasnapen
    @veasnapen2 жыл бұрын

    Thanks for this course, it very usefull for me as a beginner😀

  • @samiulsalehin1266
    @samiulsalehin12662 жыл бұрын

    Great video, thank you so much. Can you kindly tell me which plugin are you using for auto suggestion?

  • @TristanBailey
    @TristanBailey2 жыл бұрын

    Great pacing to get started. With the odd pause needed to go try it out.

  • @redblues9566
    @redblues95669 ай бұрын

    I'm really thanks for your teaching. You are the best!!! from South Korea.

  • @VigneshDhakshinamoorthy
    @VigneshDhakshinamoorthy4 ай бұрын

    That’s very cool you can continue the board vs a computer. ❤thanks for sharing.

  • @aniltheblogger
    @aniltheblogger2 жыл бұрын

    This is awesome teaching. Thank you & vue

  • @wanglei7899
    @wanglei78992 жыл бұрын

    Great course i really appreciate it!

  • @mamurolimov
    @mamurolimov2 жыл бұрын

    sound quality is incredible

  • @imadsaddik
    @imadsaddik10 ай бұрын

    Thank you for the invaluable information that you shared with us

  • @adnan8465
    @adnan8465 Жыл бұрын

    thank you so much for such awesome explanation

  • @jaykay7932
    @jaykay79322 жыл бұрын

    I recently created a html component using vue for the company I work for (mainly for my benefit of actually getting vue experience). I was able to implement a template containing a html table (rows of data with a column for a item and a column for number of items) Further to this I implement a drop down which had an onchange Ajax event which changed the counts in the mentioned html table. I did this using vues v-for, v-if and value attributes. I was impressed with how easily you can populated the DOM with data for both tables and drop downs! Looking forward to next implementing a template with a vue component (ie a more complex interface) All of this I did without using the CLI as I have zero node experience

  • @user-lt8oz8fq1x
    @user-lt8oz8fq1x2 жыл бұрын

    Thanks! Good tutorial

  • @dineshpaskaran
    @dineshpaskaran Жыл бұрын

    This is sure premium content.. and so thankful that its free. 🙏🙏🙏🙏

  • @mj2068
    @mj20682 жыл бұрын

    for people wondering @2:45:25 that multi selection same tag name editing, the magic move is "ctrl+shift+l". you're welcome

  • @R4venshore
    @R4venshore2 жыл бұрын

    Jesus Christ. Tutorial is great, but omg what did I get myself into. As someone that has done plenty of coding on your typical C#, Swift, Java, Python, even some and CSS back in the day, is JS and those frameworks different or what...it literally feels like they had a CSS developer create a programming language...

  • @mensaswede4028

    @mensaswede4028

    2 жыл бұрын

    Yeah all the modern web app frameworks are like this. If you were designing a web framework from scratch in a vacuum then it would look nothing like anything we have today. For starters, JavaScript is just not a good foundational design for large projects. These things have been bootstrapped for over 2 decodes to incrementally achieve purposes for which their original design was never intended. The various tooling and frameworks do work, and they are passable, but not what any architect would design if you could wipe the slate clean and start over.

  • @Alexander-qz6px

    @Alexander-qz6px

    2 жыл бұрын

    I know what you mean. Was the online shop production painful or what? (In so many ways, even for a demo. I hope noone is ever structuring a cart system like this, but students copy their teachers....)

  • @mourad505

    @mourad505

    2 жыл бұрын

    @@mensaswede4028 For a new developer who'd like to do his own freelance work one day and not be engulfed by the bloated JS frameworks arms-race, what would you suggest?

  • @mensaswede4028

    @mensaswede4028

    2 жыл бұрын

    @@mourad505 Suck it up and learn JS. It’s all there is.

  • @ramakrishnamishra8179

    @ramakrishnamishra8179

    Жыл бұрын

    Feel the same

  • @shifronim8950
    @shifronim89502 жыл бұрын

    Oh, Gwendolyn is back!

  • @tobisamuel8940

    @tobisamuel8940

    2 жыл бұрын

    At last

  • @sk71639
    @sk716392 жыл бұрын

    Great tutorial, thank you

  • @gowdhamt1651
    @gowdhamt16516 ай бұрын

    Thanks for the wonderful tutorial, helped me in understanding basics of Vue js. Is there any follow up tutorials(like vuex state mgmt) on vue js released?

  • @husam2761
    @husam27612 жыл бұрын

    I was searching about something like this and you poped up saving my day, like always

  • @PerryCodes
    @PerryCodes2 жыл бұрын

    "Course Contents" can use a little work... Your time for the "Components" section should be 0:29:20 instead of 01:29:20 :) Also, the "Loops" segment isn't listed. It's located at 0:57:30.

  • @exiviuz2428
    @exiviuz24282 жыл бұрын

    Thanks for this

  • @daviddq
    @daviddq Жыл бұрын

    Awesome introduction. Thanks a lot

  • @DirNews99
    @DirNews992 жыл бұрын

    Amazing, so helpful, thanks

  • @jileisun6865
    @jileisun68652 жыл бұрын

    Thanks for the great lesson! Where to download the related code such as the shop cart exercise?

  • @damonlin2782
    @damonlin2782 Жыл бұрын

    thanks for your tutorial that make me helpful!!!

  • @theuniversesa
    @theuniversesa Жыл бұрын

    I am loving this.

  • @enn_kay
    @enn_kay2 жыл бұрын

    Awesome tutorial!!!

  • @tsurshapira2802
    @tsurshapira28026 ай бұрын

    Thanks very much, great course i really enjoyed it

  • @mator7359
    @mator73592 жыл бұрын

    Thank you very much for this course

  • @robertprescott9577
    @robertprescott9577 Жыл бұрын

    Hello, is this really a beginner course? seems a bit advanced. I am a total newbie. Do you have any courses that are for newbies?

  • @caballero75RS
    @caballero75RS2 жыл бұрын

    I solved the products icon problem this way You're welcome

  • @user-fp3jc9ss2t
    @user-fp3jc9ss2t2 жыл бұрын

    Gwen has such an ASMR voice, sooooo relaxing

  • @OSchou
    @OSchou2 жыл бұрын

    Great course. in the end now, how do i get the icons from json in, on both home and products side?