Understanding Vue by building a country directory app Part 1

Hello everyone. This is my very first article on VueJs. I've been learning Vue for a while now and honestly it has been a bitter-sweet experience for me. I hear people say Vue is easy, yea, it is indeed easy because you feel at home, it's still HTML but with some nice perks and those perks was the bitter part but it's a process so I'm getting there. In this series, all I will be doing is just documenting my learning experience.

On today's episode I will building a full fledged application with a dark mode theme and this is to be sure I really did understand the tutorial I have been on. It's a challenge for me and I'm taking it. This particular article would be in parts because I don't want it so long. I'll just break them into small pieces.

What our final application should look like after we're done:

I am a big believer in writing the actual code than just binge-watching tutorials and not doing anything about them.

I will be building this on codesandbox, of course, you can do this in your IDE after creating a new project in Vue. This tutorial isn't really about how to get started with Vue so I won't be talking about that.

Project Structure
This image describes what my file structure looks like. Codesandbox just gives the IDE experience but online. So I took out the assets folder since we won't be needing it in this tutorial. We'll be using the Nunito font, you can copy this link right here and paste in your index.html file, it's found in your public folder:

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet">

Let's begin building out our different components:

Header Component

<template>  <div class="Header">    <h2>VueSeries</h2>  </div></template><script>  export default{    name: 'Header'  }</script><style>  .Header{    display: flex;    justify-content: space-between;    align-items: center;    padding: 16px 25px;    background: #ffffff;    color: #192734;    box-shadow: 0 0 5px rgba(0,0,0,0.4);  }</style>

After adding the styles, import the component into the root component which in this case is our App.vue file. Our app should come alive by now.

Content Component

<template>  <div class="Content">    <!-- Country component -->    <!-- Search component -->    <!-- Filter component -->  </div></template><script>  export default{    name: 'Content'  }</script><style>  .Content{    padding: 25px 30px;    background: #f5f5f5;    height: 88vh;  }</style>

Toggle Component

I will be using Font Awesome for my icons, use whatever font icon you love.

  <template>  <div class="Toggle">    <button>     <i class="fa fa-moon-o"></i>     <span>Dark Mode</span>    </button>  </div></template><script>  export default{    name: 'Toggle'  }</script><style>  .Toggle{    color: #197432;  }  button{    background: none;    outline: none;    border: none;  }  button span{    font-weight: 600;margin-left: 6px  }</style>

Then, import your toggle component into your header component and you'll be good.

I'll stop here, then tomorrow, we'll move on to creating the rest of the components. This is what our app looks like: https://12oqz.csb.app/

Be creative with yours, musn't look like mine. Till tomorrow. Byeee!