How to configure separate compatConfig options per external Vue library with the Vue 3 migration build?

Question

Using the Vue 3 migration build, it's possible to set a global compatConfig: { mode: 2 | 3 } and also separately per component but is it possible to do it per library?

I'm using the BootstrapVue which requires that compatConfig: { mode: 2 } is set globally but this breaks many Vue 3 libraries that use the new v-model property names. It's possible to do this on the outer component by wrapping the component object:

<template>
  <SomeComponent />
</template>

<script setup>
import { default as C } = './vue-component'
const SomeComponent = { ...C,  compatConfig: { mode: 3 };
</script>

but libraries often use internal components which do not inherit mode 3 that can break their functionality.

Is there a Vite build step I can configure to apply a compatConfig property to modules of my choosing or some other way I can overcome this problem?

Answer 1

It required some hackery but I found a workaround to this problem using yarn patch and editing the first few lines of the external library to redefine the defineComponent import from vue.

import { defineComponent as defaultDefineComponent } from 'vue';
const defineComponent = obj => defaultDefineComponent({ ...obj, compatConfig: { mode: 3 } });

It's not a perfect solution but it does work. I feel as though something similar could be achieved with vite and aliasing but I needed to use yarn patch on this library to wrap a Vue 3 functional component in a call to defineComponent to get around the migration build not applying class attributes to the functional components.