[2017] Vue.js in less than 30 minutes for beginners - Tutorial - 2.0

[@VitruvianAlgo]

playing at 1.5x speed and the message still sinks 100%. LOVE your tutorial and style of teaching. you basically hit all the pain points a beginner will need to hit the ground running without having to watch another tutorial. Thanx man! Subbed

[@Mmmtzzz]

Usually, when watching dev tutorials I get bored quick. I watched lots of Vue js video tutorials and didn't catch so quick the essence of it as I did here . Yours is simply the best! Very well organized and the most important things caught in again important 30 Minutes! Love that you're using a simple tool like codepen and we can code while watching! :P Thank you for being here!! You're doing some awesome stuff! P.S. The text is fine for me, I can see very well! :D

[@richardxu8865]

You're a very good teacher, and this video on Vue is extremely appreciated!

[@spectator59]

I like your tutorial style, showing features incrementally and building-as-you go. Clear, focused, articulate, concise. Great!

[@popothebright]

Awesome tut. Big thumbs up on the presenter. Good enthusiasm. Great clarity. Good pacing. All around good educator. Keep doing exactly what you're doing!

[@druggero77]

Outstanding video! I learned so much about Vue.js in this short video. Chris is a great instructor who presents the information in a clear easy to understand way. Looking forward to watching more of his videos.

[@desaikey]

I am new to JS and the whole framework business. But I was able to follow line by line and felt I got a pretty good idea of the power frameworks in general and Vue specifically. Great work!! Please keep making more.

[@MichelAlbert]

I really appreciated the fast pace. Perfect to get a quick look on the framework. Especially if you already know everything *except* Vue. One thing that would have been great though would be an example on how to get the data (the post list) via an XHR request. That's really all that's missing to get you going right away.

[@trentclowater]

Good tutorial, but the text is tiny! Makes it difficult to watch on a mobile device.

[@devcoffee]

I'll keep that in mind for future videos! I apologize about that.

[@neilpearce]

Yeah you need to record at 1280 x 800 for us to read your code, I'm really struggling to read it ;-)

[@Tokinjester]

mobile devices tend not to lend themselves to a learning environment. maybe you should use a desktop.

[@quentinmckay8658]

Awesome little tutorial project at the end! Not only for learning Vue but I got some new CSS and ES6 knowledge as well. Well done and thank you! Subscribed.

[@scottmangiapane]

Was deciding if I should watch this video or read the docs... The intro pun won me over :) great video, thanks for making it.

[@travholt]

This was very helpful! I actually need to do something like your final example in a current project, and have never used Vue before. Thanks! And you're a good teacher. (Also, that's the most random ending to a webdev tutorial I've ever seen.)

[@FabienLasserre]

This was my very first encounter with vue and boy was it amazing! Thanks a lot for this Chris, it was really cool!

[@devcoffee]

Glad you like Vue.js. You can do some pretty amazing things with it in just a short amount of time. Very satisfying.

[@JayCodesit]

Great intro Chris, so much better than reading dev docs. Would love an in-depth look at using Vue.js with API endpoints, so I'll keep my fingers crossed.

[@montazmeahii6029]

Love the tutorial. At 9:45 when you said, "again, invoke it", I find that you don't need to invoke it. Just v-on:click="toggleOnOff" works.

[@0xAndy]

Great video, man. A couple of small issues: 1. Labels need to point to valid ids using 'for' attribute. Your label is empty. 2. The filter method is not new to ES2015, but introduced in ES5 (along with map, reduce, every, etc.). 3. The _blank attribute is considered pretty dangerous regarding security. If you must use it, add rel="noopener" to the link, so that the targeted document has no access to the caller.

[@superbeef150]

Great video! Easy to keep up with but not so slow that it takes all day to watch. Very neat example at the end!

[@khaledfares8377]

For Toggling it's better to use v-show over v-if, as v-show uses css to hide the element while v-if removes the entire element from the DOM.

[@johnnydriesen7575]

Nice, clean and clear explanation. Thanks for sharing ! Looking forward to your next vid about VueJS.

[@devcoffee]

Thanks so much for the kind words!

[@ShaunCullen]

