Closed
Description
Tell us about your environment
- ESLint version: 6.7.2
- eslint-plugin-vue version: 8.7.0
- Node version:
The problem you want to solve.
It's in a puzzle about this rule reporting an error (Component name "index" should always be multi-word.) about a .vue named views/data/Report/index.vue using script setup, the same code with the offical site, like:
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
Your take on the correct solution to problem.
<!-- filename: Todo.vue -->
/* ✗ BAD */
<script setup>
// ...
</script>
<!-- filename: TodoItem.vue -->
/* ✓ GOOD */
<script setup>
// ...
</script>
<!-- filename: Todo.vue -->
/* ✓ GOOD */
<script setup>
// ...
</script>
<script>
export default {
name: 'TodoItem'
}
</script>
Additional context