Vuetifyのv-stepperをはじめとするコンポーネントで、公式ドキュメント通りのv-slot:item.Xのような記法を使っているにもかかわらず、ESLintでvue/valid-v-slotエラーに遭遇していませんか？
この記事では、その原因と、ESLintのチェックをクリアしつつ期待通りの動作を実現するための修正方法を解説します。
何が問題なのか？
Vuetifyの多くのコンポーネントでは、特定のコンテンツを挿入するために名前付きスロット（v-slot:name）やスコープ付きスロット（v-slot:name="props"）が利用されます。v-stepperの場合、各ステップの内容を定義するためにv-slot:item.1、v-slot:item.2といった形式が推奨されています。
しかし、ESLintのvue/valid-v-slotルールは、スロット名の動的な評価が必要な場合に、従来のv-slot:nameの記法を許可しないことがあります。特に、スロット名にピリオド（.）が含まれる場合、ESLintはこれをJavaScriptのプロパティアクセスと解釈し、構文的に不適切と判断してしまうことがあるのです。
例えば、以下のようなコードは、ESLintのvue/valid-v-slotルールに抵触する可能性があります。
<v-stepper :items="['Step 1', 'Step 2', 'Step 3']">
<template v-slot:item.1>
<v-card title="Step One" flat>...</v-card>
</template>
<template v-slot:item.2>
<v-card title="Step Two" flat>...</v-card>
</template>
<template v-slot:item.3>
<v-card title="Step Three" flat>...</v-card>
</template>
</v-stepper>
サンプルコードは https://vuetifyjs.com/en/components/steppers から拝借
解決策：動的スロット名の記法を使う
この問題を解決するには、Vueの動的スロット名の記法を利用します。動的スロット名は、JavaScriptの式をブラケット[]で囲むことでスロット名を指定できる記法です。これにより、ESLintはスロット名を正しく解釈し、エラーを回避できます。
具体的には、v-slot:item.Xを#[item.X]またはv-slot:[item.X]のように修正します。推奨されるのは、短縮記法である#を用いた形式です。
<v-stepper :items="['Step 1', 'Step 2', 'Step 3']">
<template #[`item.1`]>
<v-card title="Step One" flat>...</v-card>
</template>
<template #[`item.2`]>
<v-card title="Step Two" flat>...</v-card>
</template>
<template #[`item.3`]>
<v-card title="Step Three" flat>...</v-card>
</template>
</v-stepper>
この変更により、ESLintのエラーを解消しつつ、Vuetifyコンポーネントの期待通りの動作を維持することができます。特に、チーム開発でESLintが必須となっている環境では、この記法を知っておくことが非常に重要です。
まとめ
Vuetifyでv-slot:item.Xのようなスロット記法を使用している際にvue/valid-v-slotエラーが発生した場合は、動的スロット名の記法である#[item.X]を使用することで問題を解決できます。
これはVuetifyに限らず、Vue.jsの他のコンポーネントでも同様のエラーに遭遇した場合に応用できる知識です。
