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 follows:

  1. 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.
  2. 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.
  3. <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 3 below.
  4. 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 4 below.

Noncompliant Code Example

View with compliant examples side by side 
<template>
  <!-- Example 1 -->
  <MyComponent>
    <div v-slot="slotProps"> <!-- VUE_MISUSED_V_SLOT alarm -->
      {{ slotProps.foo }}
    </div>
  </MyComponent>

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

  <!-- Example 3 -->
  <MyComponent>
    <div>
      <template v-slot:other> <!-- VUE_MISUSED_V_SLOT alarm -->
        Other slot
      </template>
    </div>
  </MyComponent>

  <!-- Example 4 -->
  <MyComponent>
    <template v-slot:other1 v-slot:other2> <!-- VUE_MISUSED_V_SLOT alarm -->
      Other slot
    </template>
  </MyComponent>
</template>

Compliant Code Example

View with noncompliant examples side by side 
<template>
  <!-- Example 1 -->
  <MyComponent v-slot="slotProps">
    <div>
      {{ slotProps.foo }}
    </div>
  </MyComponent>

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

  <!-- Example 3 -->
  <MyComponent>
    <template v-slot:other>
      <div>
        Other slot
      </div>
    </template>
  </MyComponent>

  <!-- Example 4 -->
  <MyComponent>
    <template v-slot:other1>
      Other slot
    </template>
    <template v-slot:other2>
      Other slot
    </template>
  </MyComponent>
</template>

Version

This rule was introduced in DeepScan 1.39.0.

See

  • Components In-Depth - Slots

  • [Vue error]: v-slot can only be used on components or <template> tags. (See Example 1 above)

  • [Vue error]: Codegen node is missing for element/if/for node. Apply appropriate transforms first. (See Example 2 and 3 above)

Was this documentation helpful?

Last updated on July 21, 2025