vue 2 3

VUE-2-3

Interopops 2 componentes con aplicaciones Vue 3 y viceversa!

 < 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 >

Aquí hay una demostración de CodePen usando componentes Vue 2 en una aplicación Vue 3.

? ‍️ ¿Por qué?

• ⛵️ Smooth Vue 3 Estrategia de migración reescribe incrementalmente sus componentes para que sean compatibles con Vue 3!
• ¡Expanda el ecosistema VUE 2 y 3 Toque en el vasto ecosistema VUE 2 de su aplicación Vue 3 y viceversa!

Instalar

npm i vue-2-3

? Configuración rápida

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

   • Usar toVue2 para introducir los componentes Vue 3 con una aplicación Vue 2

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

   • Usar toVue3 para introducir componentes Vue 2 con una aplicación Vue 3

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

2. Intentará resolver automáticamente Vue 2 y 3 a través de especificadores desnudos vue y vue3 , pero si no puede encontrarlos, puede registrarlos manualmente. Solo necesita hacer esto una vez, por lo que se sugiere que se haga en la parte superior de su aplicación.

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

   Para Vue 3, puede proporcionar las exportaciones necesarias createApp y h para mantener las dependencias al mínimo:

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

3. ¡Pase el componente y comience a usarlo!

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