As a newbie to Vue.js I have defined and, as far as I'm aware, used a nav ponent, however, npm run serve
disagrees.
The exact error I get is:
ERROR Failed to pile with 1 errors 20:51:39
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: The "nav" ponent has been registered but not used (vue/no-unused-ponents) at src/App.vue:13:5:
11 | name: 'app',
12 | ponents: {
> 13 | nav,
| ^
14 | },
15 | };
16 | </script>
1 error found.
@ ./src/main.js 6:0-28 12:13-16
@ multi (webpack)-dev-server/client?http://192.168.233.240:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
File layout
src
|
|__assets
| |__css
| |__ style.css
|
|__ponents
| |__nav.vue
|
|__App.vue
|
|__main.js
App.vue
<template>
<div id="app">
<nav />
</div>
</template>
<script>
import nav from '@/ponents/nav.vue';
export default {
name: 'app',
ponents: {
nav,
},
};
</script>
main.js
The only change I believe I've made is adding in the bootstrap.css
file.
import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
import './assets/css/style.css';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount('#app');
And, of course, the template itself.
<template>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</template>
<script>
export default {
name: 'nav',
};
</script>
As a newbie to Vue.js I have defined and, as far as I'm aware, used a nav ponent, however, npm run serve
disagrees.
The exact error I get is:
ERROR Failed to pile with 1 errors 20:51:39
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: The "nav" ponent has been registered but not used (vue/no-unused-ponents) at src/App.vue:13:5:
11 | name: 'app',
12 | ponents: {
> 13 | nav,
| ^
14 | },
15 | };
16 | </script>
1 error found.
@ ./src/main.js 6:0-28 12:13-16
@ multi (webpack)-dev-server/client?http://192.168.233.240:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
File layout
src
|
|__assets
| |__css
| |__ style.css
|
|__ponents
| |__nav.vue
|
|__App.vue
|
|__main.js
App.vue
<template>
<div id="app">
<nav />
</div>
</template>
<script>
import nav from '@/ponents/nav.vue';
export default {
name: 'app',
ponents: {
nav,
},
};
</script>
main.js
The only change I believe I've made is adding in the bootstrap.css
file.
import Vue from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.css';
import './assets/css/style.css';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount('#app');
And, of course, the template itself.
<template>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</template>
<script>
export default {
name: 'nav',
};
</script>
Share
Improve this question
edited Dec 7, 2021 at 9:49
E_net4
30.1k13 gold badges112 silver badges151 bronze badges
asked Dec 17, 2019 at 21:05
SarahJessicaSarahJessica
5241 gold badge8 silver badges21 bronze badges
2 Answers
Reset to default 3You shouldn't call it nav since there's already a default HTML ponent with this name (as you're using yourself in the actual ponent).
Rename your ponent to Nav (Yes a capital N), and it should work just fine after this.
Nav.vue
<template>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</template>
export default {
name: 'Nav',
};
App.vue
<template>
<div id="app">
<Nav />
</div>
</template>
<script>
import Nav from '@/ponents/Nav';
export default {
name: 'app',
ponents: {
Nav,
},
};
</script>
You are getting this error because you cannot name a ponent with an existing html tag. Nav is a reserved keyword in html. Rename your ponent differently other than nav
to something like app-nav-bar
, see below.
<template>
<div id="app">
<app-nav-bar />
</div>
</template>
<script>
import navBar from './ponents/nav.vue';
export default {
name: 'app',
ponents: {
'app-nav-bar': navBar
}
}
</script>