Awesome stuff man! Quick question tho, React has react-router for handling history for single page apps, what would you use to do a similar thing with Vue? Hows the performance of Vue 2 compared to React in your opinion? Thanks!

[@levidavidmurray]

Awesome video! You make it so easy to follow along and understand. Also love your personality! Please continue this Vue series. I definitely prefer it over Angular and React.

[@devcoffee]

Thanks so much, we are going to get started on the Reddit Clone app in the next couple of weeks with Vue.js :D

[@levidavidmurray]

I changed my mind, I want to get comfortable with React. Haha

[@sheilferzepeda7218]

Hello Mr. DevCoffee. I've already finished a web development course at school that introduced us to HTML/CSS/JS/JQuery. I'm just getting ready to dip my feet a little with frameworks to see what they're about and they seem really powerful when it comes to workflow. The questions I'm having ringing in my head is when is it appropriate to use frameworks versus just pure Javascript? Is there are point where it's wrong to use "too much" framework or is it ineffective to use "too much" Javascript? Are the talks about OOP and Functional programming just more or less up to personal preference? (I found that OOP is much easier in stuff like Java but Functional styles are strong with JS) Thanks for the tutorials too. I find your style of teaching really straight forward and organized and you're easy to listen too (-:. I appreciate the work you're offering us here.

[@edinchez]

Holy shit yes! I'm so stoked about the reddit clone videos, that was exactly what I was thinking of doing to learn Vue. Would be awesome if you started it with the vue-cli tool and single file vue components!

[@devcoffee]

Thanks so much for watching! I'll be covering the vue-cli as well as the single file Vue components in the next couple of videos.

[@edinchez]

Dev Coffee Yes! So excited!

[@criosray]

Very nice! Just one small correction: filter as a parameter doesn't take true or false. It takes a function, calls it passing an element of the array, and checks if the result of the call for the element is true...

[@awg7068]

Great tutorial, the end bit was hilarious, thanks for adding a little levity and ending on a fun note.

[@NebojsaCinger]

Thanks for this video! Was looking for a quick rundown of the basics and you presented it really well.

[@jonathangranstaff9940]

Great intro, can't wait to see the reddit clone!

[@AleksandarT10]

In the next video can you go over these things: 1. Nesting components and what happens if they have same methods /attributes (do the ones from the inner one have precedence?) 2. Communication between Components (how to change property in another component) 3.Interaction with RESTful services Would be great if these are covered ! Thanks a lot in advance

[@devcoffee]

Thanks for the suggestions! I'll definitely be going over this in the Reddit Clone series. Stay tuned!

[@eljefe400]

great job.. i get pretty excited about stuff like this also. Now you have me all giddy with the simplicity of Vue. Im hooked and i have you to blame! thanks for sharing...

[@FabianHernandezN]

Wow, I didn't expect that vue.js to be incredibly easy, Thanks for sharing.

[@dzikens]

great introduction to Vue! I just wanted to point out that Array.prototype.filter method was in ES 5.1 specification already, so it's nothing new and it's save to use it without polyfills, unless you are targeting some ancient IE versions

[@oscargomez5649]

Great tutorial. Im falling in love with Vue.js, simply awesome!

[@Noisecooore]

Can you make new Post() dynamically? Let's say I require my mongoose Post model which is linked to a mongodb with posts in it and I do Posts.find({}) to find all and bind it to a variable postArray (which would be an array). Can I just do like : postList: postArray.map((post)=>{ new Post ( post.title, post.link, post.author, ... } This would simply transfer the objects inside an array into a new Post, or not?

[@adldesigner]

This tutorial rocks! Perfect into to Vue.js. Thank you!

[@phanchanra5293]

Do you have video with vue component and with meteor

[@shlomysella]

Excellent guide, very clear and simple (Except for the small font ). Looking forward for more, please update soon. :)))) Thanks!!

[@cyper0418]

There are so many tutorials for beginners, but as an experienced developer, I am always looking for some fast-paced videos , this one is pretty good, thanks for sharing. I'd like to watch some `advanced` topics, I heard vue-router, vuex, will you do these topics?

[@philsmith6254]

