vue 2 3

VUE-2-3

Interop Vue 2 Компоненты с приложениями Vue 3 и наоборот!

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

Вот демонстрация Codepen с использованием компонентов Vue 2 в приложении Vue 3.

? ‍♂️ почему?

• ⛵ Smooth Vue 3 Стратегия миграции постепенно переписывает ваши компоненты, чтобы быть совместимыми с Vue 3!
• Разверните экосистему Vue 2 и 3, нажмите на обширную экосистему Vue 2 из вашего приложения Vue 3 и наоборот!

Установить

npm i vue-2-3

? Быстрая настройка

1. Импортируйте vue-2-3/to-vue-2 или vue-2-3/to-vue-3 .

   • Используйте toVue2 для взаимодействия компонентов Vue 3 с приложением Vue 2

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

   • Используйте toVue3 для взаимодействия компонентов Vue 2 с приложением Vue 3

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

2. Он автоматически попытается разрешить Vue 2 & 3 через Bare Specifiers vue и vue3 но если он не сможет их найти, вы можете вручную зарегистрировать их. Вам нужно сделать это только один раз, чтобы это было сделано на вершине вашего приложения.

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

   Для VUE 3 вы можете предоставить необходимый экспорт createApp и h чтобы свести к минимуму зависимости:

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

3. Пропустите компонент и начните использовать его!

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