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 

10 Answers

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 /> 

use Component instead of component

Components: { EmployeeTable }, 

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

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

For importing other resources like js files or potentially some animation files or anything that can't be added or called in the HTML/Template section, you can set your eslint rules in the package.json

 "rules": { "strict": "off" }

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"}.

The name of the component is sensitive to uppercase and lowercase letters, such as write below ...

 import EmployeeTable from './components/EmployeeTable.vue' export default { name: 'App', components: { EmployeeTable, } 

And on the template,We write similarly to the name we have defined...

<template> <div> <EmployeeTable /> </div> </template> 

When you import component remove .vue

Example :

 <template> <div> <Header /> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld'; import Header from './components/Header/Header'; export default { name: 'App', components: { HelloWorld, Header, } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 

Your syntax is correct, but I think you use the wrong rule here. Shouldn't it be just no-unused-vars, without the vue part.

rules: 'no-unused-vars': 'off' }, 

I have faced this befor , make sure you write the name of component correctly without missing or adding any letter , i hope every thing works then

1. First of all I recommend that you use phpstorm to ensure all the relevant files are imported.

2. Then secondly in the App.vue register the EmployeeTable in the component section like this ...

   components: { HelloWorld }

... 3. Most importantly make use of

 <div> <HelloWorld></HelloWorld> </div> </template> in the App.vue