Excellent video. Just started learning Vue and this was helpful

[@nafaa-news]

this makes me think about using VueJs for the next project. Thanks man.

[@_sherloks_]

That ending thought. Great video man :)

[@setggall]

Great tutorial! Any chance of a video on how to tie Vue.js and Meteor together?

[@TheDashang007]

you said something material design? (label coming from top onfocus of input)

[@timoernst]

Best Vue tutorial I've seen so far, thanks! I might adopt using Codepen in my screencasts as well. Seems to be a good choice for live coding.

[@devcoffee]

Do it man, CodePen is awesome for demonstrations and avoiding any setup.

[@lespiedscarres6321]

Outstanding! Your explanations and examples are so clear. Brilliant job. thanks for sharing!

[@devvvvvvvvvvvv]

"skass" ???

[@devcoffee]

Devin Chaves my old dev team used the term. Pretty much we didn't want to call it sass because they are different and saying "scss" all the time is a mouth full.

[@vav17NL]

I pronounce it as "Es-CSS"

[@iNet16]

Yeah normally it's "s-c-s-s" but he mentioned that he prefer to say skass (1 syllable) instead of scss (4 syllables) :p

[@mickeymegabyte]

skuzz - as in SCSI - remember SCSI?

[@luzaw4957]

First time learning Vue js & love it. :D .. Thanks Chris

[@2sex4u]

Amazing video. Easy to consume. Can't wait for your next video.

[@AvinashNethalaCoolestApps]

Can I find the codepen link of this.

[@srinualla6497]

sir.make a tutorial on make a dynamic components and the dynamic component which get data from another component for example: in pexels website when we click on an image its take to a new page make that page dynamic that means the img src link is dynamic which gets the input link from the previously what the img we clicked

[@DrWesMunsil]

Awesome! One nit: I get mixed content warnings on three of your image URLs. I could fix two of them (by changing http to https) but I had to install meteor.png locally.

[@chrishansen4163]

Great video. Just one problem. Would of been nice to show us your css instead of collapsing the panel so quickly! Lol. Especially, that UI trick with the input label. How did you do that? I did write all my own css to mirror what you had, but took a cool few minutes. Lol. Great Video!

[@maskman4821]

this is a short but awesome tutorial, you are amazing!

[@WaldoThe5th]

Great tutorial. Had to go back a few times but it was all human error on my end :). Thanks!

[@anon2889]

Thank you! with a second monitor it was a breeze to go thru the tutorial!

[@kidnard6017]

Can we please have the codepen link to check the code :'(

[@carlheinz.conradie]

Nice tutorial! When is the next one landing?

[@somebody88888]

Thank you! I just got clear idea of what Vue is!!! Thank you!

[@Booyamakashi]

Vue looks like some kind of merge of Angular 1.x and Backbone. Keeping the best things of both

[@charlesdarkwind]

Nice man! short and just the essential, awesome vid.

[@smple5568]

Love the Intro, Jk. U're awesome, good to see u making vids again buddy :)

[@devcoffee]

Bro I miss you! Where have you been?

[@MidnightBoomerang]

Excellent - Keep the vue stuff coming👍🏻

[@devcoffee]

Will do! Thanks for watching!

[@falkor91]

Keep doing this stuff man (subbed after this and react video:D ) Only thing I can ask for is video that'll explain pros and cons of when should I use which framework, because that's main problem for me right now. I don't want to use something because it's flavor of the month but because I understand use cases

[@devcoffee]

That's actually a fantastic idea for a video. Basically listing all the pros and cons of each popular framework in a side by side comparison. I might take this idea for a future video :D

[@Schnorkjumps]

That's something I would be interested in too. Keep them good things coming :)

[@stefancameron]

Well done, great intro to Vue, thanks!

[@yofriadiyahya6818]

great tutorial, looking for more vids to come from you!

[@IShadyl]

very nice pace, definitely gonna check your vue reddit videos :)

[@musasesay581]

thanks very much really helpful now I know where to go next because I already have some knowledge of javascript, CSS, HTML, nodes, express choosing the framework to work with now is the problem I will go for vue.js at the same time angular because ionic for mobile apps

