Bootstrap-Vue.JS Unknown Custom Element <b-nav-brand>
Because its <b-navbar-brand>
in the docs.
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div>
<!-- Image and text -->
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
BootstrapVue
</b-navbar-brand>
</b-navbar>
</div>
Yk Poh
A .Net full stack developer currently working in a travel-based startup in Melaka, Malaysia. Outside my work, I like to study financial investment and learn online. Currently, I am hustling to learn how to work flexibly and fast in a startup environment.
Updated on June 09, 2022Comments
-
Yk Poh almost 2 years
I am working on a Vue application. I use bootstrap-vue navbar from this official example in my application. But, when I run my project, in the console, Vue keeps warning me about the unknown custom element
<b-nav-brand>
which I have included in mymain.js
.Here is my set up if you have any ideas.
Error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to provide
enter code here enter code here the "name" option.Navbar Code:
<b-navbar class="nav-bar" toggleable="sm"> <b-navbar-toggle target="nav_collapse"></b-navbar-toggle> <b-nav-brand class="logo" href="#"> <img src="/static/images/boost-icon.svg" alt="Boost icon"/> <h1>Portal</h1> </b-nav-brand> <b-collapse is-nav id="nav_collapse"> <b-navbar-nav class="ml-auto"> <b-nav-item href=""> <span class="btn btn-primary btn-request-access">Request Access</span> </b-nav-item> </b-navbar-nav> </b-collapse> </b-navbar>
Main.JS:
Vue.use(BootstrapVue) new Vue({ el: '#app', router: router, template: '<App/>', store: store, components: { App } })
-
Yk Poh over 5 yearsReally thanks for pointing out. Haha. Need to be careful next time.