Component vs Mixins vs Plugins in Vue.js

Which is the best choice?

In trendings of repositories with a lot of stars, for sure Vue.js is a good framework to work with. The simplicity to solve problems and the facility to learn it is the most common talks about this. At the hand of a handful of files, you can do everything you want, from building a simple page to a complex one.

In Vue.js you can implement Components, Mixins and Plugins, but exists some differences between these methods and the correct application to each one. To start thinking in which to choose we need to know the basics about all of these.

Components

Menu item component

Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code.

They are the high level of a Vue application and compose layout or functionalities to your program. In the most times, developers opt for that because of the reuse or facility to replicate in others parts. Components can be extended getting the aspects of a parent component to the child.

Mixins

An example of global mixin

Mixins are a flexible way to distribute reusable functionalities for Vue components

Mixins are options of a component that can be accessed in any component, in several times this avoids the rework and allow to write less. They can be local, that is created and accessed only once in a component or global, it will affect every Vue instances. Already ahead that as a personal option, I choose to use plugins instead of mixins.

Plugins

An example of plugin

Plugins usually add global-level functionality to Vue

Plugins are uses that can be accessed in any component and depends on your use. Things like router, state management and even actions that are realized can be a plugin that will be imported and used globally. For example, you can write a global method as a plugin and, any component will have access to this functionality.

And now, which to choose?

Components inevitably will be in your project, because Vue is based in components, even using only CDN (without use vue-cli) you’ll construct components to compose your application. The real decision is between Mixins and Plugins, and for these have some pros that need to be considered

Mixins Pros

• Can be used as options of component, writing less on each one;
• It’s globally or locally accessed;

Plugins Pros

• Can be used in any component as method;
• It can implement more than component options, being able to construct full modules (like router or state management)

As I said before, I prefer to use plugins instead of mixins because of the functionalities that can be implemented using this, but mixins have them on pros and you might consider this before start writing code.

I hope that this article can be useful to you and any doubt can be answered. Thanks a lot!