10 Best Tips for Learning Vue from Vue Masters 🏔
If you’re a developer who is just starting out with Vue.js, jumping in can be both exciting and overwhelming. While everybody’s learning process is very different, I asked six Vue Masters the following question:
“What advice would you give developers who are just starting Vue.js that you wish you would have known?”
Ben Hong
Ben is a Full Stack Engineer at GitLab and co-founder of VueDC / VueMeetups.
For those that are just starting Vue.js, there are three things I wish I would have known when I started:
1. The docs are going to be your best friend. They are an absolutely incredible resource with actual examples for what you’re trying to do and is the first place you should check before relying on StackOverflow.
2. There is an actual style guide for Vue applications. While Vue is great at letting you choose what’s best for you, there will be times when you wonder what the Vue community recommends. Well lucky for you, the style guide has categorized different practices according to how important each one is. Just another way they let you choose what’s best for you. And if you really need some structure, check out Chris Fritz’s enterprise boilerplate on some best practices that are ready for you to use in your own projects!
3. And at the end of the day, the community is here for you. The Vue community is an incredibly warm and welcoming one, so in addition to getting help, you’ll find that initiatives like the VueVixens and others help create a nurturing environment that make the experience all the more enjoyable.
🐦Ben’s Twitter | ✍️ Ben’s Blog
Filipa Lacerda
Filipa is a Senior Front-End Engineer & Vue.js enthusiast.
Filipa’s recommendation for getting started:
I guess this is more about state management and less about Vue itself, but I’d say don’t underestimate the way you architecture your application and the way you manipulate your data.
Vue.js is a powerful tool, you can end up with an amazing and easy to debug and maintain an application, but it’s also very easy to get yourself into a nested tree of components that you can’t easily maintain.
I’d say the main thing I wish I have known, is that for any medium size application, you should consider using a good state management tool (like Vuex) from the beginning. Or consider using Nuxt if you are starting an application from scratch, which already has a lot of these things figured out for you.
Hassan Djiredeh
Hassan is a front-end developer for Shopify & author of FullStack Vue.
Hassan’s recommendation for getting started:
I would say to those who are just getting started — all the core pieces that make up the Vue framework (Vue Router/Vuex/etc.) are incredibly easy to piece together.
As long as the developer gets a little comfortable with the core library, they can start adding the other tools sooner than later since they all work together incredibly well.
Back when I began working with Vue, I initially put off from using the other tools due to fear of making my apps more complicated but that fear is definitely not justified :).
🐦Hassan’s Twitter |✍ Hassan’s Blog
Damian Dulisz
Damian is a Vue.js Core Team Member and author of Vue-multiselect.
Damian’s recommendation for getting started:
It might seem as if some parts of Vue are “magical”, but in reality it’s just JavaScript and there’s an explanation to everything. That’s why it’s important that when you learn Vue, you should also keep learning the language itself. Understanding how things work underneath will help you tremendously as you progress deeper into Vue and web development in general.
🐦Damian’s Twitter |😸 Damian’s Github
Lachlan Miller
Lachlan writes about frontend, Vue.js, TDD and blockchain.
Lachlan’s recommendation for getting started:
The Vue.js style guide: This what not around when I started, but I think it’s really valuable. Little things like write props like this:
props: {
myProp: {
type: String,
required: true
}
}Instead of
props: ['myProp']Was not obvious to me at first, and made my early Vue.js applications very difficult to understand.
I’d also advocate having a thorough understanding of the one way data flow model Vue and React present, and being aware of Vuex and Vue Router as soon as possible — not necessarily using them, but understand what they do and know when you need to add them to your project. If you are working with Vue, you will encounter both Vuex and VueRouter sooner or later, so you should understand what they do and why they are useful.
Another piece of advice I give any upcoming developers, Vue.js or not, is to have a testing mentality. You don’t need to write tests when you building a prototype, but once you are happy with your code, make sure you have at least some simple tests before you commit to master — I can’t count the amount of times tests have stopped me from breaking core functionality. `vue-test-utils` and Jest make this very easy. One of the reasons Vue has so few bugs and regressions is because of its solid test suite.
Lastly, I’d recommend trying out lots of different “styles” of Vue. You can use Vue as a script tag from a CDN, using something like Vue CLI 3 to build a full SPA, or in a similar style to jQuery to make a regular server side page a bit more dynamic. There is no “correct” way to use Vue.
Chris Fritz
Chris is a Vue core team member who is most well known for his work writing and curating Vue’s documentation.
Chris’s recommendation for getting started:
Just start reading the guide. We’ve written it so that within a day, you can be familiar with most of Vue’s core features and very productive building real apps.
Getting started is half of the work when it comes to approaching something new! Hopefully, with the help of these Vue Masters, you have gathered what you’ll need to start your road to Vue Mastery!
If you have any additional tips to becoming a Vue Master, I’d love to hear them. Feel free to comment here and join our Facebook group (Vue Mastery Group) to share! 🏔
My recommendation on getting started?
It probably won’t surprise you when I recommend learning with Adam Jahr and me at Vue Mastery. Our courses give you all the basics.
