Understanding Vue by building a country directory app Part 2
Tags: vue, beginners
Published: 2020-07-15 14:31:38

---
title: Understanding Vue by building a country directory app Part 2
published: true
description: 
tags: #vue #beginners
//cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yzgwmgz543vkj1ebwdlc.jpg
---
Hello everyone! I'm so excited on the next stage of our app, we're making progress already. 

**Objective**
- Add in our search, filter and countries components

Start by creating new components Search.vue, Filter.vue and Countries.vue

**Search component**
This component would have our search input where we look for different countries.
```
<template>
    <div class="Search">
        <input type="search" placeholder="Search for a country...">
    </div>
</template>

<script>
    export default{
        name: 'Search'
    }
</script>

<style>
    .Search input[type="search"]{
        width: 350px;
        height: 45px;
        background: #fff;
        padding: 2px 18px 0 0;
        border-radius: 4px;
        text-indent: 18px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        font-weight: 600;
    }

    .Search input[type="search"]::placeholder{
        font-family: 'Nunito Sans';
        font-weight: 600;
        color: #192734;
    }

</style>
``` 

**Filter component**
This component has a select tag and would basically filter out countries based on regions. 
```
<template>
    <div class="Filter cursor-point">
        <select id="Filter-Select">
            <option value="default">Filter by region</option>
        </select>
    </div>
</template>

<script>
    export default{
        name: 'Filtersearch'
    }
</script>

<style>
    .Filter #Filter-Select{
        width: 180px;
        height: 45px;
        background: #fff;
        border-radius: 4px;
        text-indent: 15px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        font-weight: 600;
        color: #192734;
    }

    .dark #Filter-Select{
        background: hsl(209, 23%, 22%);
        color: #fff
    }
</style>
```

Now, after successfully creating our search and filtersearch components, we import them into the **Content.vue** component.

The next component we would be creating is the **countries** component. It would hold all our individual countries as seen in the design.

**Countries component**
This component is going to be a container for all our countries. Remember, the talk about components in part 1? Each country is represented with the Country component and will be reused in this particular component. I haven't set up the design for the Country component but will do that when we begin making HTTP requests to the API.

```
<template>
  <div class="Countries">

  </div>
</template>

<script>
 export default{
   name: 'Countries'
 }
</script>

<style>
  .Countries{
    background: dodgerblue;
    padding: 25px;
    margin-top: 25px;
  }
</style>

```
I'm using the nice blue color to let you know the component does exist.

**What Content component should look like**

```
<template>
  <div class="Content">
    <div class="Content-sf">
      <Search/>
      <Filtersearch/>
    </div>
    <Countries/>
  </div>
</template>

<script>
  import Search from './Search';
  import Filtersearch from './Filter';
  import Countries from './Countries';
  export default{
    name: 'Content',
    components:{
      Search,
      Filtersearch,
      Countries
    }
  }
</script>

<style>
  .Content{
    padding: 25px 30px;
    background: #f5f5f5;
    height: 88vh;
  }

  .Content-sf{
    display: flex;
    justify-content: space-between;
  }
</style>
```
That will be all for this section. I'm super excited about tomorrow's episode. We would be adding some pop to our app -- ta-da! **DARK MODE THEME** 😏😏

You can vue (pun intended, lol!) the app here: https://12oqz.csb.app/
See you later, byeee!!!🙂 

If you missed part one, here it is: https://dev.to/saucekode/understanding-vue-by-building-a-country-directory-app-part-1-2n9