vue 2 3

VUE-2-3

Interop Vue 2 Komponenten mit Vue 3 -Apps und umgekehrt!

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

Hier ist eine Codepen -Demo mit Vue 2 -Komponenten in einer Vue 3 -App.

? ‍Eitung Warum?

• ⛵️ Smooth Vue 3 Migrationsstrategie schreiben Ihre Komponenten inkrementell um, um Vue 3 kompatibel zu sein!
• Erweitern Sie das Ökosystem Vue 2 und 3 in das riesige Vue 2-Ökosystem aus Ihrer Vue 3-App und umgekehrt!

Installieren

npm i vue-2-3

? Schnelles Setup

1. Importieren Sie vue-2-3/to-vue-2 oder vue-2-3/to-vue-3 .

   • Verwenden Sie toVue2 , um Vue 3 -Komponenten mit einer Vue 2 -App zu interoperieren

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

   • Verwenden Sie toVue3 , um Vue 2 -Komponenten mit einer Vue 3 -App zu interoperieren

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

2. Es wird automatisch versucht, Vue 2 und 3 über Bleee -Specifer vue und vue3 zu beheben, aber wenn es nicht finden kann, können Sie sie manuell registrieren. Sie müssen dies nur einmal tun, damit es vorgeschlagen wird, oben in Ihrer App zu erfolgen.

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

   Für Vue 3 können Sie die erforderlichen Exporte createApp und h bereitstellen, um Abhängigkeiten auf ein Minimum zu halten:

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

3. Geben Sie die Komponente ein und verwenden Sie sie!

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