Strategies for extending Vue.js : Comparisons of some common techniques.


This tutorial will help you answer some questions, though some different examples and approaches, about how to add support for capturing mouse events that take place within the bounds of a Vue component.

Learn through five examples the benefits of each way and when to use which.

By the end you should have 5 implementations:

  1. Basic simply implements the pointer tracking directly in our component, as a baseline.
  2. Mixin uses a mixin to do the same as above.
  3. Extend uses component extension to inherit the functionality.
  4. Plugin extracts the functionality to an external file, making it available as a custom directive.
  5. Bonus shows off a lot more of what can be done with the plugin / custom directive combo.

To get the code for this tutorial head to the GitHub repo.

Take a look at this tutorial, here.