Vue 3 support #123

ewen-lbh · 2020-09-22T15:39:26Z

Hi! Is Vue 3 support planned?

tuannguyenminh2086 · 2020-09-23T03:10:56Z

I think you can use it now with composition api. that's no problem

raphaelsoul · 2020-09-27T05:48:47Z

vite throw this error, also no cmd styled entry file found in node_modules

[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "konva" from "node_modules/vue-konva/umd/vue-konva.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
Error: [vite]: Rollup failed to resolve import "konva" from "node_modules/vue-konva/umd/vue-konva.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
    at Object.onwarn (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/vite/dist/node/build/index.js:70:19)
    at Object.onwarn (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:19393:20)
    at ModuleLoader.handleResolveId (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18268:26)
    at /Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18258:22
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18256:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/raphaelsoul/projects/zuma/wang-weifeng/datashow/v3/node_modules/rollup/dist/shared/rollup.js:18233:9)
    at async Promise.all (index 3) {

Dylan-Chapman · 2020-10-05T17:15:01Z

Adding to this - I get the error Uncaught TypeError: Cannot read property 'component' of undefined (from the line var Stage = (external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a.component('v-stage', {) when trying to use VueKonva both via createApp(App).use(VueKonva).mount("#app") and CDN with Vue 3.

mazoqui · 2020-10-05T18:56:50Z

I get same error!

lavrton · 2020-10-22T15:04:06Z

I am planning to support vue@3. For now, I am waiting for an official stable release.
If someone needs it sooner - feel free to make a fix and make a Pull Request.

OEvgeny · 2020-10-24T12:23:26Z

Hi @lavrton, thank you for the project!

Happy to tell that Vue v3.0.2 is officially released and should be pretty stable after 13 RCs and two minor releases

cylazhm · 2020-12-01T05:13:22Z

Is vue@3 still not supported yet?

lavrton · 2020-12-02T15:54:36Z

I do have plans for better v3 support. For now, I don't want to fix the current vue-konva architecture. I have plans for a major rewrite with function via custom renderer. It should work more efficiently.

cristianvasquez · 2021-01-13T11:54:32Z

I think you can use it now with composition api. that's no problem
hi @tuannguyenminh2086
Do you have any example of Konva using the composition API?

ymebrugts · 2021-03-24T14:49:04Z

Same error:
Uncaught TypeError: Cannot read property 'component' of undefined

I do have plans for better v3 support. For now, I don't want to fix the current vue-konva architecture. I have plans for a major rewrite with function via custom renderer. It should work more efficiently.

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?

lavrton · 2021-03-24T14:51:37Z

Well, according to my logic, anything that is not 0 is better.

Amar-Gill · 2021-03-28T13:46:59Z

I'm using vue 3.0.5. I get this error when I write import VueKonva from 'vue-konva' in main.js:

Uncaught TypeError: external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a is undefined
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
vue-konva.js:304:42
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
    InnerModuleEvaluation self-hosted:2379
    InnerModuleEvaluation self-hosted:2379
    evaluation self-hosted:2330

alew3 · 2021-04-11T14:36:47Z

I'm using vue 3.0.5. I get this error when I write import VueKonva from 'vue-konva' in main.js:

Uncaught TypeError: external_root_Vue_commonjs2_vue_commonjs_vue_amd_vue_default.a is undefined
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
vue-konva.js:304:42
    require_vue_konva vue-konva.js:304
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:111
    __webpack_require__ vue-konva.js:34
    require_vue_konva vue-konva.js:98
    require_vue_konva vue-konva.js:101
    webpackUniversalModuleDefinition vue-konva.js:7
    require_vue_konva vue-konva.js:14
    __commonJS chunk-LV3Z5TDC.js:7
    <anonymous> vue-konva:1
    InnerModuleEvaluation self-hosted:2379
    InnerModuleEvaluation self-hosted:2379
    evaluation self-hosted:2330

same here, I don't think it has vue3 support I guess.

myoneflag · 2021-07-07T13:02:50Z

Any luck V3 not supported vue-konva?
Got the same error.

rtbo · 2021-07-29T10:15:48Z

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

piscis · 2021-08-20T10:31:58Z

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

its a fork from this repository and not official: vunamhung@2a9abd3 afaik. It provides a fork with the changes from this PR
https://github.com/konvajs/vue-konva/pull/133/files

FaultErrorFailure92 · 2021-09-10T16:48:37Z

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

How did you get it to work?

I tried to create a boot-file but I'm not lucky

import { boot } from 'quasar/wrappers'
import VueKonva from 'vue3-konva';

app.use(VueKonva);
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default ({ /* app, router, store */ }) => {
  return new Promise((resolve, reject) => {
    // do something

  })
}

rtbo · 2021-09-13T09:37:44Z

@FaultErrorFailure92 I wrote too soon. When I tested I saw a scene rendered and wrote the message.
May have been due to dev-server cache or whatever. Sorry for confusion.
I have switched my code to render dynamic SVG. This works very well with Vue and is more than enough for my need.

dcruz1990 · 2021-10-12T14:36:52Z

There is the vue3-konva npm package. I don't know if it is an official konvajs package or a fork, but it seems to work for me with vue-3.0.5

This works? im trying to setup in Vite but got the container error message.

lavrton · 2021-10-12T14:39:12Z

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.

lavrton · 2021-10-12T14:44:06Z

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.

geoffgscott · 2021-11-05T14:58:30Z

A composition API based approach for Vue3 was merged. There are still two outstanding bugs that are causing test failures though:

Conditional layers (v-if/v-for) causes the Vue internals bug. This is a hard one to debug but only occurs with layers not with nested conditionals (v-if on a shape inside a layer).
Reactive event handlers. With the move to Vue 3.1 and up something there is a quirk with Vue-Konva reactivity where you can't add a listener dynamically if it was undefined to begin with. Weirdly null works so if you need to change the listener on a shape dynamically I recommend defining it as null or () => null and then reactivity should work as expected.

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);
  });

lavrton · 2021-11-05T15:02:25Z

Thanks for the updates from @geoffgscott in #172 I just released [email protected]. It should support vue@3. I don't think it will work with vue@2.

I didn't deeply test it by myself yet. Please try it.
Demo: https://codesandbox.io/s/vue-konva-with-vue-3-88o9o

boboldehampsink · 2021-12-21T07:18:57Z

Thanks @lavrton, tested it and found a little issue: #172 (comment)

lavrton · 2021-12-21T18:45:47Z

@boboldehampsink can you make a reproducible example? My codesandbox above work on.

boboldehampsink · 2021-12-22T07:06:10Z

@lavrton when I remove ref="layer" from v-layer in your example I see the error:

boboldehampsink · 2022-01-12T06:39:16Z

@lavrton any chance of fixing this? We can't use konva for vue 3 because of this.

lavrton · 2022-01-12T18:25:29Z

I am not certain how to reproduce it. I saw this issue once when I tried to remove ref="layer" from my example above. But it was gone when I reload, so I guess it was related to hot reload.

boboldehampsink · 2022-01-13T07:11:30Z

@lavrton I think vue-konva should just allow the use of <template> tags, as they do not render html anyway. It would fix this issue.

boboldehampsink · 2022-02-15T14:26:23Z

@lavrton I provided a fix in #185

lavrton · 2022-03-21T16:26:24Z

There are two issues are still there with vue-konva for vue@3.

Two tests in index.test.js

no DOM events
checking for loop order in layers

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.
The root of the issue that is <v-stage /> component is attaching all passed event listeners into DOM <div /> container. But we don't need that. We need to attached them only to Konva.Stage instance.

Version 3 for Vue is already the default version. I want to polish vue-konva for it ASAP. Any help is very welcome!

DavidVaness · 2022-03-30T12:35:50Z

@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

lavrton · 2022-03-30T17:08:33Z

@DavidVaness vue-konva@3 with vue@3 support is already published. Try it. How does it work for you?

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.

DavidVaness · 2022-03-30T17:43:26Z

Great, we will try it and provide feedback. If you need help, let me know

ghost · 2022-05-03T12:15:39Z

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 vite command), but in production (after vite build) the css of my application is completely broken. I have no error in the browser console, nor during the build process.

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 app.use(VueKonva)).

