Vue2 to Vue3 migration - How to update mixins added in Vue2 components in Vue3's setup API.

Question

Recently we started to migrate our application from Vue2 to Vue3, and mixins were added to some components. I would like to know how to add these mixins in Vue3.

I tried several solutions but didn't find a special one corresponding to `export default { name: "Modal", components: { Loader }, mixins: [] }` in Vue2 hook. How do I add a mixin?

Answer 1

In Vue 3, you can still use mixins in a similar way to Vue 2 when using the Options API.

const mixin = {
  created() { console.log('Mixin'); },
};

export default {
  name: "Modal",
  components: { Loader },
  mixins: [mixin]
};

But for the Composition API, you must use composable functions instead of mixins:

// Composable declaration function
import { onMounted } from 'vue';

export function useMixin() {
  onMounted(() => console.log('Mixin'));
  return {};
}

// In your component
import { useMixin } from './mixin';
import Loader from './Loader';

export default {
  name: "Modal",
  components: { Loader },
  setup() {
    useMixin();
    return {};
  },
};

Combinable functions provide a clearer and more flexible alternative to mixins when using Vue 3's Composition API.