[@FrederickFIintstone]

Fantastic, thanks a lot. You should do some tutorials on projects from start to finish

[@adibroslan4137]

really clear thorough instructions!

[@skillergames9904]

how to start can you give me how to start and what lng first

[@AntonioSantos-xk5zu]

Code is just too small man , can't read it easily. Thank you very much for the video though! Vue's awesome.

[@devcoffee]

I'll keep that in mind for the next Vue.js video and make sure to increase the font size even more!

[@B0bZ0mbie]

Awesome tutorial mate, thank you for that! Go on, you`re really teaching well. And this dog is adorable, so sleepy, maaaan :D

[@devcoffee]

Haha yeah I woke him up at 4 in the morning to record. He was pretty upset but I think it turned out well. Thanks so much for watching

[@zomakaja]

I cant wait till you show how this works with a server

[@KN-ey3yf]

It just doesn't matter whether tool you use for front-end. If you want to know, check another video about react or angular or something like that.

[@poraiuai]

Nice tutorial... I'll wait for the next one!

[@walidabul]

thanks for such a nice tutorial. can you please send me any video or small tutorial how to use range and buttons with mouseup and mousedown and longpress

[@MadhuBhargav]

So we are back to Knockout.js again?

[@DavidKarlsson]

I don't use the cdn Vue, I always use the vue-cli to get hmr and single file vue components set up for free. :)

[@devcoffee]

Yeah hopefully for the next video I can cover the vue-cli! Thanks for watching man.

[@DavidKarlsson]

Also, I'm sure you already know this, but the shorthand for v-bind: is ":" just a colon. :)

[@blackness4954]

I only wish they also included my favorite build tool - Brunch - in the cli. Even so, this is so much better than the ember and angular clis.. and better than the create-react-app package as well. Like, SO MUCH BETTER.

[@DavidKarlsson]

Jun OraOraOra last time I tried brunch out, they didn't have support for hotmodulereloading.

[@blackness4954]

+David Karlsson That has changed with this: github.com/brunch/hmr-brunch However, I haven't really tested it out.. there doesn't seem to be any open pull request. And no issue either. The hmr module is mentioned in the official Brunch docs as well, so I reckon Paul Miller has verified that it works. I'd say Brunch is worth a shot. That is, if convention over configuration is your thing. It could be because I'm just a beginner, but Brunch's way of doing things really does appeal to me :)

[@michaelellis627]

Semantics police here. A couple times in the video you said that a value had to be "a conditional statement". I think if you used the term "boolean" it would have been more clear. Really liked the video, though.

[@mehranqadri]

Bundle of thanks, It really helps to get started

Thanks for making this. Useful stuff!

[@WalidBizid05]

Good tutorial to start Vue JS 💪 keep going 😉

[@gregstephens3531]

Awesome tutorial! Thanks for the help!

[@milkeshpotdar5451]

You have a great video series man. Thank you for this. Can you do more of series where you build apps please . Humble request

[@robertotorres7414]

The dog at the end made everything click

[@rezan6971]

great .. but I barely can see whats happening (on my 15in laptop).. you have so much wasted space on your screen you could use to enlarge the text

[@itaco8066]

You are very good teacher mister, 1+

[@lucasleroux706]

thanks, easy to follow, well explained

[@albertvaldez2669]

Up for this video. Thank you!!!

[@waitcomeagain]

Great video and very helpful!

[@TheEricBrian]

What is vue.js?

[@downforce007]

Great tutorial. Subscribed

[@wrabac89]

awesome, great tutorial!

[@jessielee8832]

Easy to understand!

[@jyon333]

thanks for easy tutorial! It really helpful!!

[@VaughnHaynes]

Good stuff! *Subscribed*

[@this.channel]

Thanks, this was great. BTW, if you like this kind of material design style css, check out W3.CSS. It's an amazing CSS library that is mobile first.

[@MrStoppMotion]

thx! awesome video for beginners

[@AndiSyafrianda]

love this from indonesia

[@ricardogonzales2259]

Please consider use some tool to zoom in

[@AlexandreBassel]

Exceptional video!!!!

[@doggard]

Very helpful, thanks!