Merge pull request #3411 from adumesny/master

(vue) drag-in widget id fix

Author: adumesny

doc/CHANGES.md

@@ -159,7 +159,7 @@ Change log
 [title_drag.html](https://gridstackjs.com/demo/title_drag.html).
 * fix: [#3188](https://github.com/gridstack/gridstack.js/issues/3188) release the global touch latch when a widget is destroyed mid-touch
 * fix: [#2953](https://github.com/gridstack/gridstack.js/issues/2953) API update() honors maxRow like dragging does
-* fix: [#2976](https://github.com/gridstack/gridstack.js/issues/2976) (react): render a drag-in widget that has a component but no id
+* fix: [#2976](https://github.com/gridstack/gridstack.js/issues/2976) (react, vue): render a drag-in widget that has a component but no id
 * fix: [#2703](https://github.com/gridstack/gridstack.js/issues/2703) allow dragging from elements nested inside a button/input handle
 
 ## 13.3.0 (2026-09-11)

vue/projects/lib/gridstack-vue.test.ts

@@ -82,6 +82,38 @@ describe('GridStack Vue wrapper', () => {
     expect(document.querySelector('[data-testid="portal"]')?.textContent).toBe('hello')
   })
 
+  it('renders a drag-in widget that has a component but no id (#2976)', async () => {
+    const T = defineComponent({
+      props: { label: { type: String, default: '' } },
+      setup(props) {
+        return () => h('span', { 'data-testid': 'portal' }, props.label)
+      },
+    })
+
+    const Root = defineComponent({
+      setup() {
+        const options = {
+          column: 12, cellHeight: 50, margin: 0,
+          children: [],
+        }
+        return () =>
+          h(GridStack, { options, components: { T } })
+      },
+    })
+
+    ;({ app, container } = mountApp(Root))
+    await flush()
+
+    const gridEl = container.querySelector('.grid-stack') as GridHTMLElement
+    const grid = gridEl.gridstack!
+
+    // drag-in nodes don't have ids, only the spec they carry.
+    grid.addWidget({ x: 0, y: 0, w: 2, h: 2, component: 'T', props: { label: 'hello' } })
+    await flush()
+
+    expect(document.querySelector('[data-testid="portal"]')?.textContent).toBe('hello')
+  })
+
   it('save() merges useWidgetSerializer into widget props', async () => {
     const Num = defineComponent({
       props: { start: { type: Number, default: 0 } },

vue/projects/lib/src/registry.ts

@@ -10,6 +10,9 @@ import type {
   GridStackWidget,
 } from './types'
 
+/** @internal minted ids for widgets that arrive without one (sidebar drag-in) - see gsCreateVueComponents */
+let syntheticIdSeq = 0
+
 export function installGridStackVueCallbacks(): void {
   if (!GridStack.addRemoveCB) {
     GridStack.addRemoveCB = gsCreateVueComponents
@@ -60,6 +63,12 @@ export function gsCreateVueComponents(
     const el = Utils.createDiv(itemClasses) as GridItemHTMLElement
     Utils.createDiv(['grid-stack-item-content'], el)
 
+    // Widgets dropped in from a sidebar (GridStack.setupDragIn) carry no id - the same spec is
+    // dropped over and over, so it can't have one - yet the portal that renders `component` is
+    // keyed by id. Without one we used to silently skip rendering and leave an empty item (#2976).
+    // `w` is the object GS turns into the node, so writing it back sticks for save()/updateCB too.
+    if (!w.id && w.component) w.id = `gs-vue-${++syntheticIdSeq}`
+
     const id = w.id
     if (id) {
       el._gridItemRef = { id, gridComp: gridHost }