Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js: Components vs. Plugins vs. Mixins

Tags:

What exactly are the differences between the following (when to use what):

  • Vue Components
  • Vue Plugins
  • Vue Mixins
like image 635
user203687 Avatar asked May 22 '18 18:05

user203687


People also ask

Why are mixins used in Vue components?

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component's own options.

What are plugins in Vuejs?

Vue. js plugins are a powerful but simple way to add global features to your app. They have a variety of uses, from distributing app-wide components to adding additional capabilities such as routing and immutable data stores to your app.

What are Vue mixins?

What are Mixins? Mixins in Vue JS are basically a chunk of defined logic, stored in a particular prescribed way by Vue, which can be re-used over and over to add functionality to your Vue instances and components. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks.

What is the difference between views and components in Vue?

The key difference is that some Vue components act as Views for routing. The components located under src/components are less likely to be used in a route whereas components located under src/views will be used by at least one route.


1 Answers

Components are elements. They are like Blocks of functionality and layout that you would use to build an application or UI. Components can be extended, doing so uses aspects of the original component while giving you the ability to add other functionality.

Similar to extending existing component, you can use a mixin, which is much like a component you'd extend, but it adds functionality to an existing component.

A plugin adds top-level functionality that can be accessed by any component.


The use depends on what you're trying to achieve. Things like routes and state management are a good fit for plugin, because it allows you to affect/listen to changes across the application without setting up props or listeners. But you wouldn't use them for a component-specific functionality, because they would pollute your app.

Mixins is a controversial feature that some argue should not be used. The idea is that Component wrapping or Higher Order Components can implement in a more robust way. more info here:(https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)

The components are fundamental to building a vue app, so you can't get around using them, but there are ways you can get more out of them. Vue allows use of slots, which help cover some of the functionality, that the react community prefers higher order components does.

If you're relatively new to Vue, I would advise that you don't use mixins, hold off on Plugins until, and spend time with implementing functionality using components and if you're creating re-usable components utilise scoped slots. https://vuejs.org/v2/guide/components-slots.html

like image 157
Daniel Avatar answered Sep 23 '22 06:09

Daniel