Creating a Search app with Vue.js + Parcel + TypeScript: Part 2 of 3
Tags: vue, parcel, bootstrap, html
Published: 2018-06-22 12:54:12

---
title: Creating a Search app with Vue.js + Parcel + TypeScript: Part 2 of 3
published: true
description: Layout of our Search app
tags: #vue #parcel #bootstrap #html5
---

In [Part 1](https://dev.to/scottlepp/creating-a-search-app-with-vue--parcel--typescript-part-1-52f9) 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:

```console
npm install bootstrap-vue --save
```
**Step 2**. Import bootstrap vue components and css 
* open *main.ts* and add the following after line 2:
```javascript
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:

```html
    <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](https://bootstrap-vue.js.org/docs/components/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:

```html

    <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: 

![Run](https://thepracticaldev.s3.amazonaws.com/i/6c80x9685wus7m2grfj9.PNG)

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](https://dev.to/scottlepp/creating-a-search-app-with-vuejs--parcel--typescript-part-3-of-3-1j5f) we separate the sections into components and create a working app fetching results from a solr index.