component has been registered but not used vue/no-unused-components

Question

Created my component EmployeeTable.vue Then I exported as

<script>
export default {
  name: "employee-table"
};
</script>

But when I import it in App.vue as follows import EmployeeTable from "@/components/EmployeeTable.vue"; I get this error

error  The "EmployeeTable" component has been registered but not used  vue/no-unused-components

Answer 1

if you want to disable component registered state. Use this code

<script>
/* eslint-disable vue/no-unused-components */
export default {
  name: "employee-table"
};
</script>

Answer 2

It's your es-lint setup. You can change it to not that strict rules or you can fix this actual problem. 1. Make sure that in App.vue you registered it in a components section like this:

...
components: {
    EmployeeTable
},
...

2. Make sure you used it in App.vue template:

<EmployeeTable />

Answer 3

use Component instead of component

Components: {
    EmployeeTable
},

Answer 4

Avoid the error the right way

I'm assuming that OP ran into this situation for the same reason I did: App includes ComponentA, which includes ComponentB. But we're mistakenly including ComponentB in App.vue even though it's not directly used there. (I didn't realize at first that the imports and components list was supposed to be in each component rather than at the toplevel .vue file.)

The way to avoid the error in that case is for ComponentA.vue to have:

import ComponentB from './ComponentB.vue'

export default {
    name: 'ComponentA',
    components: {
        ComponentB
    },

...

}

Note: do not include ComponentB in App.vue. It isn't referenced directly here and that is what the linter is warning you about.

Turn off the warning (last resort)

If you're hitting this warning for some other reason, and you really need to turn it off in the linter, edit package.json. Find the section for "eslintConfig": {...} and make sure it includes "rules": {"vue/no-unused-components": "off"}.