DEV Community

Cover image for Practical use-cases of Vue.js mixins
Damilola Emmanuel Olowookere
Damilola Emmanuel Olowookere

Posted on

Practical use-cases of Vue.js mixins

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.

Discussion (0)