Tutorial by Examples

You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect every Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options: // inject a handler for `myOption` custom option Vue.mixin({ created: func...

When custom options are merged, they use the default strategy, which simply overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to Vue.config.optionMergeStrategies: Vue.config.optionMergeStrategies.myOption = function (toVal, fro...

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. // define a mixin object var myMixin = { created: fun...

When a mixin and the component itself contain overlapping options, they will be “merged” using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called before the component’s own hooks:...