privatenumber / vue-2-3 Goto Github PK

View Code? Open in Web Editor NEW

282.0 10.0 10.0 193 KB

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

License: MIT License

JavaScript 100.00%

vue vue2 vue3 interop components

vue-2-3's People

Contributors

Stargazers

Watchers

Forkers

danieltadresu huyanyawei nuochong potato4d iknowmagic i-www 00mjk wwt1995 94mashiro bluepeople1

vue-2-3's Issues

Error in render: "TypeError: Cannot read property '1' of undefined"

vue2 components

<template>
  <div>
    <button @click="test()">
      Open full screen modal! (With teleport!)
    </button>
  </div>
</template>

vue3 use

import toVue3 from 'vue-2-3/to-vue-3';
import Vue2 from 'vue2';
import * as Vue3 from 'vue';

toVue3.register(Vue2, Vue3);
import HelloWorld from '../../../vue-test-2/src/components/HelloWorld'
let hello = toVue3(HelloWorld)
export default {
  name: 'Home',
  components: {
    HelloWorld:hello
  }
}

dom

error

version
win10 x64
vue@^3.0.2
vue@^2.6.12

$slots is not found

while I use toVue3 to convert my vue2 components, I can't get this.$slots as normal

How would one use this to support a published Vue 2 component?

So we have a published component before, and we do this to publish

vue-cli-service build --target lib --dest dist/lib --name VueComponentName 'src/components/VueComponentName.vue'

Our main.js file is like this:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Just a default main.js file.

Where's the best place to interop the component so when users install it in their Vue 3 app, it will just work without doing interop themselves?

What I mean is they don't have to install vue-2-3 and do themselves this:

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

export default {
    components: {
        VueComponentName: toVue3(VueComponentName)
    }
}

Thank you.

Error in mounted hook: "TypeError: selfHook.bind is not a function"

<template>
  <div class="home">
    <hello-world></hello-world>
  </div>
</template>

<script>
import toVue2 from 'vue-2-3/src/to-vue-2';
import Vue2 from 'vue2/dist/vue.esm.browser.js';
import * as Vue3 from 'vue3/dist/vue.esm-browser.js';
toVue2.register(Vue2,Vue3);
import HelloWorld from '../../../vue-test-3/src/components/HelloWorld'
let hello = toVue2(HelloWorld)

export default {
  name: 'Home',
  components: {
    HelloWorld:hello
  }
}
</script>

vue3 components

<script>
import { h } from 'vue3';
export default {
  name: 'HelloWorld',
  props: {
    // msg: String,
  },
  data() {
    return {
      modalOpen: false,
    };
  },
  render() {
    return h(
      'div',
      {
        id: 'hello',
      },
      [h('span', 'world')]
    );
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  mounted() {
    console.log('mounted');
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

version
win10 x64
vue@^3.0.2
vue@^2.6.12

vue-2-3/src/to-vue-2
about fragment

const root = this.v3app.mount(vue3ProxyNode($el));

vue3
about fragment

function callSyncHook(name, type, options, instance, globalMixins) {
    callHookFromMixins(name, type, globalMixins, instance);
    const { extends: base, mixins } = options;
    if (base) {
        callHookFromExtends(name, type, base, instance);
    }
    if (mixins) {
        callHookFromMixins(name, type, mixins, instance);
    }
    const selfHook = options[name];
    if (selfHook) {
        callWithAsyncErrorHandling(selfHook.bind(instance.proxy), instance, type);
    }
}

is Support vite?

in vite

import xxx from 'moduleComponent'

Component

moduleComponent

import C1 from './inner/C1'
import C2 from './inner/C2'
import C3 from './inner/C3'

The component path needs to be add extension changed to import C1 from './inner/C1.vue'

It is currently reporting a path not found

Uncaught TypeError: t is not a constructor

Hello, I did what the doc said but error occured. (Using in Vue-Cli)

Uncaught TypeError: t is not a constructor
    at Proxy.mounted (to-vue-3.js)

Here is the minimal reproducible demo:
https://codesandbox.io/s/vigilant-leakey-u00rf?file=/src/App.vue

In Vite either:

Uncaught Error: Vue 2 & 3 were not resolved with bare specifiers "vue" & "vue3". Register them with toVue3.register(Vue2, Vue3)
    at d (to-vue-3.js:1)

Access global injected props In from Vue 2 to Vue 3

i want to convert vue 2 to vue 3 app
Does it support injected prop to global Vue instance?
For example this.$dlg or this.$toast and so on...
If yes , how to access ?

feat: global component registration

when I use the component like this

// app.vue
<mp-block>
  <Test />
</mp-block>

// test.vue
<template>
  <mp-button>111</mp-button>
</template>

it didn't show normal and has warning that Failed to resolve component: mp-button , while I try to console.log(this) in test.vue, it show that it didn't register any components

while I try console.log(app) in main.js , it seems normal, what happen???

Mixins are invalid

vue2 mixins
test.js

export default {
  name: 'Test',
  components: {},
  data() {
    return {
      unit: 'testUnit'
    }
  },
  beforeDestroy() {
    console.log('vue2-beforeDestroy-mi')
  },
  destroyed() {
    console.log('vue2-destroyed-mi')
  },
  methods: {
    test() {
      console.log('testUnit')
    }
  }
}

vue2 components

<script>
import test from '@/mixins/test'
export default {
  name: 'HelloWorld',
  mixins:[test],
  props: {
    // msg: String,
  },
  render: (h) => {
    return h('div',{
      props: {
        value: '222',
      }, 
      style: {
        width: '100%',
      }, 
      on: {
        click: () => {
          console.log('click');
        },
      },
    },'This is  render examples', );
  },
  data() {
    return {
      modalOpen: false,
    };
  },
  beforeDestroy() {
    console.log('vue2-beforeDestroy')
  },
  destroyed() {
    console.log('vue2-destroyed')
  },
  mounted() {
    console.log('mounted', this);
  },
  methods: {
    test() {
      console.log('test');
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

vue3 use

<template>
  <div class="home">
    <hello-world></hello-world>
  </div>
</template>

<script>
import toVue3 from 'vue-2-3/to-vue-3';
import Vue2 from 'vue2';
import * as Vue3 from 'vue/dist/vue.esm-bundler.js';
toVue3.register(Vue2, Vue3);
import HelloWorld from '../../../vue-test-2/src/components/HelloWorld'
let hello = toVue3(HelloWorld)
export default {
  name: 'Home',
  components: {
    HelloWorld:hello,
  },
  methods: {},
};
</script>

The interface exposed by defineExpose cannot be accessed in vue2

i have a vue2 propject， use vue3 components in vue2， but Vue3 components that use Setup are exposed via defineExpose and are not in the converted component

Scoped Slots from Vue2 Component cant be used in a Vue3 App

Hi,

i've tried to use a Vue2 Component with scoped slots in a Vue3 App but it seems like it isn't working.

Exception: vue:1906 TypeError: Cannot destructure property 'anumber' of 'undefined' as it is undefined.

Example:
https://codepen.io/JRambo90/pen/YzZBJRo