Bootstrap-Vue.JS Unknown Custom Element <b-nav-brand>

Question

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 my main.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 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
  }
})

gil · Accepted Answer · 2018-08-21 05:28:59Z

6

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>

answered Aug 21, 2018 at 5:28

gil

1,34813 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yk Poh Over a year ago

Really thanks for pointing out. Haha. Need to be careful next time.

Don M · Accepted Answer · 2020-09-13 23:16:46Z

0

You can also import it

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

or

import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)

On the bootstrap-vue docs they like to tell you how you can get started, import, at the bottom of the page.

answered Sep 13, 2020 at 23:16

Don M

9861 gold badge10 silver badges27 bronze badges

Comments

ExpertWeblancer · Accepted Answer · 2022-07-06 14:53:17Z

Just import whatever you want to use.

Here is a sample code.

<script>
import {
   BNavbarToggle, BNavItem, BNavbarBrand, BNavbar, BNavbarNav, BNavItemDropdown, BDropdownItem, BDropdownDivider, BAvatar,  BCollapse, BNav, BContainer, BRow, BCol, BLink, BFormGroup, BFormInput, BInputGroupAppend, BInputGroup, BFormCheckbox, BCardText, BCardTitle, BImg, BForm, BButton,
} from 'bootstrap-vue'

export default {
  components: {
    BNavbarToggle,
    BNavItem,
    BNavbarBrand,
    BNavbarNav,
    BNavItemDropdown,
    BDropdownItem,
    BDropdownDivider,
    BAvatar,
    BCollapse,
    BNavbar,
    BNav,
    BContainer,
    BRow,
    BCol,
    BLink,
    BFormGroup,
    BFormInput,
    BInputGroupAppend,
    BInputGroup,
    BFormCheckbox,
    BCardText,
    BCardTitle,
    BImg,
    BForm,
    BButton,
  },
}
</script>

Collectives™ on Stack Overflow

Bootstrap-Vue.JS Unknown Custom Element <b-nav-brand>

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related