Do you have some advices or vite specific configurations in order to avoid the problem ?
Or is it preferable to compile my application using vue-konva with webpack and vue-cli ?

lavrton · 2022-05-03T13:24:18Z

@p-clerc make a minimal repository to reproduce the issue.

ghost · 2022-05-04T12:59:34Z

@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 "extends": "@vue/tsconfig/tsconfig.web.json"and this caused the problem at build. Honestly this configuration was automatically done when I have created my project with vite some time ago.

It seems that creating a Vue project with vite today, doesn't require this library and configuration.

Thanks

ghost · 2022-05-06T09:45:47Z

Hello @lavrton

In fact my problem is more complex, I resolved the problem on my computer but in a docker container it still appears.
I do not master well vite and esbuild, but it seems that the build environment has a effect on the CSS result.

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

lavrton · 2022-05-06T15:53:16Z

I am not sure what I can do from vue-konva side. The repo works ok for me locally (without docker). And I don't want to fight with docker.

ghost · 2022-05-09T12:04:24Z

I am not sure what I can do from vue-konva side. The repo works ok for me locally (without docker). And I don't want to fight with docker.

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.

daitenshiren · 2022-10-17T10:14:41Z

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.
to elaborate the vue array is updated but the layer.node is not. as seen in the console.log.
I'm wondering if you can take a look at it. I have created a small demo. https://codesandbox.io/s/crazy-maria-l6rd11?file=/src/App.vue

