Vue 3 support #123
Comments
|
I think you can use it now with composition api. that's no problem |
|
vite throw this error, also no cmd styled entry file found in node_modules |
|
Adding to this - I get the error |
|
I get same error! |
|
I am planning to support vue@3. For now, I am waiting for an official stable release. |
|
Is vue@3 still not supported yet? |
|
I do have plans for better v3 support. For now, I don't want to fix the current |
|
|
Same error:
Why mention "better v3 support" when it literally has 0 support for Vue3? Unless I'm misunderstanding and there is a way to make it work with v3? |
|
Well, according to my logic, anything that is not 0 is better. |
|
I'm using vue 3.0.5. I get this error when I write |
same here, I don't think it has vue3 support I guess. |
|
Any luck V3 not supported vue-konva? |
|
There is the |
its a fork from this repository and not official: vunamhung@2a9abd3 afaik. It provides a fork with the changes from this PR |
How did you get it to work? I tried to create a boot-file but I'm not lucky |
|
@FaultErrorFailure92 I wrote too soon. When I tested I saw a scene rendered and wrote the message. |
This works? im trying to setup in Vite but got the container error message. |
|
It is not official. As I know, it is bases on this #133 PR. But it is far from finished. I wasn't able to pass several critical tests. |
|
Personally, I love to adopt a good solution and help to make a good official version for Vue3. But currently I am not using Vue in any of my projects. So, I need someone who can take this Pull Request and finish it to make sure all tests are passes. All tests are critical. Without checking all of them, the library will be not production-ready. I will be ready to polish everything from the Konva side and prepare the release. |
|
A composition API based approach for Vue3 was merged. There are still two outstanding bugs that are causing test failures though:
Any insight on either error would be super helpful. If you want to test this passes: it('can update component events', async() => {
const wrap = mount({
template: `
<v-stage :config="stage">
<v-layer>
<v-rect ref="rect" :config="{width: 300}" @click="click" />
</v-layer>
</v-stage>
`,
props: ['click'],
data() {
return {
stage: {
width: 300,
height: 400,
},
};
},
}, { propsData: { click: null } }); // INITIALLY NULL
const rect = wrap.vm.$refs.rect.getNode();
expect(rect.eventListeners.click).to.equal(undefined);
const handler = () => {};
await wrap.setProps({ click: handler });
expect(rect.eventListeners.click.length).to.equal(1);
await wrap.setProps({ click: undefined });
expect(rect.eventListeners.click).to.equal(undefined);
});But this fails: it('can update component events', async() => {
const wrap = mount({
template: `
<v-stage :config="stage">
<v-layer>
<v-rect ref="rect" :config="{width: 300}" @click="click" />
</v-layer>
</v-stage>
`,
props: ['click'],
data() {
return {
stage: {
width: 300,
height: 400,
},
};
},
}, { propsData: { click: undefined } }); // INITIALLY UNDEFINED
const rect = wrap.vm.$refs.rect.getNode();
expect(rect.eventListeners.click).to.equal(undefined);
const handler = () => {};
await wrap.setProps({ click: handler });
expect(rect.eventListeners.click.length).to.equal(1);
await wrap.setProps({ click: undefined });
expect(rect.eventListeners.click).to.equal(undefined);
}); |
|
Thanks for the updates from @geoffgscott in #172 I just released I didn't deeply test it by myself yet. Please try it. |
|
Thanks @lavrton, tested it and found a little issue: #172 (comment) |
|
@boboldehampsink can you make a reproducible example? My codesandbox above work on. |
|
@lavrton when I remove
|
|
@lavrton any chance of fixing this? We can't use konva for vue 3 because of this. |
|
I am not certain how to reproduce it. I saw this issue once when I tried to remove |
|
@lavrton I think vue-konva should just allow the use of |
|
There are two issues are still there with Two tests in
Issue in the test number 1 is critical. It will be perfect if someone can take a look into it. I was unable to find a solution. Version 3 for Vue is already the default version. I want to polish |
|
@lavrton Our team needs Vue 3 support and would be willing to invest some time to make it work. If you could provide details on what is left todo, we would set aside some time to help out |
|
@DavidVaness From my experience, it mostly works. But stage events are not working correctly. They double trigger for native DOM event. As a workaround, it is possible to filter them inside event callback. |
|
Great, we will try it and provide feedback. If you need help, let me know |
|
Hello, I am using vue-konva (3.0.0) with Vue (3.2.33) and Vite (2.9.7). It works well in development mode (using The import of vue-konva in the main.ts file generates the problem, even if I don't use the konva plugin in my app (even if I don't call Do you have some advices or vite specific configurations in order to avoid the problem ? |
|
@p-clerc make a minimal repository to reproduce the issue. |
I finally found what was the problem when i was trying to make a minimal project :-) In one of my tsconfig references I was extending It seems that creating a Vue project with vite today, doesn't require this library and configuration. Thanks |
|
Hello @lavrton In fact my problem is more complex, I resolved the problem on my computer but in a docker container it still appears. Here is a little repo with which you can reproduce the problem. As said removing the usage of vue-konva solve the issue but it could come from vite or esbuild. https://github.com/p-clerc/vue3-template Thanks for you help |
|
I am not sure what I can do from |
Thank you @lavrton for your time, in fact I have found another workaround with Vuetify theme customization. I think my problem was not related to konvas but permits to shown the Vuetify bug. As I use aplha/beta versions of Vuetify and there releated vite plugins, this kind of bug could appear. |
|
Good day, @lavrton I'm having this weird issue with shapes moving up or down the array. i'm using vue 3 it was originally written in composition api but I thought that was what causing the bug so i made a small demo using option api but still getting the error. |
|
@daitenshiren I think the issue with your code is that you don't use keys correctly.
Looks like it works ok now: https://codesandbox.io/s/wizardly-resonance-yckfhe |
Thank you. I'm so stupid not noticing that. Awesome. I have been stuck with that issue for days. |
and others
Hi! Is Vue 3 support planned?
The text was updated successfully, but these errors were encountered: