All Projects → privatenumber → Vue 2 3

privatenumber / Vue 2 3

Licence: mit
↔️ Interop Vue 2 components in Vue 3 apps and vice versa

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue 2 3

bpit-vue
vue effects component package 🚀
Stars: ✭ 16 (-93.07%)
Mutual labels:  components, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+9.52%)
Mutual labels:  components, vue2
Vx Ui
vue components 移动端UI组件库
Stars: ✭ 194 (-16.02%)
Mutual labels:  components, vue2
glue
Glue是一个基于web component构建的组件库,可以在react,vue2,vue3,angular和html等前端框架中运行
Stars: ✭ 63 (-72.73%)
Mutual labels:  components, vue2
Vux
Mobile UI Components based on Vue & WeUI
Stars: ✭ 17,573 (+7507.36%)
Mutual labels:  components, vue2
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+295.67%)
Mutual labels:  components, vue2
Vue Impression
A Vue.js 2.0 UI elements for mobile.
Stars: ✭ 205 (-11.26%)
Mutual labels:  components, vue2
Imitate One
用vue+webpack + node仿制的One[一个 ]app
Stars: ✭ 216 (-6.49%)
Mutual labels:  vue2
Bower Components
[DEPRECATED] Site to discover Bower components
Stars: ✭ 220 (-4.76%)
Mutual labels:  components
Amaze Vue
一只基于amazeui样式封装的vue组件库。万水千山总是情,点个star再走行不行~~~
Stars: ✭ 211 (-8.66%)
Mutual labels:  vue2
Svelte Component Template
A base for building shareable Svelte 3 components
Stars: ✭ 208 (-9.96%)
Mutual labels:  components
Vue Axios
封装axios
Stars: ✭ 215 (-6.93%)
Mutual labels:  vue2
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-3.46%)
Mutual labels:  vue2
Bilibili Vue
前端vue+后端koa,全栈式开发bilibili首页
Stars: ✭ 2,590 (+1021.21%)
Mutual labels:  vue2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (-2.16%)
Mutual labels:  vue2
V Selectpage
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports
Stars: ✭ 211 (-8.66%)
Mutual labels:  vue2
Saltui
Stars: ✭ 229 (-0.87%)
Mutual labels:  components
React Kawaii
Cute SVG React Components
Stars: ✭ 2,709 (+1072.73%)
Mutual labels:  components
Vuex Feature Scoped Structure
📈 Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind
Stars: ✭ 218 (-5.63%)
Mutual labels:  vue2
Vue Emoji Picker
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
Stars: ✭ 218 (-5.63%)
Mutual labels:  vue2

vue-2-3 Latest version Install size

Interop Vue 2 components with Vue 3 apps and 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>

Here's a CodePen demo using Vue 2 components in a Vue 3 app.

🙋‍♂️ Why?

  • ⛵️ Smooth Vue 3 migration strategy Incrementally rewrite your components to be Vue 3 compatible!
  • 🔥 Expand Vue 2 and 3 ecosystem Tap into the vast Vue 2 ecosystem from your Vue 3 app and vice-versa!

🚀 Install

npm i vue-2-3

🚦 Quick Setup

  1. Import vue-2-3/to-vue-2 or vue-2-3/to-vue-3.

    • Use toVue2 to interop Vue 3 components with a Vue 2 app

      import toVue2 from 'vue-2-3/to-vue-2';
      
    • Use toVue3 to interop Vue 2 components with a Vue 3 app

      import toVue3 from 'vue-2-3/to-vue-3';
      
  2. It will automatically try to resolve Vue 2 & 3 via bare specifiers vue and vue3 but if it can't find them, you can manually register them. You only need to do this once so it's suggested to be done at the top of your app.

    import Vue2 from 'vue2';
    import * as Vue3 from '[email protected]';
    
    toVue2.register(Vue2, Vue3);
    

    For Vue 3, you can provide the necessary exports createApp and h to keep dependencies to a minimum:

    import { createApp, h } from '[email protected]';
    
    toVue2.register({ createApp, h });
    
  3. Pass the component in and start using it!

    import SomeVue2Component from './some-vue2-component';
    
    export default {
        components: {
            SomeVue2Component: toVue3(SomeVue2Component)
        }
    }
    
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].