10 Vue.js Pro Tips from Vue Masters
If you want to become a master of your craft you’ll need to learn from the best. We’ve gathered ten pro tips from six Vue masters by asking them the following question:
“For those developers that are trying to become Vue masters, what is a pro-tip that you’ve learned that’s really helped you?”
Ben Hong
Ben is a Full Stack Engineer at GitLab and co-founder of VueDC / VueMeetups.
Ben’s Pro Tip:
When it comes to refactoring your code or debating how reusable you want to make your code, do not spend too much time trying to optimize for the “perfect” codebase.
It’s much more effective to build everything out and let the reusability occur naturally. In other words, the moment you find yourself getting tired of doing the same thing over and over again, you’ll know it’s time to make that function or component reusable. This will save you a lot of time and headache from trying to predict the future.
🐦Ben’s Twitter | ✍️ Ben’s Blog
Filipa Lacerda
Filipa is a Senior Front-End Engineer & Vue.js enthusiast.
Filipa’s Pro Tip:
Make sure you understand which problem does Vue.js solve, and make sure you understand the concept of reusable components and the flux concept behind Vuex.
I often recommend seeing this talk by Lin Clark about the Wilds of data. Although the talk is about React, I think you can easily port these concepts into Vue.
For me, this talk, plus going through all the official Vue.js documentation before doing any code helped me a lot when it comes to architecture a new feature or a new application with Vue.js.
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 Pro Tip:
As you learn, build lots of things. Constantly. And pick projects you’ll want to show someone you care about, like a pokedex of your friends, choose-your-own-adventure game, or an interactive family tree. We’re so much more motivated to stretch our skills when there’s a social context.
Hassan Djiredeh
Hassan is a front-end developer for Shopify and author of his own blog.
Hassan’s Pro Tip:
A tip that’s worked well with me to really understand things involved always starting small/simple before building up on certain topics.
For example — if you’re about to begin learning Vuex and have never understood Flux, go ahead and build a simple global store first. The transition after that would make a lot more sense. If you intend on using some of Vue Router’s more advanced routing capabilities (e.g Dynamic Route Matching), first go ahead and build a routed application — then consider if there’s areas that need improvement. One of the core premises of Vue is simplicity — so I always like to start things off as simple as possible before expanding/growing :).
🐦Hassan’s Twitter |✍ Hassan’s Blog
Damian Dulisz
Damian is a Vue.js Core Team Member, VueConf Organizer and author of Vue-multiselect.
Damian’s Pro Tip:
I think my favourite is to prefer composition over configuration, which in context of Vue can be translated into “more slots, less props”. Multiple smaller components combined together, rather than one that tries to fulfil all needs.
Using slots is not always obvious, that’s why whenever you struggle with your current approach, it is usually a good idea to take a few steps back and reconsider the decisions you have made up to this point. Quite often, with your current knowledge, you will be able to redesign your code into something more flexible and robust.
Another useful lesson I’ve learned is to know that you don’t have to follow popular patterns like the container vs presentational components pattern. Instead, only apply the patterns in places when those really solve problems and make things easier, instead of over-engineering from the very start. Same with Vuex — putting too much state into Vuex too soon is just asking for problems. Try to keep things simple for as long as it makes sense.
🐦Damian’s Twitter |😸 Damian’s Github
Lachlan Miller
Lachlan writes about frontend, Vue.js, TDD and blockchain.
Lachlan’s Pro Tip:
I’d say two things have helped solidify my knowledge about Vue, and improve my applications written using Vue.js.
The first piece of advice I’d offer is try making some plugins and directives. Creating both these will give you more insight into how Vue works internally, and how other plugins and directives work. Until I tried making a simple directive (I wrote about the process here, and another simple directive I made is found here), things like `v-for` and the such felt like “magic”. Same with `vue-router` and `vuex`… but once I tried implementing my own small plugins, both felt a lot more understandable and I was able to code with more confidence.
This brings me to me second point — contributing to Vue related projects. At first, since the Vue.js codebase is pretty complex, I recommend just reading through some code and seeing how people build plugins, directives and custom components. `vuex` is probably the most approachable of the core Vue libraries — the core functionality is only a few hundred lines, and it’s fairly easy to understand.
Other great ways to contribute are opening issues on libraries you use, especially if you can provide a good reproduction, and answer other people’s issues. Since software development is mostly problem solving, learning how to understand other people’s problems and find a solution is a valuable skill, both for working with Vue.js and in general.
We hope that you’ve found pro tips from these particular Vue masters to be helpful guides for you to kick this year up a notch and become well on your way to Vue Mastery!
If you’re beyond the Vue basics, I recommend checking out my Advanced Components course over on Vue Mastery (the first two lessons are free). This is where you can learn about Vue’s reactivity & rendering system, so you have a better idea of how Vue.js works from the inside out. We also cover topics like functional components, scoped slots, and Vue’s mounting process.
If you have any additional pro tips to becoming a Vue Master, feel free to comment and join our Facebook group (Vue Mastery Group) to share! 🏔
