Vue.js is growing so fast in popularity and usage. This may be as a result of how approachable it is, in the sense that if you already know HTML, CSS, and JavaScript, you can adopt it for existing projects or use it alongside other libraries. With its blazing fast virtual DOM and its versatility, you can choose to use it just as a library or a full-featured framework to build sophisticated apps in combination with modern tooling and supporting libraries.

I see more people wanting to learn Vue and with all the awesome resources available, ranging from books, video courses, and blog posts, they get confused on where to start from. I'll share with you how and where I think you should start from.

1. Learn The Essentials

I think it's best to start with understanding the concept of Vue and its fundamental APIs that you'd need to know to build a fairly complex app. My preferred choice for this is reading the Essentials section of Vue docs. If you don't like reading docs, but prefer video tutorials, I'll suggest the Intro to Vue on Vue Mastery. It covers the basics and gives you code challenges to try and practice yourself.

2. Build!

After learning the basics, I strongly suggest the next step is to build something with it and utilise what you learnt. I think this is the most important step in your learning process that you shouldn't skip. If you forget something, look it up in the documentation. You can pick a new side-project and build from scratch, or integrate into an existing app. It could also be an internal production app for the company you work for. For me, I re-built an application I had built with vanilla JS, with Vue, and I blogged about it.

3. Learn Beyond The Essentials

Once you've learned the basics, and have built something with that knowledge, you're ready to go beyond essentials. You should learn more about components, render function, and debugging with the Vue devtools. The Vue doc has a section titled Components In Depth. This is a very good resource to learn more about components. Another awesome resource to learn deeply about components is the Vue Mastery course, Advanced Components. In it, you learn more about the full functionality of Vue component with Gregg Pollack and Evan You. This course walks you through building a reactivity system and the code for Vue's reactivity system, template compilation, the mounting process and many more. I would suggest if you're looking to contribute to the Vue codebase, you should watch this. Otherwise, read the section Component In Depth from the Vue docs and then watch the course Real World Vue.js on Vue Mastery.

The Real World Vue.js course takes you through building an event management system in Vue.js. You'll learn about Vue CLI 3 and Vue UI, single file component, Vue Router, and Vuex.

4. Build!!

With all the knowledge you've gained, you have nothing stopping you from building more applications. The more you build, the more you learn 🚀

Summary

Vue.js is a performant library and it's amazing to see it gain more adoption. I've shared my learning path with the hope it'll help you. You can as well use other resources, and I'll be glad to know about the resources you use. I use the Vue docs and Vue Mastery courses. Since I talk a lot about Vue Mastery, I've asked Gregg to give me a discount code which I can share with my readers. Some content is free and some paid. You can use the code PETER25 to get a 25% discount once you signup for the annual subscription. Another interesting fact about Vue Mastery is that some of the earnings go to the Vue.js project itself. So by subscribing, you're supporting the Vue.js project, and also supporting Gregg and his colleagues for putting together awesome courses.