Tips from a Lowly VueJS Developer

We’re going codeless ! I’m going to try to use my words to express some things today.

VueJS is so much fun. I have had fun poking in and around its ecosystem while developing in it for professional and side projects. The following tips aren’t necessarily meant for somebody that just completed their first TodoMVC in any framework, but it may be useful if you’ve been using VueJS for a little while or are coming to it from a similar framework.

I apologize if I am stating the obvious to you, but I have come to grips with these principles in painful ways.

Use Vuex

If you are working in a business environment, most of your projects will benefit from centralized state management. If you aren’t, then most of your projects will benefit from centralized state management.

A bit cheeky? Well it’s true. Using Vuex or one if it’s alternatives really starts steering you more towards a “framework” mindset. You get wonderful constraints, a little bit more opinion from this unopinionated library, and structure.

What if I don’t need that? I have all my state and components perfectly organized without it!

Well, I have no problem admitting this. You’re better than me. Vuex has really brought some sanity to the way my apps are organized, and I really recommend giving it a look if you get to the point that you’re not sure how data is getting passed around.

Use component data for local state only

Nothing good comes from assigning a prop directly to your data, especially when your props are complex objects. Sometimes you may need to clone data, but never ever ever ever ever mutate your props.

But, but, but, what about .sync?

Are you making a component library? If not, the answer is no.

Avoid doing too much in your lifecycle hooks

Code within lifecycle hooks is generally responsible for some setup code. The most common times that you want to use them is when making calls to your server, making a plugin or integrating a third-party library, such as c3 or chart.js.

If you are doing much more than that, then you really need to take a second look at your code.

Vue.set is a code smell

Vue.set isn’t wrong, but it never feels right. There are occasions where it’s appropriate to use, but there are lots of cases that it’s not good. A lot of people coming from the React world seem to try to use this as a way to reset arrays. With arrays, use splice and push methods, and always try to declare your state up front. Is that always possible? Nope.

Don’t pass props to grandchildren components

Seriously, you’re going to lose your mind if you’re trying to pass props down too deeply. Are there exceptions? Sure, but generally, you’re going to have a better time with a state management solution.

Use vue-cli after learning ES6 modules, NPM, and WebPack/Browserify

A lot of problems posted in VueJS forums spawn from these things. Wes Bos writes absurdly well on these topics.

Denny Headrick is a full-time developer and really really digs VueJS. You can follow him on Twitter @dennythecoder

Finding your meaning in Tech