SortableJS/Vue.Draggable · warning

Element props is deprecated please use tag props instead. Se

Error message

Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props

What it means

This is a deprecation warning (console.warn, not a throw) emitted in created(): the `element` prop was renamed to `tag` in vuedraggable 2.x/3.x. The library still honors `element` for backwards compatibility but tells you to migrate. It fires whenever `element` is set to anything other than the default 'div'.

Source

Thrown at src/vuedraggable.js:185

      slots,
      this.$slots,
      this.$scopedSlots
    );
    this.headerOffset = headerOffset;
    this.footerOffset = footerOffset;
    const attributes = getComponentAttributes(this.$attrs, this.componentData);
    return h(this.getTag(), attributes, children);
  },

  created() {
    if (this.list !== null && this.value !== null) {
      console.error(
        "Value and list props are mutually exclusive! Please set one or another."
      );
    }

    if (this.element !== "div") {
      console.warn(
        "Element props is deprecated please use tag props instead. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#element-props"
      );
    }

    if (this.options !== undefined) {
      console.warn(
        "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"
      );
    }
  },

  mounted() {
    this.noneFunctionalComponentMode =
      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&
      !this.getIsFunctional();
    if (this.noneFunctionalComponentMode && this.transitionMode) {
      throw new Error(
        `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`

View on GitHub (pinned to 431db153bf)

Solutions

1. Rename the element prop to tag in every <draggable> usage
2. If component data was passed alongside element (transition-group), move it to the component-data prop of tag
3. Search the codebase for 'element=' / ':element' and replace with 'tag=' / ':tag'

Example fix

// before
<draggable element="ul" v-model="list">
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</draggable>

// after
<draggable tag="ul" v-model="list">
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</draggable>

function migrateDraggableProps(props) {
  if (props && props.element !== undefined) {
    const { element, ...rest } = props;
    console.warn('draggable: "element" is deprecated; use "tag" instead');
    return { tag: element, ...rest };
  }
  return props;
}

function isLegacyElementBinding(p) {
  return typeof p === 'object' && p !== null && 'element' in p;
}

null

When it happens

Trigger: Passing element='ul', element='transition-group', etc. to <draggable> after upgrading from Vue.Draggable v1 to v2.x+, where the prop was renamed to tag.

Common situations: Upgrading Vue.Draggable versions and keeping old template markup; copy-pasting old blog snippets; codebases that never updated after the migrate.md changes.

Related errors

• Options props is deprecated, add sortable options directly a
• Transition-group inside component is not supported. Please a

AI-assisted analysis of SortableJS/Vue.Draggable@431db153bf (2026-09-02). Data as JSON: /api/errors/403f43e423fa75e7. Report an issue: GitHub.