Component is defined but never used no-unused-vars - vue.js

Question

I have made a Vue CLI project and then started making my project.
I have made the following component named Navigation.vue:
<template>
<nav>
<div class="nav_container">
<ul>
<li><router-link to="/home">Home</router-link></li>
<li class="dropdown">
<a class="touch"
>Network Settings <i class="fas fa-angle-down"></i
><i class="fas fa-angle-up"></i
></a>
<div class="dropdown-content">
<router-link to="/dhcpIP">DHCP IP</router-link>
<router-link to="/staticIP">Static IP</router-link>
</div>
</li>
<!-- <li><router-link to="/files">Import/Export Files</router-link></li> -->
<li><router-link to="/update">Update</router-link></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Navigation',
}
</script>
<style scoped>
/* Some style */
</style>
I have then imported it in App.vue:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
</script>
<style scoped>
/* Some style */
</style>
finally I have main.js which I haven't modified:
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
and I get the following error:
ERROR Failed to compile with 1 errors 8:10:25 PM
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
\App.vue
9:8 error 'Navigation' is defined but never used no-unused-vars
The component is clearly used, yet I receive that error. I don't understand why.

Answer 1

You are importing Navigation but never use it on your script, declare it as component:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
Navigation
},
}
</script>
<style scoped>
/* Some style */
</style>