It's not working with Vue3

[manojvkt]

It's not working with Vue3

[vad1ym]

Just import the component directly

import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'

And default styles (if needed)

import 'vue-draggable-resizable/src/components/vue-draggable-resizable.css'

[vad1ym]

You can even create middleware to adapt plugin for vue 3

For example, create ./libs/vue-draggable-resizable.js with code:

import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
import 'vue-draggable-resizable/src/components/vue-draggable-resizable.css'

export default {
  install: (app, options) => {
    app.component("vue-draggable-resizable", VueDraggableResizable);
  },
};

Then import it and use

import VueDragableResizable from './libs/vue-draggable-resizable'

const app = Vue.createApp({
  /* options */
})

app.use(VueDragableResizable)

[mauricius]

Thank you @kidaww!

To be honest I haven't been able to take a look at Vue 3 yet. Unfortunately nowadays my time is split between backend work and a little of React, therefore I'm afraid that this library will never see a pure Vue 3 implementation, unless provided by someone else (looks like that there are already a few projects out there).

[seyfer]

@vad1ym I have tried your approach, and I have this error

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')

even with Vue 3 v3 branch installed made by @alireza0sfr it doesn't work for me

In my code, direct import doesn't work

import VueDraggableResizable from "vue-draggable-resizable";

probably because there is no v3 tag, I had to install the branch directly with yarn.

yarn add https://github.com/mauricius/vue-draggable-resizable.git#v3

And then I have this plugin

import { App } from "vue";
import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
// // @ts-ignore
// import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/src/components/vue-draggable-resizable.css";

export default {
  install: (app: App, options = {}) => {
    // app.use(VueDraggableResizable, { ...options });
    app.component("vue-draggable-resizable", VueDraggableResizable);
  },
};

And when I try to add a rectangle, it fails

runtime-core.esm-bundler.js:2808 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (runtime-core.esm-bundler.js:2808:1)
    at eval (vue-draggable-resizable.vue:22:1)
    at renderList (runtime-core.esm-bundler.js:2755:1)
    at Proxy.render (vue-draggable-resizable.vue:14:1)

[seyfer]

It happens there in the runtime.cjs.js file

function renderSlot(slots, name, props = {}, fallback, noSlotted) {
  if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
    if (name !== "default")
      props.name = name;
    return createVNode("slot", props, fallback && fallback());
  }

and my code is the following

<template>
  <div class="draw-rectangle h-full">
    <vue-draggable-resizable
      v-for="(rect, index) in rectangles"
      :key="index"
      :class="'rectangle-' + index"
      :x="rect.x"
      :y="rect.y"
      :w="rect.w"
      :h="rect.h"
      :parent="true"
      :z="rect.z"
      @resizing="updateRectangleSize(index, $event)"
      @dragging="updateRectanglePosition(index, $event)"
    >
      <button @click="removeRectangle(index)">x</button>
    </vue-draggable-resizable>

    <button @click="addRectangle">Add Rectangle</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

interface ZoneRectangle {
  x: number;
  y: number;
  w: number;
  h: number;
  z: number;
}

export default defineComponent({
  setup() {
    const rectangles = ref<ZoneRectangle[]>([]);

    const addRectangle = () => {
      rectangles.value.push({
        x: 0,
        y: 0,
        w: 100,
        h: 100,
        z: rectangles.value.length,
      });
    };

[seyfer]

Alright, it was being to Vue instance was duplicated in VueDraggableResizable and in my Vue app.

Solved by adding these lines to vue.config.js

  chainWebpack(config) {
    config.resolve.symlinks(false);
    config.resolve.alias.set("vue", path.resolve("./node_modules/vue"));
  },

see vuejs/core#4344 (comment)