Migrating slots from Vue 2 to Vue 3

Question

I roughly followed this article to make a component draggable:

<template>
  <div ref="draggableContainer" class="draggable-container">
    <div class="draggable-header" @mousedown="dragMouseDown">
      <slot name="dragger"></slot>
    </div>
    <slot></slot>
  </div>
</template>

and then in my Calculator.vue component I have:

<template>
  <Draggable class="calculator">
    <input type="text" class="calculator-screen" slot="dragger" value="" />

    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button>
      <button type="button" class="all-clear" value="all-clear">AC</button>

      <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
  </Draggable>
</template>

Both components use slot in different ways, in the draggable-maker as a tag, and in the calculator as an attribute. However, this is not Vue 3 compatible due to the use of slots. Here's the error I'm getting:

Can someone please suggest how I may fix this?

Boussadjra Brahim · Accepted Answer · 2022-03-21 21:32:59Z

9

The slot attribute is deprecated and it's replaced by v-slot:slotname for named slots and you should use it as follows :

  <Draggable class="calculator">
   <template v-slot:dragger>

   <input type="text" class="calculator-screen" value="" />
    <div class="calculator-keys">
      <button type="button" class="operator" value="+">+</button>
      <button type="button" class="operator" value="-">-</button>
      <button type="button" class="operator" value="*">&times;</button>
      <button type="button" class="operator" value="/">&divide;</button>

      <button type="button" value="7">7</button>
      <button type="button" value="8">8</button>
      <button type="button" value="9">9</button>

      <button type="button" value="4">4</button>
      <button type="button" value="5">5</button>
      <button type="button" value="6">6</button>

      <button type="button" value="1">1</button>
      <button type="button" value="2">2</button>
      <button type="button" value="3">3</button>

      <button type="button" value="0">0</button>
      <button type="button" class="decimal" value=".">.</button>
      <button type="button" class="all-clear" value="all-clear">AC</button>

      <button type="button" class="equal-sign operator" value="=">=</button>
    </div>
</template>
  </Draggable>

don't forget to remove slot="dragger" from input element, the syntax that you use is deprecated from the version 2.6.0 which will include the v3

edited Mar 21, 2022 at 21:32

answered Sep 5, 2020 at 0:50

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raj Over a year ago

Looks like it worked, thank you! Are you also suggesting to remove the wrapper <template> that's outside of <Draggable> (it's in my question's snippet but not in your response)?

Boussadjra Brahim Over a year ago

no you couldn't it's the component wrapper used by vue.js

Collectives™ on Stack Overflow

Migrating slots from Vue 2 to Vue 3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related