Mixins

    Example:

    When a mixin and the component itself contain overlapping options, they will be “merged” using appropriate strategies.

    For example, data objects undergo a recursive merge, with the component’s data taking priority in cases of conflicts.

    2.   data() {
    3.     return {
    4.       message: 'hello',
    5.       foo: 'abc'
    6.     }
    7.   }
    8. }
    10. const app = Vue.createApp({
    11.   mixins: [myMixin],
    12.   data() {
    13.     return {
    14.       message: 'goodbye',
    15.       bar: 'def'
    16.     }
    17.   },
    18.   created() {
    19.     console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }
    20.   }
    21. })

    Hook functions with the same name are merged into an array so that all of them will be called. Mixin hooks will be called before the component’s own hooks.

    1. const myMixin = {
    2.   created() {
    3.     console.log('mixin hook called')
    4.   }
    5. }
    7. const app = Vue.createApp({
    8.   mixins: [myMixin],
    9.   created() {
    10.     console.log('component hook called')
    11. })
    13. // => "mixin hook called"
    14. // => "component hook called"

    You can also apply a mixin globally for a Vue application:

    1. const app = Vue.createApp({
    2.   myOption: 'hello!'
    3. })
    5. // inject a handler for `myOption` custom option
    6. app.mixin({
    7.   created() {
    8.     const myOption = this.$options.myOption
    9.     if (myOption) {
    10.       console.log(myOption)
    11.     }
    12.   }
    13. })
    15. app.mount('#mixins-global') // => "hello!"

    Use with caution! Once you apply a mixin globally, it will affect every Vue instance created afterwards in the given app (for example, child components):

    1. const app = Vue.createApp({
    2.   myOption: 'hello!'
    3. })
    5. // inject a handler for `myOption` custom option
    6. app.mixin({
    7.   created() {
    8.     const myOption = this.$options.myOption
    9.     if (myOption) {
    10.       console.log(myOption)
    11.     }
    12.   }
    13. })
    15. // add myOption also to child component
    16. app.component('test-component', {
    17. })
    19. app.mount('#mixins-global')
    21. // => "hello!"
    22. // => "hello from component!"

    In most cases, you should only use it for custom option handling like demonstrated in the example above. It’s also a good idea to ship them as Plugins to avoid duplicate application.

    When custom options are merged, they use the default strategy which overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to app.config.optionMergeStrategies:

    1. const app = Vue.createApp({
    2.   custom: 'hello!'
    3. })
    5. app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
    6.   console.log(fromVal, toVal)
    7.   // => "goodbye!", undefined
    8.   // => "hello", "goodbye!"
    9.   return fromVal || toVal
    10. }
    12. app.mixin({
    13.   custom: 'goodbye!',
    14.   created() {
    15.     console.log(this.$options.custom) // => "hello!"
    16.   }
    17. })

    As you can see, in the console we have toVal and fromVal printed first from the mixin and then from the app. We always return fromVal if it exists, that’s why this.$options.custom is set to hello! in the end. Let’s try to change a strategy to always return a value from the child instance:

    1. const app = Vue.createApp({
    2.   custom: 'hello!'
    3. })
    5. app.config.optionMergeStrategies.custom = (toVal, fromVal) => toVal || fromVal
    7. app.mixin({
    8.   custom: 'goodbye!',
    9.   created() {
    10.     console.log(this.$options.custom) // => "goodbye!"
    12. })

    In Vue 2, mixins were the primary tool to abstract parts of component logic into reusable chunks. However, they have a few issues:

    • Reusability is limited: we cannot pass any parameters to the mixin to change its logic which reduces their flexibility in terms of abstracting logic