What are mixins?

VueJunior~1 min read

Mixins are a Vue mechanism (mainly from Vue 2) that let you reuse logic between components by adding shared properties to them:

data
methods
computed
lifecycle hooks
and other component options

In simple terms:

A mixin is an object with logic that gets "mixed into" a component.

The component receives everything described in the mixin.

A simple mixin example

mixin.js

export const myMixin = {
  data() {
    return {
      message: 'Hello from mixin'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message)
    }
  },
  created() {
    console.log('Mixin created hook')
  }
}

component

import { myMixin } from './mixin'

export default {
  mixins: [myMixin],

  created() {
    console.log('Component created hook')
  }
}

What happens?

The component receives:

data -> message
a method -> sayHello()
the mixin's lifecycle hook also runs

Hook order:

created from the mixin
created from the component

Why are mixins needed?

1. Reusing logic between components

For example:

authorization logic
shared API methods
shared validation
shared computations

2. Reducing code duplication

3. Used before the Composition API appeared

Downsides of mixins (why they fell out of favor)

This is an important part of the interview answer.

1. Name conflicts

If a mixin and a component have the same method/data:

mixin: say() {}
component: say() {} // overrides it

It's hard to tell where things come from.

2. "Magic" logic

It's unclear which properties come from where.

3. Poor readability

Logic is spread across different files:

part is in the mixin
part is in the component
part is in another mixin

It's hard to understand what the component does.

4. Poor scalability

On large projects, mixins create chaos.

The modern alternative: Composition API + composables

In Vue 3, mixins are practically replaced by composable functions:

export function useUser() {
  const user = ref(null)

  function fetchUser() {}

  return { user, fetchUser }
}

They are used clearly, without conflicts, without magic.

Summary (great for an interview)

Mixins are a way to reuse logic between components, where a mixin object gets "mixed into" a component. They let you share data, methods, computed, and lifecycle hooks. However, mixins have serious downsides: name conflicts, hidden logic, and poor scalability. In Vue 3 they are practically replaced by the Composition API (composable functions).

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.