`v-slot` directive should be used properly

VUE_MISUSED_V_SLOT
Error
High, Medium
vue

This rule applies when the v-slot directive is not used properly as the following:

v-slot is used on an HTML element. v-slot can only be used on a <template> element or the component receiving the slot. Otherwise, Vue throws a compile error. See Example 1 below.
v-slot is used on a component, but the component has another <template v-slot> as a child. In this case, Vue throws a compile error because scope ambiguities may occur. See Example 2 below.
v-slot is used together with the old-style slot or slot-scope attribute. In this case, Vue throws a compile error because the old-style attributes will be deprecated. See Example 3 below.
<template v-slot> is used as a child of an HTML element. In this case, Vue throws a compile error because the receiving component cannot be identified. See Example 4 below.
An element has multiple v-slot directives. In this case, only the first one is recognized as the directive and the remaining ones are ignored. See Example 5 below.

-Noncompliant Code Example
+Compliant Code Example
 <template>
   <div>
     <!-- Example 1 -->
-    <comp>
+    <comp v-slot="slotProps">
-      <div v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
+      <div>
         {{ slotProps.foo }}
       </div>
     </comp>
     <!-- Example 2 -->
-    <comp v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
+    <comp>
-      {{ slotProps.foo }}
+      <template v-slot="slotProps">
         {{ slotProps.foo }}
       </template>
       <template v-slot:other>
         Other slot
       </template>
     </comp>
     <!-- Example 3 -->
     <comp>
-      <template slot="other" v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
+      <template v-slot:other="slotProps">
         {{ slotProps.foo }}
       </template>
     </comp>
     <!-- Example 4 -->
     <comp>
-      <div>
+      <template v-slot:other>
-        <template v-slot:other> <!-- VUE_MISUSED_V_SLOT alarm -->
+        <div>
           Other slot
-        </template>
+        </div>
-      </div>
+      </template>
     </comp>
     <!-- Example 5 -->
     <comp>
-      <template v-slot:other1 v-slot:other2> <!-- VUE_MISUSED_V_SLOT alarm -->
+      <template v-slot:other1>
         Other slot
       </template>
       <template v-slot:other2>
         Other slot
       </template>
     </comp>
   </div>
 </template>

Noncompliant Code Example

View with compliant examples side by side

<template>
  <div>
    <!-- Example 1 -->
    <comp>
      <div v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
        {{ slotProps.foo }}
      </div>
    </comp>

    <!-- Example 2 -->
    <comp v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
      {{ slotProps.foo }}
      <template v-slot:other>
        Other slot
      </template>
    </comp>

    <!-- Example 3 -->
    <comp>
      <template slot="other" v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
        {{ slotProps.foo }}
      </template>
    </comp>

    <!-- Example 4 -->
    <comp>
      <div>
        <template v-slot:other> <!-- VUE_MISUSED_V_SLOT alarm -->
          Other slot
        </template>
      </div>
    </comp>

    <!-- Example 5 -->
    <comp>
      <template v-slot:other1 v-slot:other2> <!-- VUE_MISUSED_V_SLOT alarm -->
        Other slot
      </template>
    </comp>
  </div>
</template>

Compliant Code Example

View with noncompliant examples side by side

<template>
  <div>
    <!-- Example 1 -->
    <comp v-slot="slotProps">
      <div>
        {{ slotProps.foo }}
      </div>
    </comp>

    <!-- Example 2 -->
    <comp>
      <template v-slot="slotProps">
        {{ slotProps.foo }}
      </template>
      <template v-slot:other>
        Other slot
      </template>
    </comp>

    <!-- Example 3 -->
    <comp>
      <template v-slot:other="slotProps">
        {{ slotProps.foo }}
      </template>
    </comp>

    <!-- Example 4 -->
    <comp>
      <template v-slot:other>
        <div>
          Other slot
        </div>
      </template>
    </comp>

    <!-- Example 5 -->
    <comp>
      <template v-slot:other1>
        Other slot
      </template>
      <template v-slot:other2>
        Other slot
      </template>
    </comp>
  </div>
</template>

Version

This rule was introduced in DeepScan 1.39.0.

See

Slots
[Vue warn]: v-slot can only be used on components or <template>.
[Vue warn]: To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots.
[Vue warn]: Unexpected mixed usage of different slot syntaxes.
[Vue warn]: <template v-slot> can only appear at the root level inside the receiving component

v-slot directive should be used properly

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?

`v-slot` directive should be used properly