Suggest an edit

Improve this article

Refine the answer for “What are mixins?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

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

#### component

```js
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:

1. **created** from the mixin
2. **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:

```js
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**:

```js
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).**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts420 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.