Closed
Description
Please describe what the rule should do:
This rule reports wrong usage of v-slot directives.
This is v-slot version of existing vue/valid-v-* rules.
What category should the rule belong to?
- Enforces code style
- Warns about a potential error
- Suggests an alternate way of doing something
- Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
<template>
<div v-slot="foo"></div><!-- error: 'v-slot' directive must be owned by a custom element, but '<div>' is not. -->
</template><template>
<div>
<template v-slot:header></template><!-- error: 'v-slot' directive must be owned by a custom element, but '<div>' is not. -->
</div>
</template><template>
<template v-slot:header></template><!-- error: 'v-slot' directive must be owned by a custom element, but '<template>' is not. -->
</template><template>
<my-component v-slot:one="foo" v-slot:two="foo"></my-component><!-- error: an element cannot have multiple 'v-slot' directives. -->
</template><template>
<my-component><template v-slot:one="foo" v-slot:two="foo"></template></my-component><!-- error: an element cannot have multiple 'v-slot' directives. -->
</template><template>
<my-component v-slot.foo="foo"></my-component><!-- error: 'v-slot' doesn't have any modifiers. -->
</template><template>
<my-component v-slot:header="foo"></my-component><!-- error: Named slots must be on '<template>' elements on a custom element. -->
</template><template>
<my-component v-slot><!-- error: Default slot should be on '<template>' elements on a custom element when other named slots exist. -->
<template v-slot:header></template>
</my-component>
</template><template>
<my-component v-slot></my-component><!-- error: Default slot on a custom element directly requires attribute value. -->
</template>Are there other cases?
Additional context