{"record":{"id":"8168f5f893ac9315","repo":"SortableJS/Vue.Draggable","slug":"transition-group-inside-component-is-not-supported","errorCode":null,"errorMessage":"Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}","messagePattern":"Transition-group inside component is not supported\\. Please alter tag value or remove transition-group\\. Current tag value: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/vuedraggable.js","lineNumber":202,"sourceCode":"    if (this.element !== \"div\") {\n      console.warn(\n        \"Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props\"\n      );\n    }\n\n    if (this.options !== undefined) {\n      console.warn(\n        \"Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props\"\n      );\n    }\n  },\n\n  mounted() {\n    this.noneFunctionalComponentMode =\n      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&\n      !this.getIsFunctional();\n    if (this.noneFunctionalComponentMode && this.transitionMode) {\n      throw new Error(\n        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`\n      );\n    }\n    const optionsAdded = {};\n    eventsListened.forEach(elt => {\n      optionsAdded[\"on\" + elt] = delegateAndEmit.call(this, elt);\n    });\n\n    eventsToEmit.forEach(elt => {\n      optionsAdded[\"on\" + elt] = emit.bind(this, elt);\n    });\n\n    const attributes = Object.keys(this.$attrs).reduce((res, key) => {\n      res[camelize(key)] = this.$attrs[key];\n      return res;\n    }, {});\n\n    const options = Object.assign({}, this.options, attributes, optionsAdded, {","sourceCodeStart":184,"sourceCodeEnd":220,"githubUrl":"https://github.com/SortableJS/Vue.Draggable/blob/431db153bfdfe09e31f622f01e9b3220b77e6b56/src/vuedraggable.js#L184-L220","documentation":"vuedraggable throws this in mounted() when it detects 'non-functional component mode' (the rendered root element's node name differs from the tag prop) AND a transition mode is in use. In that mode Sortable cannot properly hook the transition-group internals, so transitions plus a custom tag/component are rejected. You must either remove the transition-group usage or align the tag prop so the component renders a real element.","triggerScenarios":"Using <draggable tag='transition-group'> or a custom component tag whose rendered root differs from getTag() while also enabling transition mode (e.g. passing a <transition-group> as the tag/child in Vue 2 vuedraggable). Example: <draggable tag='my-component' :component-data='{...transition-group props...}'>.","commonSituations":"Migrating lists that animate on reorder; copying Vue 2 transition-group examples but wrapping them in a wrapper component; setting tag to a component name (kebab-case) instead of a plain HTML element so $el.nodeName doesn't match.","solutions":["Set tag to a plain HTML element (e.g. tag='div') and remove the transition-group/component-data transition mode","If you need animations, use tag='transition-group' with :component-data so the root matches the transition-group","Remove the <transition-group> wrapper entirely and animate via CSS on the draggable container","Check getIsFunctional(): make sure you are not wrapping draggable in a component whose $el is a different node than tag"],"exampleFix":"// before\n<draggable tag=\"transition-group\" :component-data=\"{ tag: 'ul', name: 'flip-list' }\">\n  <li v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</li>\n</draggable>\n\n// after (plain element, no transition-group)\n<draggable tag=\"ul\">\n  <li v-for=\"item in list\" :key=\"item.id\">{{ item.name }}</li>\n</draggable>","handlingStrategy":"validation","validationCode":"function assertTransitionCompatible(draggableVm) {\n  if (!draggableVm) return;\n  const tag = String(draggableVm.tag || 'div').toLowerCase();\n  const root = draggableVm.$el && draggableVm.$el.nodeName.toLowerCase();\n  if (tag !== root && !draggableVm.getIsFunctional?.() && draggableVm.transitionMode) {\n    throw new Error(`draggable: tag '${tag}' does not match rendered root '${root}' while using transition-group; use tag='transition-group' or remove transitions`);\n  }\n}","typeGuard":"function isPlainElementTag(tag) {\n  return typeof tag === 'string' && /^[a-z][a-z0-9-]*$/.test(tag) && !['transition-group','transition'].includes(tag);\n}","tryCatchPattern":"// wrap component creation/mount if rendering dynamically\ntry {\n  mountDraggable(props);\n} catch (e) {\n  if (String(e.message).includes('Transition-group inside component is not supported')) {\n    console.error('Fix draggable config: use tag=\"transition-group\" or drop transition-group');\n  } else { throw e; }\n}","preventionTips":["Only use tag=\"transition-group\" when you actually need reorder animations; match component-data tag with the real root","Never set tag to a custom component name when using transition mode","After upgrading vuedraggable, smoke-test lists that animate","Keep the tag prop a plain HTML element unless transitions are required"],"tags":["vue","vuedraggable","transition-group","invalid-configuration"],"backgroundTag":"transition-group-unsupported","analyzedSha":"431db153bfdfe09e31f622f01e9b3220b77e6b56","analyzedAt":"2026-09-02T01:53:03.882Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}