DEV Community: Valentine Elum

Building Advanced Components with Event-Driven Data Communication in Vue.js

Valentine Elum — Fri, 02 Apr 2021 15:28:51 +0000

In this article, I'll be taking you through the process of building dynamic and modular parent-child components with event-driven data communication in a Vue application. You'll be learning how to dynamically communicate an application's state to the user on the ui, how to work with custom events in making applications dynamic in Vue.js and more.

Prerequisites

For you to be able to follow up with this tutorial, you must have the following installed in your machine.

Node.js. Click here to learn more.
Vue CLI. Click here to learn more.
Yarn Package Manager. Click here to learn more.

Once you have all these installed, fire up your favorite terminal, I'm be using Terminus.

Run the following command to start a Vue project. Replace components-projects with your desired project name but make it memorable, so you can easily get back to it tomorrow for any reason.

vue create components-projects

Next output on the console:

? Please pick a preset:
  vue-default ([Vue 2] babel, pwa, router, vuex, eslint, unit-mocha, e2e-nightwatch) 
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

From the prompt, use arrow-down key to select the Default ([Vue 2] babel, eslint) option and hit enter! Wait for the installation to finish.

When it's done installing, follow the instruction to switch into your project folder and run yarn serve to serve your project! If you did this well, your project should be running on port 8080, open your browser and visit http://localhost:8080 to view your project.

Change the content of the App.vue file inside the src folder the one below:

<template>
  <div id="app">
    <h3>Hello World</h3>
  </div>
</template>

<script>
export default {}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background: #eff7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
}
</style>

Basically, I removed the default stylings and components in the file and changed it to mine, this is to enable me style the app to my taste for future purposes.

When you save the file and open your development server on the browser which is normally http://localhost:8080 for Vue.js projects, you should see a page with 'Hello World' at the center of it and light background color. Let's continue!

Building dynamic and modular components for a task management app

We'll be building a task management app (another to-do app? :)). In this project, you'll learn how to build dynamic and modular components with event-driven data communication from child to parent and vice-versa. We'll be making use of props and the Vue $emit api to communicate our custom change event to complete and oncomplete our tasks in the app.

Without wasting time, go to your components directory under the src directory of your project folder, create a new Vue component file and name it Task.vue and another component file with name, Tasks.vue. The Task component will be for individual tasks while the Tasks component will be the parent component for each tasks which will pass the task data down to each Task component.

Now, paste the following codes into the Task.vue component file and I'll explain what are in the codes.

<template>
  <li class="list-item" :class="task.done ? 'done' : ''" @click="handleClick">
    {{ task.title }}
  </li>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    handleClick: function() {
      this.emitChange()
    },
    emitChange: function() {
      const id = this.task.id
      this.$emit('change', id)
    }
  }
}
</script>

<style scoped>
.list-item {
  cursor: pointer;
  position: relative;
  padding: 10px 15px 10px 45px;
  border-bottom: 1px solid #f1f1f1;
  background: #ffffff;
  font-size: 15px;
  list-style: none;
  text-decoration: none;
  transition: .5s;
}
.list-item.done {
  text-decoration: line-through;
}
.list-item:last-of-type {
  border-bottom: none;
}
.list-item::before {
  content: '';
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #eff7ff;
  transition: .5s;
  position: absolute;
  left: 15px;
  top: 10px;
}
.list-item.done::before {
  background: #268aee;
}
</style>

Explaining the Task.vue files

In the Task.vue file, we have a template section which contains the markup of our individual tasks.

<template>
  <li class="list-item" :class="task.done ? 'done' : ''" @click="handleClick">
    {{ task.title }}
  </li>
</template>

Inside the template section, contains a html li tag, with the task, some classes and a click event listener. Based on the status of the task (done/undone), we bind a class to the li tag so we can easily tell the status (done/undone) of the task in the ui using CSS.

