title: Bootstrap-Vue.JS Unknown Custom Element <b-nav-brand>
body: <p>I am working on a Vue application. I use bootstrap-vue navbar from <a href="https://bootstrap-vue.js.org/docs/components/navbar/" rel="nofollow noreferrer">this official example</a> in my application. But, when I run my project, in the console, Vue keeps warning me about the unknown custom element <code>&lt;b-nav-brand&gt;</code> which I have included in my <code>main.js</code>.</p>
  
  <p>Here is my set up if you have any ideas. </p>
  
  <p><strong>Error:</strong></p>
  
  <blockquote>
    <p>[Vue warn]: Unknown custom element:  - did you register<br>
    the component correctly? For recursive components, make sure to provide<br>
    enter code here enter code here the "name" option.</p>
  </blockquote>
  
  <p>Navbar Code:</p>
  
  <pre><code>&lt;b-navbar class="nav-bar" toggleable="sm"&gt;
      &lt;b-navbar-toggle target="nav_collapse"&gt;&lt;/b-navbar-toggle&gt;
      &lt;b-nav-brand class="logo" href="#"&gt;
        &lt;img src="/static/images/boost-icon.svg" alt="Boost icon"/&gt;
        &lt;h1&gt;Portal&lt;/h1&gt;
      &lt;/b-nav-brand&gt;
      &lt;b-collapse is-nav id="nav_collapse"&gt;
        &lt;b-navbar-nav class="ml-auto"&gt;
          &lt;b-nav-item href=""&gt;
            &lt;span class="btn btn-primary btn-request-access"&gt;Request Access&lt;/span&gt;
          &lt;/b-nav-item&gt;
        &lt;/b-navbar-nav&gt;
      &lt;/b-collapse&gt;
    &lt;/b-navbar&gt;
  </code></pre>
  
  <p>Main.JS:</p>
  
  <pre><code>Vue.use(BootstrapVue)
  new Vue({
    el: '#app',
    router: router,
    template: '&lt;App/&gt;',
    store: store,
    components: {
      App
    }
  })
  </code></pre>