Versioning Vue components. How not to break something in a large codebase?

Question

Vue.js

I read an article about versioning Vue components.
For example, there is a dropdown component, but it needs to be radically changed, while retaining the old implementation of this component, so as not to break something in a large code base and gradually replace it with a new version.

The bottom line was that the dropdown component itself (or some other) was a "wrapper" of the form:

<template functional>
  <component :is="`dropdown_version_${props.version || 1}`" .../>
</template>

where the specified version of this component was imported and props, attributes and listeners were forwarded.

In the place where this component was used, there was something like this:
<dropdown version="3" :items="..." @change="..."/>

I don’t remember what the title of this article was and I can’t find it to see the implementation details of passing all props attributes, etc.

I would be grateful for a link to such an article or for details of the implementation of such a solution!

Answer 1

Well, here the adapter pattern probably suggests itself. You make a proxy component out of your component, which, depending on the type of version, passes data to the child. I don’t know the links, and it’s probably not needed here, it’s just everything to buzumiya. The main thing is not to shoot yourself in the foot with such things.