vue 2 3

Vue-2-3

Interopt Vue 2 Components avec les applications Vue 3 et 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 >

Voici une démo Codepen utilisant les composants Vue 2 dans une application Vue 3.

? ‍️ Pourquoi?

• ⛵️ Smooth Vue 3 Migration Strategy Rewrite de manière incrémentielle de vos composants pour être compatible avec Vue 3!
• Développez l'écosystème Vue 2 et 3 Appuyez sur le vaste écosystème Vue 2 de votre application Vue 3 et vice-versa!

Installer

npm i vue-2-3

? Configuration rapide

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

   • Utilisez toVue2 pour interrompre les composants Vue 3 avec une application Vue 2

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

   • Utilisez toVue3 pour interrompre les composants Vue 2 avec une application Vue 3

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

2. Il essaiera automatiquement de résoudre les Vue 2 et 3 via des spécificateurs nus vue et vue3 , mais s'il ne les trouve pas, vous pouvez les enregistrer manuellement. Vous n'avez besoin de le faire qu'une seule fois, donc il est suggéré d'être fait en haut de votre application.

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

   Pour Vue 3, vous pouvez fournir les exportations nécessaires createApp et h pour maintenir les dépendances au minimum:

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

3. Passez le composant et commencez à l'utiliser!

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