After modifying the bundling tool from webpack to vite in vue2, the dragging and resizing functions of vue-grid-layout do not work

Author: Park-min-hyoungCreated Mar 19, 2024Updated Feb 20, 2025

As the title suggests, dragging and resizing worked normally in the webpack environment, but after migrating to Vite, these two functions do not work. I would appreciate it if you could let me know the solution.

package veresion

"vue": "2.7.0" "vue-grid-layout": "^2.3.7" "vite": "^3.2.8"

Code

// vite.config.js

javascript
  /**
   * @description Plugin
   */
  const generatePlugins = () => {
    const vitePluginSvgSpritemap = () => {
      const include = path.join(__dirname, './src/icons/svg/*.svg')
      console.log('SVG_PATH : ', include)
      return createSvgSpritePlugin({
        include,
        symbolId: 'icon-[name]'
      })
    }

    return [
      vue(),
      vueJsx(),
      vitePluginSvgSpritemap(),
      svgLoader(),
      eslint({
        exclude: ['/virtual:/**', 'node_modules/**']
      })
    ]
  }

  return defineConfig({
    server,
    resolve,
    esbuild: {
      loader: 'jsx'
    },
    plugins: generatePlugins()
  })

// Where to use vue-grid-layout

xml
    <grid-layout
      :layout.sync="dashboardTemplate.content"
      :col-num="12"
      :row-height="10"
      :is-draggable="isEditMode"
      :is-resizable="isEditMode"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
      class="grid-layout"
    >
      <grid-item
        v-for="item in dashboardTemplate.content"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :min-w="dashboardConfig.gridItemMinW"
        :min-h="dashboardConfig.gridItemMinH"
        class="grid-item"
        @resized="resizedGridItem"
      >
        <span
          @mouseover="item.editVisible = true"
          @mouseleave="
            item.editVisible = false
            deleteConfirmVisible = false
          "
        >
          componets...
        </span>
    </grid-layout>

The class name is updated when an event occurs.

not event 기본

Dragging 드래깅

Resizing 리사이징

Source: jbaysolutions/vue-grid-layout