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
/**
* @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
<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