Mixins

Basics

Mixins provide a very 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.

Component options refer to data, created, methods, etc. in the component object.

You can view the options via this.$options

Example:

// Define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// Define a component that uses the mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

In plain terms, mixins extract part of a component's code and then "mix" it back in. When multiple components share the same option code, you can extract the common code into a separate file and mix it into each component, thereby sharing code across components.

Option Merging

When a component and a mixin contain options with the same name, these options will be "merged" appropriately.

For example, data objects undergo recursive merging, with component data taking priority in case of conflicts.

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
    // message has the same name, component data takes priority, while foo is mixed in
  }
})

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

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// => "mixin hook called"
// => "component hook called"

Options that expect object values, such as methods, components and directives, will be merged into the same object. When there are conflicting keys, the component's options will take priority.

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

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

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

Note: Vue.extend() also uses the same strategy for merging.

Mixin Example Used in a Project

Extracting common code from components:

// mixin.js
export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playlist'
    ])
  },
  mounted() {
    this.handlePlaylist(this.playlist)
  },
  activated() {
    this.handlePlaylist(this.playlist)
  },
  watch: {
    playlist(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    // According to the option merging strategy, this method will be overridden if the component has a method with the same name. If the component does not have a method with the same name, this method will be used, thereby throwing an error.
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

Mixing into a component:

// Usage: can be shared across multiple components
import { playlistMixin } from '@/common/js/mixin' // import shared code
export default {
    mixins: [playlistMixin],
    methods: {
        handlePlaylist(playlist) { // this method can handle differently for different components
            ...
        }
    }
}