Default behavior in Nuxt 3 and Fabric 6x not happening

[rasensio]

I integrated Fabric with Nuxt 3 in my app and there is no way I can:

1. resize objects
2. edit text with a double click.

For example, to edit text in IText or Textbox I need to do something like this

  function addText(fontFamily: string) {
    if (!canvasRef.value) return
    const text = new fabric.IText('New Text', {
      fontFamily,
      left: 50,
      top: 50,
    })
    text.on('mousedblclick', () => {
      text.enterEditing()
    })
    canvasRef.value.add(text)
    canvasRef.value.setActiveObject(text)
    canvasRef.value.renderAll()
  }

I tried with v5 and the behavior is the same. I tried with plain HTML and it works. My app is SSR = false so, I don't run into server vs client issues.

Have you seen this behavior before ?

[asturur]

I never used Nuxt 3
I read is based on VUE, so i suggest you to look at other VUE issues.
There is something with proxies and you have to mark your fabric code as 'raw' or something like that.
I don't use VUE in my every day work and i won't for a while unless i hit a job that requires VUE. So i do not really know.

[zhe-he]

Use shallowRef instead of ref to create the canvas.

// vue3
import { shallowRef, ref } from 'vue';
const canvasRef = shallowRef(null);
// const canvasRef = ref(null);

If it's Vue 2, you need to create a global variable instead of binding it in the data

[asturur]

ty @zhe-he