Reutilizar código en Vue.js con mixins te permite combinar configuraciones de la Options API en distintos componentes sin duplicar lógica. Sirve para developers que trabajan con Vue 2 o proyectos legacy y necesitan compartir métodos, datos o hooks entre componentes.

Los mixins funcionan como una especie de herencia o composición ligera: defines atributos y métodos una sola vez y los inyectas donde los necesites. Pero, como verás más adelante, también traen sus propias trampas.

¿Qué es un mixin en Vue.js y para qué sirve?

Un mixin es un objeto JavaScript que contiene las mismas opciones que tendrías dentro de un componente Vue: la función data, methods, computed, hooks del ciclo de vida, etc. La diferencia es que ese objeto se importa y se combina con la configuración del componente que lo consume.

¿Qué es un mixin en Vue? Es un objeto reutilizable que mezcla opciones como data, methods y hooks dentro de uno o varios componentes, evitando copiar el mismo código en cada archivo.

Esto te permite tratar fragmentos de tu lógica como si fueran una pequeña librería interna del proyecto, lista para inyectarse en cualquier componente.

¿Cómo crear y usar un mixin paso a paso?

La convención típica es crear una carpeta mixins dentro de src y guardar ahí archivos .js con la lógica compartida [3:20]. No necesitas un single file component porque solo vas a exportar JavaScript.

Estructura del archivo mixin

Dentro del archivo usas export default y escribes exactamente las mismas opciones que pondrías en un componente. Por ejemplo, un mixin base podría verse así:

js export default { data() { return { algo: 'un texto' } }, created() { console.log('base created') } }

Aquí defines una variable algo en data y un hook created que imprime un mensaje en consola cuando el componente se monta.

Importar el mixin en un componente

Dentro del bloque <script> del componente, importas el archivo y lo registras en la opción mixins:

js import base from '@/mixins/base'

export default { mixins: [base] }

La sintaxis @ apunta a la carpeta src, así que @/mixins/base resuelve la ruta automáticamente y puedes omitir la extensión .js.

Desde ese momento, el componente tiene acceso a la variable algo y ejecuta el console.log de base created como si fuera código propio. Si lo renderizas con {{ algo }} en el template, verás el texto en pantalla.

¿Qué pasa si hay conflictos entre mixin y componente?

Cuando una variable o método existe con el mismo nombre en el mixin y en el componente, Vue.js da prioridad al componente. Esto evita ambigüedades y deja claro de dónde viene cada valor cuando hay colisiones.

En el caso de los hooks del ciclo de vida no hay reemplazo: se ejecutan ambos. Primero el del mixin y luego el del componente, así que tu created del mixin y el created del componente corren en secuencia.

¿El mixin sobreescribe los datos del componente? No. Si hay nombres duplicados, el componente gana. Solo los hooks del ciclo de vida se ejecutan en cadena.

¿Cuándo conviene usar mixins y cuándo evitarlos?

Los mixins son potentes para tareas transversales: agregar un sistema de debugging común, compartir un estado vía provide/inject, o estandarizar comportamientos en muchos componentes a la vez. Su poder está en modularizar características de Vue.js para que cualquier componente las herede sin esfuerzo.

Las desventajas que debes conocer

Antes de llenar tu proyecto de mixins, considera estos puntos:

• Opacidad del código: la variable algo no está declarada en el componente, pero la usas. Si alguien lee el archivo sin abrir el mixin, no entiende de dónde sale.
• Acoplamiento implícito: modificar un mixin afecta a todos los componentes que lo consumen, y muchas veces sin avisar.
• Debugging complicado: hooks como created pueden ejecutarse sin que te des cuenta, lo que dificulta rastrear bugs.

Esa falta de visibilidad directa es la queja más común contra los mixins y la razón por la que muchos equipos los evitan en proyectos grandes.

El reemplazo en Vue 3

A partir de Vue.js 3 llegó la Composition API, que ofrece una sintaxis funcional para reutilizar lógica sin los problemas de los mixins [10:30]. Mientras la Options API configura componentes con un objeto JSON, la Composition API usa funciones componibles que hacen explícito qué entra y qué sale del componente.

Si estás empezando un proyecto nuevo en Vue 3, probablemente no necesites mixins en absoluto. Si mantienes código en Vue 2, dominarlos sigue siendo clave.

¿Has tenido problemas debuggeando un mixin que no sabías que estaba ahí? Cuéntalo en los comentarios.