❮ Vue3 Intro Vue3 Routing ❯

Vue3 Mixins

Mixins define reusable methods or computed properties. A mixin object can contain any component options. When a component uses a mixin object, all the mixin object's options are merged into the component's own options.

Let's look at a simple example:

Example

// Define a mixin object
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('Welcome to the mixin example - tutorialpro!')
    }
  }
}

// Define an application that uses the mixin
const app = Vue.createApp({
  mixins: [myMixin]
})

app.mount('#app') // => "Welcome to the mixin example - tutorialpro!"

Option Merging

When a component and a mixin object contain the same options, these options are merged in a suitable manner.

For example, data objects are shallowly merged (one level deep), and in case of conflicts, the component's data takes precedence.

In the following example, the Vue instance and the mixin object contain the same method. The output shows that the two options are merged.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Test Example - tutorialpro.org(tutorialpro.org)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const myMixin = {
  data() {
    return {
      message: 'hello',
      foo: 'tutorialpro'
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    document.write(JSON.stringify(this.$data))
  }
})

The output is:

{"message":"goodbye","foo":"tutorialpro","bar":"def"}

Hook functions with the same name are merged into an array and are all called. Additionally, the mixin's hooks are called before the component's own hooks.

const myMixin = {
  created() {
    console.log('Mixin object hook is called')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('Component hook is called')
  }
})

// => "Mixin object hook is called"
// => "Component hook is called"

Options that are objects, such as methods, components, and directives, are merged into the same object. In case of key name conflicts, the component's object takes precedence.

Example

const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    conflicting() {
      console.log('from self')
    }
  }
})

const vm = app.mount('#app')

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

In the above example, we called the following three methods:

vm.foo();
vm.bar();
vm.conflicting();

From the output, if there are methods with the same name in the methods option, the Vue instance has higher priority and will execute the output.

Global Mixins

You can also globally register mixin objects. Be cautious! Once you use global mixins, they will affect every subsequently created Vue instance. Used appropriately, they can inject processing logic for custom options.

Example

const app = Vue.createApp({
  myOption: 'hello!'
})

// Inject a handler for the custom option 'myOption'.
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      document.write(myOption)
    }
  }
})

app.mount('#app') // => "hello!"

Use global mixins with care, as they will affect every individual Vue instance created (including third-party templates).

❮ Vue3 Intro Vue3 Routing ❯