I love Vue.js, as I guess you do too (yeah, because you want to read this article). I poured this same love into the reading of the official documentation: a love commensurately reciprocated by the Vue docs team.
If you can, by all means possible, you should be using Vue 3 in your new projects
However, for some reasons that are beyond the scope of this post (/coughs/ laziness /coughs/) I somehow almost always consciously skip the mixins section. That weird voice in my head always whisper things like "here goes all these unnecessary framework over-complication stuff"
So, if you are like me, you have been using Vue for a while now, and you absolutely have not used mixins nor considered using it, then these 2 reasons are the advantages I have gained in using mixins in my Vue 2 projects:
1. De-congestion of Single File Components (SFCs)
When I code SFCs, I like to keep the <script> section as lean as possible. I like keeping the cognitive load of parsing my SFCs to the minimum, and mixins help a lot in this regard. Immediate advantages of this practise include:
- Better code organisation
- Perfect for filters (for Vue 2)
- Icing on cake: easier modular development
2. Escape route for better TypeScript support
Well, Vue 3 brings better support for TypeScript. For Vue 2, the most optimal TS experience is gotten by setting up Class-Style Components.
However, with mixins, I can have a .ts mixin file and do all my Safe Coding™️ there without worrying about limited TS support in SFC files.
These above are the strongest reasons I have for using mixins in my Vue 2 projects.
I hope you learned something in this piece, too.
Top comments (0)