Vue JS Resources?

I’m wondering if anyone here has already hopped on the Vue train and has some good learning resources and/or example projects. Its buzz is relatively recent, but pretty positive, especially internationally. It’s gotten a bit boost with its recent release of Vue 2.0. I’m looking at a potential job opportunity using it, and while most of my reading on medium and reddit imply the official docs are good, it would be great to find a course with some videos to lead me through something. I get the impression it reminds people of Angular a big with the in-html directives, but having only learned React myself, I’m learning them fresh.

Any recs?

4 Likes

Well, lesson learned: I should read through my tabs before starting a new topic, but now that we have one, take a look at this list of resources (though keep in mind, not officially curated, so some may have problems): https://github.com/vuejs/awesome-vue#tutorials

I’ll respond back here with some commentary about any I try. Also welcome others’ feedback.

2 Likes

@blackmorrow
How are you getting on with your study? Any resources that standout?

I’m considering my next step after the JavaScript course. I’ve met a a Developer at a meetup that is trying to persuade me that vue is better to study first rather than React as it is much more simpler and closer to JS. Do you find that statement true?

Resource Update
First of all, the official documentation for Vue.js is standout and super read-friendly. There are also official example projects to demonstrate some of the properties. Whether or not you consult other resources, I’d recommend reading through the official documentation:
Vue.js 2.0 Guide
Vuex (state management framework)
Vue Router (routing framework)

That out of the way, I’ll say I like tutorial videos to lead me through, and I actually had a hard time at first because 2.0 JUST came out and most of the tutorials out there are 1.0. Surface-level, it’s not a huge adjustment, but under the hood, they’re pretty different, different enough that consulting the comments section for updates is more trouble than it’s worth going through it in the first place, IMO.

So far, I’ve only read the official documentation, which is very helpful (but maybe easier for me since I learned React previously). For other resources:

  1. This walk-through tutorial looks good: https://github.com/jayway/vue-js-workshop
  2. Since Udemy is having a sweet sale and now there are some Vue 2.0 tutorials, I jumped on this one: https://www.udemy.com/vuejs-2-the-complete-guide It should take one from intro-level Vue to single-page apps using Vuex for state management. I’m currently just in the intro-level parts, reviewing. So far it seems good and thorough. My progress is a little slow since I took the job working with Vue, and I’m learning other stuff at work.

React or Vue?
This is a bit of a tough one to answer. I think it depends on a lot of factors including your learning style and your market. I’m inclined to say go with Vue for a couple of reasons.

  1. Angular and now React more so are king in the US because they are “backed” by Google and Facebook respectively. That said, Vue is already popular in Asia (especially China, where I am) and other non-US markets, and it’s gaining a lot of momentum everywhere (top 10 growth in stars on Github). This is partly a simple issue of publicity/PR.
  2. Vue outperforms Angular and React on pretty much all benchmarks, and it’s much simpler to pick up. This leads me to my next reason for suggesting learning Vue:
  3. It’s a “progressive” framework. At the lowest-level, you can simply link to it in your front-end like jQuery, and start using lots of cool features that solve most simple javascript/jQuery needs. Then, if you want to build that into a big single-page app (think gmail, Facebook), you have built-in support for component-style development and React-style rendering if you, PLUS officially maintained supporting frameworks (Vuex and Vue Router). Vue has “single-file component” files which allow you to build your HTML template, your JS code, and your component-specific CSS in a single file that Vue and Webpack will process appropriately–this is actually very cool.
  4. The creator’s next project is working with Alibaba on their project Weex, which will bring native app capabilities to Vue like React Native does for React.

Coming to Vue from React almost felt like cheating because it’s so easy to get what you want and understand how to set it up. There’s a bit more “magic,” for making commonly-needed things happen, but it’s all rather straightforward and explained clearly in the docs. So to compare the “progressive” experience of Vue, where you can scale up as you need, React you have to start out in “advanced” mode: everything is broken into components, you need to use Webpack to bundle things, run a local server to load your site to see it. There are a huge number of the supporting libraries/frameworks for all your needs, but they are all community-provided and not always maintained. React also has a lot more “boilerplate”… That is a lot more code to set up each component before you actually write the code that it needs. That said, I did learn a lot by learning React.

