Four tips for working with Vue.js
Click here to share this article on LinkedIn »
Here are a couple of tips that I have learned from working with Vue.js over the past year.
1. Use arrow functions inside components
ES6 introduced a new way to define functions. Although it is shorter and faster to type, its power comes from how it defines its scope. When using the old way of defining functions the this scope does not work the way we might intend. For example:
The growUp function has defined its own scope therefore the this does not reference the Person object. You can get the desired behavior by storing the Object instance in a variable or by binding the function scope to the parent container.
Or instead we could just use the arrow function. Since it automatically bind its scope to the parent there is no need for additional “fixes”.
More concise right!?
2. Use Single File components
Single File components is one of my favorite Vue.js features. It allows us to define reusable templates and separate parts of our app into manageable pieces. Build tools are required to use Single File components.
There are multiple ways to define Vue components.
For example:
Now the same component as a Single File component:
The benefits might not be as apparent with small components, but right off the bat we get the syntax highlighting for the template structure and it is easier to visually scan and find what we are looking for.
3. Global plugins
With larger apps we will probably re-use similar methods, computed properties or even components throughout it all. Instead of rewriting methods and importing Single File components inside every component, we can define once and install as a global plugin.
We could define all the components and helpers in the same component:
Or we could create a plugin and install it:
Definitely a good option when we see yourself copying and pasting multiple times. Remember to keep it DRY 🙂
4. Use Vuex for state management
Modern web apps manage and update large data sets. An approach I have seen quite a lot is to store and manage all the data inside the component. There is nothing wrong with that approach when state sharing across components is not needed.
It is tempting to pass the data as a prop to components and utilize Event Bus messages to handle updates, but with that approach it is easy to become bloated and difficult to maintain over time.
Vuex shines in scenarios when we are required to use multiple components that all want to share the same state. Instead of living in the hell of passing all the data through props to child components, Vuex can store the entire state and have it accessible to all components.
With Vuex we can define the state (data), getters, actions and mutations that can allow us to do anything and everything.
Use Vuex in the component:
We can also define additional actions and mutations to continue updating the data. Additionally, it maintains the reactive-ness that is Vue.js.
Conclusion
Vue.js can be a lot of fun to work with given that you have some knowledge, best practices and useful tools.
Although I currently enjoy working with Vue.js in my daily work, it wasn’t always like that. 😉
Follow me on Medium and on Twitter as I work on my writing skills and continue to share my thoughts!
P.S. I am looking for additional subjects (programming languages, frameworks, etc..) to write about. Let me know if there are any articles or tutorials you are interested in.
I am also available for hire!
If you found this post interesting, check out my personal website where I will continue writing on https://jsgv.io
