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

Question

We are initially migrating our application from Vue2 to Vue3, some components have mixins added, and I want to know how to add these mixins in Vue3. I tried several solutions but didn't find a special hook corresponding to `mixins: []` in `export default` in Vue2.

P粉242126786 · Answer

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.