Understanding Vue by building a country directory app Part 2

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

Blog

Understanding Vue by building a country directory app Part 2

Chiamaka Mbah

Join Our Newsletter. No Spam, Only the good stuff.

Related