Frontend State Management with Vue and Vuex : Building the news by category component

Building the news by category component

Install bootstrap as the CSS framework. 

// on terminal
yarn add bootstrap
// main.js file
import "bootstrap/dist/css/bootstrap.css";
  <div class="row">
      v-for="article in newsArticles"
      class="post col-xl-6"
      <div class="post-thumbnail">
        <a :href="article.url" class="animsition-link">
          <img :src="article.urlToImage" alt="..." class="img-fluid" />
      <div class="post-details">
        <div class="date meta-last">
          {{ formatDate(article.publishedAt) }}
      <a :href="article.url" class="animsition-link">
        <h3 class="h4 w-100">{{ article.title }}</h3>
      <p class="text-muted">{{ article.description }}</p>
      <footer class="post-footer d-flex align-items-center">
        <a href="#" class="author d-flex align-items-center flex-wrap">
          <div class="title">{{ }}</div>

import { mapActions, mapState } from "vuex";
import { getFormattedDateTime } from "../helpers/date-helper";

export default {
  name: "NewsBySource",
  props: ["source"],
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
  created() {
  computed: {
      newsArticles: function({ currentNews }) {
        return currentNews.newsArticles[this.$props.source];
  methods: {
    formatDate: getFormattedDateTime

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

course logo
Frontend State Management with Vue and Vuex
Number of sections:
Content length:
Delivery formats:


F Yeboah
I am a Software / UI developer with interests in Search Intensive applications, Information Architectures(IA), UX/UI, FRP, and Reusable Frontend Components Design.... Show more