Creating a Search app with Vue.js + Parcel + TypeScript: Part 2 of 3

In Part 1 we setup basic tooling (vue, parcel and typescript) to develop the app. Here we will add one more tool, bootstrap, to layout our app and make it look more professional and responsive.

Step 1. Add bootstrap-vue to our project - from your terminal:

npm install bootstrap-vue --save

Step 2. Import bootstrap vue components and css

• open main.ts and add the following after line 2:

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);

Step 3. Add a simple Navbar

Open our app.vue file. Under div id="app" paste the following:

    <b-navbar toggleable="md" type="light" variant="light">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <b-navbar-brand href="#">Zerch</b-navbar-brand>
    </b-navbar>

Here we've used the b-navbar component from bootstrap-vue. See navbar for more details.

Step 3. Add our search input and results.

Here we're going to add a section with an input with a search button, then a section for the results. This is temporary just to check our layout. Later we will convert these sections into components. Add the following below our navbar:

    <div class="container-fluid">
      <div class="row mx-auto">
        <!-- Search input section -->
        <section class="col-sm-12 pt-3 px-0">
          <b-form inline class="d-flex justify-content-center">
            <!-- Bug in bootstrap-vue - need div around input or button disappears -->
            <div class="col-md-6 col-8 pl-0">
              <b-input class="w-100 mr-sm-2" type="text" placeholder="Enter Search Term"/>
            </div>
            <b-button class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-form>
        </section>
        <!-- Results section -->
        <section class="results">
          <div class="card-columns">
            <div class="card">
              <img class="card-img-top" src="https://dummyimage.com/mediumrectangle/222222/eeeeee" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card title that wraps to a new line</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
     </div>

Now in your browser you should see:

If something went wrong, you can get the full working version here: https://github.com/scottlepp/search-vue-parcel-typescript/tree/part-2

Our layout is set! In Part 3 we separate the sections into components and create a working app fetching results from a solr index.