vue 2 3

Vue-2-3

Componentes Interop Vue 2 com aplicativos Vue 3 e vice -versa!

 < template >
    I'm a Vue 3 app... but I can use Vue 2 components!

    < some-vue2-component />
</ template >

< script >
import SomeVue2Component from 'some-vue2-component'
import toVue3 from 'vue-2-3/to-vue-3'

export default {
    components : {
        SomeVue2Component : toVue3 ( SomeVue2Component )
    }
}
</ script >

Aqui está uma demonstração CodePen usando componentes Vue 2 em um aplicativo Vue 3.

? ‍♂️ Por quê?

• ⛵️ Smooth Vue 3 Estratégia de migração Reescreva incrementalmente seus componentes para serem compatíveis com o Vue 3!
• Expanda o ecossistema Vue 2 e 3 Toque no vasto ecossistema Vue 2 do seu aplicativo Vue 3 e vice-versa!

Instalar

npm i vue-2-3

? Configuração rápida

1. Importar vue-2-3/to-vue-2 ou vue-2-3/to-vue-3 .

   • Use toVue2 para interopitar componentes Vue 3 com um aplicativo Vue 2

      import toVue2 from 'vue-2-3/to-vue-2' ;

   • Use toVue3 para interopitar componentes Vue 2 com um aplicativo Vue 3

      import toVue3 from 'vue-2-3/to-vue-3' ;

2. Ele tentará automaticamente resolver o Vue 2 e 3 via especificadores Bare vue e vue3 , mas se não conseguir encontrá -los, você poderá registrá -los manualmente. Você só precisa fazer isso uma vez, por isso é sugerido para ser feito no topo do seu aplicativo.

    import Vue2 from 'vue2' ;
   import * as Vue3 from 'vue@next' ;
   
   toVue2 . register ( Vue2 , Vue3 ) ;

   Para o Vue 3, você pode fornecer as exportações necessárias createApp e h para manter as dependências ao mínimo:

    import { createApp , h } from 'vue@next' ;
   
   toVue2 . register ( { createApp , h } ) ;

3. Passe o componente e comece a usá -lo!

    import SomeVue2Component from './some-vue2-component' ;
   
   export default {
       components : {
           SomeVue2Component : toVue3 ( SomeVue2Component )
       }
   }