SortableJS/Vue.Draggable · warning

Options props is deprecated, add sortable options directly a

Error message

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

What it means

This is a deprecation warning (console.warn, not a throw) emitted in created(): the `options` prop was removed in favor of passing Sortable options directly as individual props on <draggable> or via v-bind. The library warns whenever `this.options` is defined.

Source

Thrown at src/vuedraggable.js:191

    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()}`
      );
    }
    const optionsAdded = {};
    eventsListened.forEach(elt => {
      optionsAdded["on" + elt] = delegateAndEmit.call(this, elt);
    });

View on GitHub (pinned to 431db153bf)

Solutions

1. Move each Sortable option to a direct prop: <draggable handle='.handle' :animation='150'>
2. Or spread the options object with v-bind: <draggable v-bind='sortableOptions'>
3. Remove the :options binding entirely; search for ':options=' / 'options=' on draggable usages

Example fix

// before
<draggable v-model="list" :options="{ handle: '.handle', animation: 150 }">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

// after
<draggable v-model="list" handle=".handle" :animation="150">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

function migrateDraggableProps(props) {
  if (props && props.options !== undefined) {
    const { options, ...rest } = props;
    console.warn('draggable: "options" prop is deprecated; pass Sortable options as props or v-bind');
    return { ...rest, ...options };
  }
  return props;
}

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

null

When it happens

Trigger: Using <draggable :options='{ handle: ".handle", animation: 150 }'> after upgrading to vuedraggable versions that support options-as-props (2.18+/3.x).

Common situations: Upgrading Vue.Draggable and keeping old v1-era `:options` bindings; tutorials predating the prop split; dynamically building an options object and binding it.

Related errors

• Element props is deprecated please use tag props instead. Se
• 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/31dfd2daf466189a. Report an issue: GitHub.