Conclusion
So, I would say, if you like to scale up a step at a time, Vue is definitely the way to go, and might make a nice bridge to eventually learning React if needed, especially if you’re in the US market (but keep an eye on blogging/twitter/job boards…there might be shifting winds). If, however, you like jumping in the deep end first, React might be the way to go, especially if you’re in the US.

7 Likes

Thanks for the comprehensive answer, very much appreciated.

As I said I have the chance of a developer mentoring, I do think it’s wise to follow that route then look at React a little later on. Perhaps I should rework my projects later on with vue for practice.

I think that’s a wise approach–mentorship is huge. I went back and re-did my Pomodoro with Vue as a little practice.

1 Like

5 Free Vue.js (2.0) Tutorials

2 Likes

I was applying for a job that needed Vue and found https://www.udemy.com/vuejs-2-the-complete-guide/ to be excellent. The job fell through, but the knowledge remained.

The docs are really easy to read through.

I did have a fair bit of React knowledge, but none of the tutorials or courses I did used it in “simple” ways. Because the Udemy course started in JSFiddle (I used Codepen), I found it immediately accessible. I’ve used it for many of the challenges on fCC.

I’m actually finding it harder to move my React knowledge back into Codepen. It took a lot of time to get the markdown previewer working in React (https://codepen.io/cloudsociety/pen/RgqVoy), but only 5 minutes to do the same in Vue (https://codepen.io/cloudsociety/pen/pwQwXL). I’m sure a lot of this is comfort and will improve with time.

If you really want to give Vue a serious look in a guided course, try the Udemy one. :slight_smile:

1 Like

second the udemy course https://www.udemy.com/vuejs-2-the-complete-guide/ , other than official doc learned most of my vuejs knowledges from this course and made my portfolio website with vuejs.

I third the Vue.js Udemy course linked above. It was great “guided tour” through the official docs, but I felt it really shines going into Vuex and Vue-Router, for which the docs aren’t as good.

I am loving VueJS so far, after getting lost into the Router/Redux twister in React…
The beauty of Vue is that you can start using it immediately and it makes the DOM manipulation so so so simple.
Curious to check how this framework is appreciated among companies…

The community curated vue.js resources on Hackr.io may be useful - https://hackr.io/tutorials/learn-vue-js

2 Likes

The official documentation for Vue is really very approachable and comprehensive. If you have a good knowledge of React to start from, you may be able to get pretty far on just the docs alone. That being said, I’ve found this series to be very good as well:

Hello blackmorrow

I am curious as to whether you have actually begun to work with Vue

I believe a good source of truth can be found at vuemastery by Gregg Pollack and Adam Jahr

Their courses are very thorough, full of important details and visuals to guide
you through the concepts, and also up to date with the latest vue.js news and
further courses down the line

Hope you give it a vue, no pun intended.

Hey mitchellsaa,

Sorry I don’t check out these forums too often, but thanks for the recommendation! I’ve actually been working on vue projects in production for the last 2.5 years now, haha! I’ve heard of vuemastery, but have not used their materials (though I learned some JS on Gregg Pollack’s previous site, codeschool).

To this thread, I’ll add some new resources for beyond basic Vue learning:

https://vuejsdevelopers.com/ - good articles for some non-basic situations such as plugins, custom directives, async component loading
https://css-tricks.com/ - has vue articles for the same as well
https://github.com/chrisvfritz/vue-enterprise-boilerplate - interesting reference/boilerplate for an enterprise architecture
https://adamwathan.me/ - has advanced vue course that’s quite pricey, but good quality

Here are some free resources i have been following from last two years,

  1. Flaviocopes Vue tutorials
  2. Academind Youtube channel
  3. Net ninja Vue tutorials
  4. VueDose
  5. Vue School articles
  6. Vue.js tutorials

Hope it helps for you…