Inside the script section is where our component logic happens. Inside the section, we write the JavaScript codes using Vue APIs to make our component dynamic. Inside the section looks as follows.

<script>
export default {
  props: ['task'],
  methods: {
    handleClick: function() {
      this.emitChange()
    },
    emitChange: function() {
      const id = this.task.id
      this.$emit('change', id)
    }
  }
}
</script>

First, you'll see the props, this is where you register the properties of a component, read about props in Vue.js here. In our Task component we'll be receiving a prop named task which will be an Object of the task to be rendered in the UI.

Next comes the methods, in a Vue.js component this is where you write functions that will be used inside the component. There are three methods in our component, the first is the handleClick method which handles click event on the li tag, this happens when a user of our app wants to complete or oncomplete a task.

handleClick: function() {
  this.emitChange()
}

The handleClick calls a function that emits a change event using the Vue.js $emit API, the emitted event will be handled by the parent component of this very component, the Tasks.vue component which we will be working on very shortly.

emitChange: function() {
  const id = this.task.id
  this.$emit('change', id)
}

So when the method is called, we get the id of the current task, and emit a change event passing the id as the handler's parameter. This methods creates awareness to the parent component that the user wants to mark a task as done/undone and calls the specified event handler on the parent component passing the id as the handler's parameter.

Creating the Tasks.vue Component

Next on our task management app, we're going to start writing our Tasks.vue component which will be the parent component of our Task.vue component. Copy and paste the below code into the Tasks.vue file which you created earlier and I'll explain what's in it very shortly.

<template>
  <div class="list-items">
    <h3>My Tasks</h3>
    <ul class="tasks">
      <Task
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @change="handleChange"
      />
    </ul>
  </div>
</template>

<script>
import Task from './Task.vue'
export default {
  components: { Task },
  data() {
    return({
      tasks: [
        {
          id: 0,
          title: 'Design a components',
          done: true
        },
        {
          id: 1,
          title: 'Design a components',
          done: false
        },
        {
          id: 2,
          title: 'Design a components',
          done: true
        },
        {
          id: 3,
          title: 'Design a components',
          done: false
        },
        {
          id: 4,
          title: 'Design a components',
          done: true
        },
        {
          id: 5,
          title: 'Design a components',
          done: false
        },
      ]
    })
  },
  methods: {
    handleChange: function(id) {
      const task = [...this.tasks].filter(item => item.id === id)[0]
      task.done = !task.done
    }
  }
}
</script>

<style scoped>
.list-items {
  width: 40%;
  border-radius: 8px;
  overflow: hidden;
  padding: 50px 20px;
  background: #ffffff;
}
.list-items > h3 {
  margin-bottom: 25px;
}
.list-items > .tasks {
  box-shadow: 0 0 40px #e1f0ff;
}
</style>

Explaining the Tasks.vue files

