vue-konva Vue 3 support

Hi! Is Vue 3 support planned?

Sep 22 '20 15:09 ewen-lbh

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

Sep 23 '20 03:09 tuannguyenminh2086

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

Sep 27 '20 05:09 raphaelsoul

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.

Oct 05 '20 17:10 Dylan-Chapman

I get same error!

Oct 05 '20 18:10 mazoqui

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.

Oct 22 '20 15:10 lavrton

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

Oct 24 '20 12:10 OEvgeny

Is vue@3 still not supported yet?

Dec 01 '20 05:12 cylazhm

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.

Dec 02 '20 15:12 lavrton

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?

Jan 13 '21 11:01 cristianvasquez

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?

Mar 24 '21 14:03 ymebrugts

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

Mar 24 '21 14:03 lavrton

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

Mar 28 '21 13:03 Amar-Gill

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.

Apr 11 '21 14:04 alew3

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

Jul 07 '21 13:07 myoneflag

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

Jul 29 '21 10:07 rtbo

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: https://github.com/vunamhung/vue-konva/commit/2a9abd39844a46d7e1af8dc2d5275eecbce077c0 afaik. It provides a fork with the changes from this PR https://github.com/konvajs/vue-konva/pull/133/files

Aug 20 '21 10:08 piscis

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

  })
}

Sep 10 '21 16:09 FaultErrorFailure92

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

Sep 13 '21 09:09 rtbo

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.

Oct 12 '21 14:10 dcruz1990

It is not official. As I know, it is bases on this https://github.com/konvajs/vue-konva/pull/133 PR. But it is far from finished. I wasn't able to pass several critical tests.

Oct 12 '21 14:10 lavrton

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.

Oct 12 '21 14:10 lavrton

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

Nov 05 '21 14:11 geoffgscott

Thanks for the updates from @geoffgscott in https://github.com/konvajs/vue-konva/pull/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

Nov 05 '21 15:11 lavrton

Thanks @lavrton, tested it and found a little issue: https://github.com/konvajs/vue-konva/pull/172#issuecomment-996565543

Dec 21 '21 07:12 boboldehampsink

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

Dec 21 '21 18:12 lavrton

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

Dec 22 '21 07:12 boboldehampsink

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

Jan 12 '22 06:01 boboldehampsink

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.

Jan 12 '22 18:01 lavrton

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

Jan 13 '22 07:01 boboldehampsink

@lavrton I provided a fix in #185

Feb 15 '22 14:02 boboldehampsink

vue-konva vue-konva copied to clipboard

Vue 3 support

vue-konva
vue-konva copied to clipboard