agent-skills/skills/vue-best-practices/reference/composition-api-mixins-replacement.md

---
title: Use Composables Instead of Mixins for Logic Reuse
impact: HIGH
impactDescription: Mixins cause naming conflicts, unclear data origins, and inflexible logic - composables solve all these problems
type: best-practice
tags: [vue3, composition-api, composables, mixins, refactoring, code-reuse]
---

# Use Composables Instead of Mixins for Logic Reuse

**Impact: HIGH** - Mixins, the primary logic reuse mechanism in Options API, have fundamental flaws that make code hard to maintain. Composables (Composition API functions) solve all mixin drawbacks: unclear property origins, naming conflicts, and inability to parameterize.

The ability to create clean, reusable logic through composables is the primary advantage of the Composition API.

## Task Checklist

- [ ] Migrate existing mixins to composables when refactoring
- [ ] Never create new mixins - use composables instead
- [ ] Use explicit imports to make data origins clear
- [ ] Parameterize composables to make them flexible
- [ ] Prefix composables with "use" (useAuth, useFetch, useForm)

**Problems with Mixins:**
```javascript
// userMixin.js
export const userMixin = {
  data() {
    return {
      user: null,
      loading: false  // Conflict waiting to happen!
    }
  },
  methods: {
    fetchUser() { /* ... */ }
  }
}

// authMixin.js
export const authMixin = {
  data() {
    return {
      token: null,
      loading: false  // NAME CONFLICT with userMixin!
    }
  },
  methods: {
    login() { /* ... */ }
  }
}

// Component using mixins - PROBLEMATIC
export default {
  mixins: [userMixin, authMixin],

  mounted() {
    // PROBLEM 1: Where does 'user' come from? Have to check mixins
    console.log(this.user)

    // PROBLEM 2: Which 'loading'? Last mixin wins, silently!
    console.log(this.loading)  // Is this user loading or auth loading?

    // PROBLEM 3: Can't customize behavior per-component
    this.fetchUser()  // Always fetches the same way
  }
}
```

**Composables Solution:**
```javascript
// composables/useUser.js
import { ref } from 'vue'

export function useUser(userId) {  // Can accept parameters!
  const user = ref(null)
  const loading = ref(false)
  const error = ref(null)

  async function fetchUser() {
    loading.value = true
    try {
      user.value = await api.getUser(userId)
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  return { user, loading, error, fetchUser }
}

// composables/useAuth.js
import { ref } from 'vue'

export function useAuth() {
  const token = ref(null)
  const loading = ref(false)  // No conflict - it's scoped!

  async function login(credentials) { /* ... */ }
  function logout() { /* ... */ }

  return { token, loading, login, logout }
}

// Component using composables - CLEAR AND FLEXIBLE
<script setup>
import { useUser } from '@/composables/useUser'
import { useAuth } from '@/composables/useAuth'

// SOLUTION 1: Clear where everything comes from
const { user, loading: userLoading, fetchUser } = useUser(123)
const { token, loading: authLoading, login } = useAuth()

// SOLUTION 2: Rename to avoid any conflicts
// userLoading vs authLoading - explicit!

// SOLUTION 3: Parameterize behavior
const adminUser = useUser(adminId)
const currentUser = useUser(currentUserId)
// Each has its own state!

onMounted(() => {
  fetchUser()  // Explicitly from useUser
})
</script>
```

## Migrating from Mixins

```javascript
// BEFORE: Mixin with options
export const formMixin = {
  data() {
    return { errors: {}, submitting: false }
  },
  methods: {
    validate() { /* ... */ },
    submit() { /* ... */ }
  }
}

// AFTER: Composable with flexibility
export function useForm(initialValues, validationSchema) {
  const values = ref({ ...initialValues })
  const errors = ref({})
  const submitting = ref(false)
  const touched = ref({})

  function validate() {
    errors.value = validationSchema.validate(values.value)
    return Object.keys(errors.value).length === 0
  }

  async function submit(onSubmit) {
    if (!validate()) return

    submitting.value = true
    try {
      await onSubmit(values.value)
    } finally {
      submitting.value = false
    }
  }

  function reset() {
    values.value = { ...initialValues }
    errors.value = {}
    touched.value = {}
  }

  return {
    values,
    errors,
    submitting,
    touched,
    validate,
    submit,
    reset
  }
}

// Usage - now parameterizable and explicit
const loginForm = useForm(
  { email: '', password: '' },
  loginValidationSchema
)

const registerForm = useForm(
  { email: '', password: '', name: '' },
  registerValidationSchema
)
```

## Composition Over Mixins Benefits

| Aspect | Mixins | Composables |
|--------|--------|-------------|
| Property origin | Unclear | Explicit import |
| Naming conflicts | Silent overwrites | Explicit rename |
| Parameters | Not possible | Fully supported |
| Type inference | Poor | Excellent |
| Reuse instances | One per component | Multiple allowed |
| Tree-shaking | Not possible | Fully supported |

## Reference
- [Composition API FAQ - Better Logic Reuse](https://vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse)
- [Composables](https://vuejs.org/guide/reusability/composables.html)
- [VueUse - Collection of Composables](https://vueuse.org/)