lavrton · 2022-10-17T21:06:39Z

@daitenshiren I think the issue with your code is that you don't use keys correctly.
I changed it a bit into:

<v-group v-for="(item, i) in stage.elements" :key="item.config.id">

Looks like it works ok now: https://codesandbox.io/s/wizardly-resonance-yckfhe

daitenshiren · 2022-10-17T21:16:28Z

@daitenshiren I think the issue with your code is that you don't use keys correctly. I changed it a bit into:

<v-group v-for="(item, i) in stage.elements" :key="item.config.id">

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.

Botz mentioned this issue Dec 23, 2020

Feature/vue3 #133

Closed

boboldehampsink mentioned this issue Jan 27, 2022

Render container as konva container instead of template #185

Open

lavrton closed this as completed Aug 11, 2024

Vue 3 support #123

Vue 3 support #123

Comments

ewen-lbh commented Sep 22, 2020

tuannguyenminh2086 commented Sep 23, 2020

raphaelsoul commented Sep 27, 2020

Dylan-Chapman commented Oct 5, 2020

mazoqui commented Oct 5, 2020

lavrton commented Oct 22, 2020

OEvgeny commented Oct 24, 2020

cylazhm commented Dec 1, 2020

lavrton commented Dec 2, 2020

cristianvasquez commented Jan 13, 2021

ymebrugts commented Mar 24, 2021 • edited Loading

lavrton commented Mar 24, 2021

Amar-Gill commented Mar 28, 2021 • edited Loading

alew3 commented Apr 11, 2021

myoneflag commented Jul 7, 2021

rtbo commented Jul 29, 2021

piscis commented Aug 20, 2021 • edited Loading

FaultErrorFailure92 commented Sep 10, 2021 • edited Loading

rtbo commented Sep 13, 2021

dcruz1990 commented Oct 12, 2021 • edited Loading

lavrton commented Oct 12, 2021

lavrton commented Oct 12, 2021

geoffgscott commented Nov 5, 2021 • edited Loading

lavrton commented Nov 5, 2021 • edited Loading

boboldehampsink commented Dec 21, 2021

lavrton commented Dec 21, 2021

boboldehampsink commented Dec 22, 2021

boboldehampsink commented Jan 12, 2022

lavrton commented Jan 12, 2022

boboldehampsink commented Jan 13, 2022

boboldehampsink commented Feb 15, 2022

lavrton commented Mar 21, 2022

DavidVaness commented Mar 30, 2022 • edited Loading

lavrton commented Mar 30, 2022

DavidVaness commented Mar 30, 2022

ghost commented May 3, 2022

lavrton commented May 3, 2022

ghost commented May 4, 2022

ghost commented May 6, 2022

lavrton commented May 6, 2022

ghost commented May 9, 2022

daitenshiren commented Oct 17, 2022 • edited Loading

lavrton commented Oct 17, 2022

daitenshiren commented Oct 17, 2022

ymebrugts commented Mar 24, 2021 •

edited

Loading

Amar-Gill commented Mar 28, 2021 •

edited

Loading

piscis commented Aug 20, 2021 •

edited

Loading

FaultErrorFailure92 commented Sep 10, 2021 •

edited

Loading

dcruz1990 commented Oct 12, 2021 •

edited

Loading

geoffgscott commented Nov 5, 2021 •

edited

Loading

lavrton commented Nov 5, 2021 •

edited

Loading

DavidVaness commented Mar 30, 2022 •

edited

Loading

daitenshiren commented Oct 17, 2022 •

edited

Loading