In the Tasks.vue file, we have a template section which contains the markup of our tasks. Inside it, we loop through our tasks a property in the data (I'll touch this shortly), and render each task in the ui using the Task component we created earlier .

<template>
  <div class="list-items">
    <h3>My Tasks</h3>
    <ul class="tasks">
      <Task
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @change="handleChange"
      />
    </ul>
  </div>
</template>

On the Task component, we pass the task and also listen for a change event. Remember that this event occurs when our app user clicks on the li tag inside the Task component, it happens when our app users wants to change the status of a task by clicking on it to toggle done and undone.

The click event listener has a handler, handleClick that calls a function emitChange that emits a change event on the Task component.

So, when this event is emitted, handleChange method is called on the parent component, this method does the actual work of changing the status of the task with the id passed to it, to the opposite. Below is the handleChange codes.

handleChange: function(id) {
  const task = [...this.tasks].filter(item => item.id === id)[0]
  task.done = !task.done
}

In the code above, we filter the tasks for the task(s) with the id passed to the function as parameter, thanks to the fact that each tasks has a unique id, the return will be an array of object(s) with a single object in it. By appending [0] at the end of the filter method, we selected the first item in the returned array.

Inside this component, we have a data mockup for our tasks, in a real-world project you'll be fetching the data from an API, but for the sake of learning, we'll quickly use a mockup. Below is the mocked up data in the Tasks.vue component.

/* .......... */
data() {
  return({
    tasks: [
      {
        id: 0,
        title: 'Design a components',
        done: true
      },
      {
        id: 1,
        title: 'Design a components',
        done: false
      },
      {
        id: 2,
        title: 'Design a components',
        done: true
      },
      {
        id: 3,
        title: 'Design a components',
        done: false
      },
      {
        id: 4,
        title: 'Design a components',
        done: true
      },
      {
        id: 5,
        title: 'Design a components',
        done: false
      },
    ]
  })
},
/* .......... */

The data above is an array of tasks, each task has an id (Number), a title (String), and a done status (Boolean).

In the first three lines inside the script section, we imported our child component which we created earlier and registered it for use in the parent component.

import Task from './Task.vue'
export default {
  components: { Task },
// ............

Next in the file is our CSS styles for the component, I won't be going into this for now.

Testing our app

It's time to see our unicorn prototype :). Now, we are going to import and register the Tasks component for use in our App.vue component. We're going to do this the way components are being imported nd registered in Vue inside the script section. Update the script section in App.vue file with the one below.

<script>
import Lists from './components/Lists.vue'
export default {
  components: { Lists },
}
</script>

Next, update the template section in App.vue file with the one below.

<template>
  <div id="app">
    <lists />
  </div>
</template>

Now, save the changes and check your browser, if you followed me well, your screen should look like in the picture below.

You should see a heading that says 'My Tasks' and list of tasks. Any completed task has a strike-through text decoration and a blue circle on it's left. The uncompleted tasks, has a different look, it has a light blue circle on it's left and has no strike-through text decoration. Thanks to CSS, we're able to differentiate the states in the UI.

You should also see that when you click on a task, the UI changes, that is because the status of the task (done/undone) get changed by the handleChange method. You remember? Yes!

For example, if you click on the first task which is done, the done status will change to false on the background and the UI will change with a subtle transition.

Before clicking the task:

After clicking the task:

Conclusion

In this project, we created a dynamic component that renders a list (a task), it receives a prop (an object containing the task, it's id and it's done status) and when a user wants to change the task' status, they click on the task and the status gets toggled.

When a task is clicked, on the background, the component emits an event, a change event telling the parent component that the status of the task needs to be changed. The parent component then handles the event.

The idea behind this is to create event-driven data communication between components, parent and child. This idea can be used in different use cases, you can use it to create modular, custom and dynamic drop-down, drawer and pop-up ui components having features like value change, open and close toggles, and more.

Resources

Vue.js Guide on Props: Read Here
Vue.js Components Basics: Read Here

You can find the codes for this tutorial here.

View the app we built live here.

BOOK REVIEW: FRONTEND DEVELOPMENT PROJECTS WITH VUE JS

Valentine Elum — Fri, 29 Jan 2021 12:44:37 +0000

I reviewed one of the latest work by Packt; Frontend Development Projects with Vue.JS. I was supposed to finish the book before now but I was handling a client's project at the time the book came in and I wanted to finish the book and give my honest feedback. I'll be giving my honest feedback, let's get started!

I have read books about Vue JS and have also practiced Vue JS, in fact, Vue JS is my favorite frontend development framework considering that I've worked with other frameworks/libraries. I've used React JS, I chose Vue because of everything! I love the community, it's so welcoming, the documentation, the design and architecture. You must have felt any of these things before deciding to learn Vue, it's the future!

Who is this book for?

This book is completely designed to help people who wants to get started building Vue.js projects learn and start building with the framework, the book has the essential theories and exercises. It can also be used by mid-level Vue.js developers and advanced Vue.js developers for reference purposes and to discover new and better ways to write Vue. The knowledge packed in this work can be benefitted by anyone who has interest in learning and getting better at Vue.js.

So what's in this book?

This book is a fourteen chapters book with a total of 775 pages (including Appendix and Index) covering Vue.js from beginner to advanced level, the book contains comparisons and basic to advanced Vue.js concepts. The summary is as follows.

Introduction to Vue.js
Setting up a development environment for Vue.js development.
Comparing Vue.js with other frameworks/libraries.
Introduction to components in Vue.js.
Styling and using template in Vue.js components.
Vue directives.
Two-way data binding (working with forms).
Methods in Vue components.
Vue lifecycle hooks.
Working with data, computed props, watchers and methods.
Asynchronous data fetching using methods.
Creating Vue projects using Vue CLI and Vue UI.
Debugging Vue.js application using Vue.js Devtools.
Advanced Vue.js concepts; Component Modularity (props, slots, filters, refs, emitting parent components events from child components), Mixin, Plugin and a bunch of other concepts.
Routing (vue-router).
Animating and transitioning State and route using CSS and GSAP.
State management with Vuex (beginner and advanced level).
Unit and End-To-End testing.
Deployment, preparing you app for deployment, continuos deployment using git and how to deploy using platforms like Netlify, AWS using S3 and Cloudfront.

How Chapters are Structured

Each chapters in this book contains an introduction to the topic being discussed in the chapter, the content itself, screenshots, code samples, exercise, activity and summary.

Projects in this book

There are bunch of exercises used for the purpose of demonstrations in this book, making the book more of a practical one. The code bundles can be downloaded online so you can practice and follow along. There are also advanced projects used to demonstrate advanced topics like:

Exercise 2.01 and 2.02: Working with data, computed props and two way data binding.
Exercise 2.03 (Shop Watcher) and 2.04: Using Watchers in Vue.js.
Exercise 2.05: Handling search functionalities using a Vue Method, a Watcher, and Computed Props in Vue.js:.
Exercise 2.06: Asynchronously fetching data from an API using axios and displaying it using computed props in Vue.js.
Exercise 3.01 and 3.02: Setting up a Vue.js project using Vue CLI.
Exercise 3.03: Setting up a Vue.js project using Vue UI.
Exercise 3.04: How to debug a Vue.js application using Vue.js Devtools.
Exercise 4.01: Building your a modular component.
Exercise 4.02: Passing dynamic props to a component.
Exercise 4.03: Props validation.
Exercise 4.04: Implementing a card component using named slots.
Exercise 4.05: Implementing filter in Vue.js.
Exercise 4.06: Wrapping CountableJS with Vue.js (using Refs in Vue).
Exercise 5.01: Creating a Mixin.
Exercise 5.02: Creating a custom Axios Plugin.
Exercise 6.01: Implementing and adding a message feed page using Vue Router.
Exercise 6.02: Adding a navigation link to the message feed route.
Exercise 6.03: Passing the content of the selected message to a new message page and having it displayed on the page.
Exercise 6.04: Extracting a messages list to an external Javascript file and loading it only when MESSAGEFEED route is in vue.
Exercise 6.05: Implementing route for each message with a dynamic routing pattern.
Exercise 6.06: Building navigation tabs within the message Vue.
Exercise 7.01: Adding a new message with an animation effect.
Exercise 7.02: Sorting a list of messages with an animation.
Exercise 7.03: Creating a transition effect for each route navigated.
Exercise 7.04: Tweens with GSAP.

And many other exercises.

Now let me comment...Why not?

This body of work is just another great effort made in teaching Vue.js the right and effective way. This work and works like Vue.js Up and Running by Callum Macre (O'Reilly Media) are the kind of books that really teaches you instead of wasting your time, you know those kind of books that keeps you focused on reading them and then after the whole journey you find out that you can't even do a thing or two and that's because they were more of interesting theories and less exercises.

This book is worth trying out and it cost around 39.99 USD (Print + eBook) and 27.99 USD (eBook) on Amazon. I recommend it for beginners, professionals and backend developers looking to get their hands on frontend development.

You should know these things before contributing to an open source project

Valentine Elum — Thu, 13 Aug 2020 15:32:10 +0000

In this post, I'll be showing you things you should know before contributing to an open source project. I learnt these things and I'll be showing them to you on this short post.

Before making a pr, there are things you should ensure that your changes meet, these things helps save time for everyone working on the project and helps avoid problems. They're:

Adhere to the project's rule.

Many projects has rules that guides them, they maybe where to place media files, how to edit files like a JSON file containing data used by those projects.

When contributing to such projects, try to go by those rules as they are often the foundations of the projects.

Any deviance from the rules will cause problems and your changes won't be merged until corrected.

Be descriptive with your commit messages.

After making an improvement to a project, try as much as possible to explain what you did in the commit message.

Understand before writing.

Try as much as possible to understand the project you're trying to improve before making a change.

Understand the file structure and how the files depends on each other.

If you don't understand the project you'll have a hard working on the project.

That's it. Thanks reading through. I welcome your contribution.

After Installing Wordpress What's Next?

Valentine Elum — Wed, 17 Jun 2020 11:01:00 +0000

In this post, I'll be giving tips on what to do after installing Wordpress to enable you build awesome websites.

Wordpress as we know is an awesome and one of the most used content management system. With good practices, designers and developers build fast, secure and good looking websites in a short period of time.

I have been doing it and I'll be showing you how I've been able to build awesome websites with Wordpress. Let's get started.

After Installation

I uninstall the default themes

After installing Wordpress, the first thing I do is cleaning up the default themes.

Why do I uninstall the default themes?

There are many reasons I do this, in fact it's a good thing to do. It allows me have only the theme I need to build my website.

For instance, I normally use the Elementor page builder to build custom websites with Wordpress, using Elementor automatically requires a theme that gives you the flexibility to build on top of it and also light in weight.

For the above reason, I either choose Astra or Hello theme, both themes are light in weight and gives you the flexible feature you need to build on them.

Like I said, I do that because I need something that allows me to easily build with Elementor. Some of you will likely use ready-made themes. It's up to you. But whatever theme you choose to use be mindful of your site performance.

Installing essential plugins

I love my website when they're fast and secured enough.

I can deal with not-so fine interface, but when it comes to security and experience, I'm very careful.

After installing Wordpress, I must get rid of useless default plugins, install the ones that are useful to me. I do this to clean up my website, keep it secured and fast!

Below are the list of plugins I make use of.

1. WordFence or iThemes Security.

Both of them are the Wordpress plugins I recommend for your site's security. Choose any of them.

2. WP Optimise or Smush

I use one of these plugins to clean up my database, compress images and cache my site. They're really awesome and has free plans.

3. Updraft.

Did I mention that you can use iThemes for backup? Yeah you can. But I recommend using Updraft. It's an awesome Wordpress plugin for backup. One of the best and most used out there.

4. Really Simple SSL.

I use this plugin to ensure that I maintain https across my website. I strongly recommend this.

5. WP Mail SMTP.

With this plugin, I configure WP mail SMTP to send emails from my website. It's very easy to use and it's configuration is magical.

6. Elementor.

😍😍😍😍 I so much love this plugin. With it, there are so much to achieve as long as sleek user interface with Wordpress is concerned. It has a very large community and I choose it over other page builders. Try it out.

These are the most essential plugins for my Wordpress site. I must say that you can use Wordpress plugins to achieve more with Wordpress but more plugins can affect your website in terms of security, speed and entire experience.

You should be mindful of the plugins you make use of and the amount of plugins installed on your website at a time.

Conclusion

From what I've written above, it's obvious that my actions after Wordpress installation are channeled towards making my site secured, backed up and optimised for speed.

I advise you do such. Thanks for reading this post ☺. Your contributions are welcomed.