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:

  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. 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.
  4. <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.
  5. 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

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

Was this documentation helpful?