DEV Community

Amaka Mbah
Amaka Mbah

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
mccrush profile image
Sergey Nikolaev

Hey.
Why are you importing components from the root directory: './nameOfComponent'?

After all, they are in the components folder. It may be better to use a component path like this: '@/components/nameOfComponent'

where '@' denotes the root directory.

Collapse
saucekode profile image
Amaka Mbah Author

Yea, you're right. Babel style, right? Will throw that in. Thank you.