BootstrapVue Add Search Form to Navbar

Aug 24, 2020
<b-navbar toggleable="lg" type="light" variant="app">  <div class="container">    <b-navbar-brand to="/">        <img src="/logo.png" width="30" height="30" class="d-inline-block align-top mr-1" alt="Logo">        {{ title }}    </b-navbar-brand>    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>    <b-collapse id="nav-collapse" is-nav>      <b-navbar-nav>        <b-nav-item to="/about">About</b-nav-item>      </b-navbar-nav>      <b-navbar-nav class="ml-auto" v-if="search">        <b-nav-form action="/search">          <b-input-group>            <b-form-input size="sm" placeholder="Search" name="query" />            <b-input-group-append>              <b-button size="sm" type="submit">Search <b-icon-search /></b-button>            </b-input-group-append>          </b-input-group>        </b-nav-form>      </b-navbar-nav>    </b-collapse>  </div></b-navbar>

NOTE: To use b-icon-search, you need to import BootstrapVue Icons

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.